最新公告
  • 欢迎您光临源库坊,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 网站加速第1部分: 如何编写更高效的CSS来加速您的网站

    作为我担任Speckyboy首席技术官的新职位的一部分,我决定撰写一系列文章,以帮助您了解制作一个真正快速的网站所需要的内容。您可能已经注意到,Speckyboy最近刚出手,并且运行速度快得多。

    这是因为我将在“网站速度”系列中列出所有提示,其中重点是100%的加载时间。

    为什么要关心CSS?为什么当Adobe和其他公司的产品以HTML和CSS输出整个网站时,这些网站都是预制的并准备交付给客户?

    原因很简单,所有这些“弹出式”构建器应用程序都会以惰性方式添加许多不必要的CSS和HTML。慢速网站遭受跳出率高和搜索引擎排名低的困扰。

    用冲浪术语来说,“弹出”是在生产线上创建的,供冲浪一天的初学者使用,而定制板则由专业人士手工制作和使用。人们会使用弹出式窗口,因为它们比较重,走得更慢,并为初学者提供了一个更稳定的工作平台。而定制板更轻巧,并且完全为骑手量身定制,因此他们可以发挥出自己的能力。开发网页时也是如此。

    当然,您可以使用弹出式网站创建者来制作您的网站,但是您将向其余的Web制作世界展示您真正的菜鸟数量,因为您的网站加载速度很慢,而且kb很大并有很多额外的HTML和CSS使其起作用。

    #1:编写自己的自定义CSS和HTML

    自定义CSS和HTML始终可以使您的网站快速运行。始终尝试减少您使用的DOM元素的数量,换句话说,如果您不需要HTML标记,请尽量减少它。

    这是一个很好的示例,该示例在网站的页脚中使用了不需要使用列表的位置

    <div class =“ example-footer-1”>
    <ul>
     <li>&copy; <a href="#">我的网站2011 </a> </ li>
     <li> <a href="#">隐私声明</a> </ li>
     <li> <a href="#">站点地图</a> </ li>
     <li>由<a href="#">我的出色公司</a> </ li>创建的网站
    </ ul>
    </ div>
    

    HTML的235个字符

    .example-footer-1 {
      内边距:20px;
      border-top:实心1px #cccccc;
      border-bottom:solid 1px #cccccc
    }
    .example-footer-1 ul {
      list-style-type:无;
      填充:0;
      margin:0}
    .example-footer-1 ul li {margin-right:3px; display:inline}
    

    215个CSS字符

    在哪里

    <div class =“ example-footer-2”>
    <p>
     &复制; <a href="#">我的网站2011 </a>
    <a href="#">隐私声明</a>
    <a href="#">站点地图</a>
    <a href="#">我令人赞叹的公司</a>创建的网站
    </ p>
    </ div>
    

    HTML的197个字符

    .example-footer-2 {
      内边距:20px;
      边框:实心1px #ccc;
      border-width:1px 0
    }
    .example-footer-2 p {padding:0; margin:0}
    .example-footer-2 a {margin:0 3px 0 0}
    

    153个CSS字符

    单击此处在单个演示文件中查看两个不同的示例。

    示例2中的不同之处在于

    1)设置所有边框的边框宽度,然后取消设置侧面的边框宽度,而不是专门设置顶部和底部的边框。

    2)使用#ccc而不是#cccccc的较短形式将边框宽度颜色减少了3个字符。

    3)没有使用列表,因为这实际上不是列表。仅在HTML中使用了A标签。对于许多设计师和弹出窗口制造商来说,在此处使用列表是很常见的做法。

    4)更改了段落标记的列表,以保持HTML验证正确,这将每个列表元素的链接减少了9个字符。不再需要'<li>’和'</ li>’,更改'<ul>’和'<p>’可以保存字符的顶部和底部。

    5)将margin语句从margin-right:3px更改为margin:0 3px 0 0,尽管如果一次使用多个margin语句不会节省任何空间。

    #2:摆脱不必要的空格,制表符和回车符

    如果您使用W3C,WordPress或其他工具进行检查,则建议您以自上而下的方式编写CSS,例如,编写CSS的官方方法需要回车,制表符和空格以提高可靠性。

    .example {
    	内边距:20px;
    	边框:1px实心#ccc;
    	border-width:1px 0px;
    }
    

    字符数90、4个回车符和3个制表符
    如果您想要一个更快的站点,则在编码时应尽量减少它:

    .example {padding:20px; border:solid 1px #ccc; border-width:1px 0;}
    

    字符数64,没有回车,没有多余的空格,没有多余的字符,也没有制表符。

    这里发生的事情很简单,多余的绒毛被去除了。它仍然会很愉快地验证,但不会占用太多空间。

    为了节省大量时间,您可以使用文本编辑器或IDE来完成大部分工作。这里有很多可以运行的查找和替换语句。

    • 用。。。来代替 ”{”
    • 将“}”替换为“}” [1]
    • 用“:”替换“:” [1]
    • 用。。。来代替 ”:”
    • 取代“;”和“;” [1]
    • 替换为“;” 与“;” [1]
    • 用。。。来代替 ”,”
    • 将“ 0px”替换为“ 0”
    • 用“ 0”替换“ 0em”

    [1]值得连续运行2或3次这些命令以消除所有那些不需要的空间。

    切记: CSS缩小工具将永远无法像手工获得的那样高效。以W3 Total Cache的缩小为例,它不会删除冒号之前/之后,大括号前或逗号之后的空格。W3总体缓存的优点是删除回车符,这有助于使文件完全可读。

    #3:在每个CSS语句的末尾删除不需要的分号

    以有效的无空格,制表符或回车符返回CSS语句,我们可以通过删除语句末尾的最后一个分号来使其短1个字符

    .example {padding:20px; border:solid 1px #ccc; border-width:1px 0;}
    

    ……变成……

    .example {padding:20px; border:solid 1px #ccc; border-width:1px 0}
    

    因此,我们的64个字符长的语句变为63个字符长。

    如果您认为一个CSS文件中通常有200个以上的CSS语句,则每个语句可节省1个字符,因此例如对于200个语句文件,将删除200bytes。如果您寻找“;}”并替换为“}”,则轻松删除

    #4:正确学习CSS

    您可能会认为我正在教您用这一说法吸鸡蛋,但是请继续关注我。我经常从其他人的设计和代码中看到,他们不了解CSS如何正常工作。他们很可能通过在各处阅读网站来解决问题,而不必了解情况的真相。毕竟,互联网上有很多盲人领导盲人。因此,请切掉胡扯,让自己对CSS有一定的了解。例如,在我见过的公司重新编码的几乎每个网站上,我都看到过:

    li {list-style-type:none}
    

    不应将其应用于列表元素,而应应用于整个列表,像这样

    ul {list-style-type:none}
    

    或以浪费空间或愚蠢代码为例

    #header {width:auto; 保证金:0自动;}
    #footer {margin:0 0px 0 0px; 填充:0 0 0px 0}
    #sidebar {
    背景图片:url(images / image.png);
    背景位置:中心顶部;
    背景颜色:透明;
    背景重复:不重复
     }
    

    在#header必须为自动边距应用特定宽度以使其居中的情况下,因此浪费了2位代码,仅使边距底部和0的顶部处于活动状态。

    #footer可能只是 margin:0;padding:0;

    #sidebar本来可以 background:transparent url(images/image.png) no-repeat center top;

    对于大型公司或小型设计公司,通常我在每个站点上都做得很快。这通常来自两个地方,一个是不真正编码的设计师,另一个是不真正了解CSS的后端编码器。

    帮自己一个忙,并获得有关该主题的一些书,不要依赖网站在这里为您提供答案。就个人而言,我发现Sitepoint书籍最易读。哦,请尽力理解浏览器及其CSS级别之间的区别,以便在仍需要为企业支持IE6时优雅地降级代码。

    #5:提防浪费的CSS重置

    许多人在其CSS代码的开头使用CSS重置来尝试在所有浏览器上获得一个公平的竞争环境。虽然我觉得这是个好主意,但执行过程经常会被误导。

    根据Richard Clarke定义的mashable.com使用此CSS重置

    html,body,div,span,object,iframe,
    h1,h2,h3,h4,h5,h6,p,blockquote,pre,
    缩写,地址,引用,代码,
    del,dfn,em,img,ins,kbd,q,样本,
    小,强,子,sup,var,
    b,i,dl,dt,dd,ol,ul,li,
    字段集,表单,标签,图例,
    表格,标题,tbody,tfoot,thead,tr,th,td,
    文章,放在一边,画布,细节,figcaption,图,
    页脚,页眉,hgroup,菜单,导航,部分,摘要,
    时间,标记,音频,视频{
      边距:0;
      填充:0;
      边界:0;
      轮廓:0
      字体大小:100%;
      垂直对齐:基线;
      背景:透明;}
    

    在许多地方,这再浪费不过了。让我们分开一秒钟。

    footer, nav, section, label, dfn, cite, kbrd, code, samp, b, i, strong, em, canvas, tr, thead, tfoot, tbody, span, vardiv根本不需要出现在此列表中,因为所有浏览器都已经预先定义了它们,因为没有填充,没有边距,没有背景,没有边框,没有轮廓,没有应用的字体大小。浪费的空间。

    sup, smallsub不应将字体大小设为100%,因为它们的大小应与文本其余部分的大小不同,使其设为100%会扼杀它的意义。再次浪费了空间。

    sup并且sub不应使基线垂直对齐,sup使其变小并高于线,sub使其变小并低于线。

    我会争辩说,th并且td应该这样,vertical-align:top因为这几乎总是它们的使用方式,实际上它们需要text-align:left使它们保持一致,例如在某些浏览器中位于中间,而在某些浏览器中则位于左侧。

    在处理整个页面之前,浏览器必须考虑很多浪费的空间以及许多额外的应用项。由于这些规则首先出现在页面中,因此它们将应用于页面上的所有项目,然后CSS将覆盖它。基本上,这会减慢所有操作的速度,并使您的CSS文件大于所需的大小。到处都是浪费时间,不要误以为“网络奶油”知道他们在做什么,他们也只是剪切和粘贴。

    #6:用gzip压缩CSS

    Gzip与您几乎每天都会使用的普通zip非常相似。它是一种用于将文件压缩到最小大小的工具,这样,当文件发送到浏览器时,它们将使用较少的网络带宽。

    如果您的服务器允许,无论是apache,tomcat,lighttp还是IIS,请始终gzip CSS。请注意,许多托管公司将关闭其服务器的gzip,因为这样做需要更多的处理能力,并且他们不希望其服务器有任何滞后。另请注意,如果您是一个非常受欢迎的网站,则对内容进行gzip压缩的额外处理可能会损害服务器性能,因此您可能必须投资增加处理能力。

    gzip’ing有不同的级别,总体上,大多数人使用’-9’或’level 9’gzip’ing,因为gzip’ing使文件最小,但也需要最大的处理能力。

    有关更多详细信息和完整说明,将很快在本系列的“为速度配置服务器”部分中。

    切记:并非所有的浏览器都可以处理gzip’ing,并且某些浏览器安全工具会阻止gzip’ing的使用,因此首先要重点放在一个小的CSS文件上。

    #7:将样式表放在顶部

    始终,始终将样式表始终放在HTML的HEAD部分的顶部,正好在标题下方。这是因为它希望尽快下载,以便可以将其应用于页面。出于任何原因,请勿将STYLE标记放入html正文中,除非该标记对于该特定任务是100%必需的,请将其添加到外部样式表中。

    #8:始终使用外部样式表

    外部样式表很不错,因为它们可以gzip压缩并缓存在浏览器中,如果将样式放在行内,则每次加载页面时都会重新加载样式表,从而缩短了响应时间。

    #9:不要使用CSS表达式

    CSS表达式的支持较差,并且需要更多处理能力。例如,如果要根据一天中的时间设置不同的背景色,请在服务器端通过动态生成CSS来实现,或者编写一些时髦的Javascript来完成所有文件的加载后再执行相同的任务这一页。

    #10:请勿使用@import使用链接

    有些人使用@import将CSS包含到HTML中,这是一个非常糟糕的主意,因为它会减慢速度,使用标准链接语法,并且一定要记住在其中设置正确的媒体类型:
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" >

    #11:在CSS文件上设置浏览器缓存

    在浏览器上进行缓存是您告诉浏览器CSS文件在一段时间内不会更改的地方。这可以是1小时,1天,1个月,1年,100年或任何您选择的时间。只要浏览器没有清空缓存,它就会从本地存储中重新加载CSS文件,并且不会向您的服务器询问。这有两个明显的好处,首先,它从服务器加载的文件更少,这意味着服务器可以一次具有更多的连接,其次,CSS文件是从本地内存加载的,而不是服务器加载的100毫秒。

    有关更多详细信息和完整说明,请参阅本系列的“为速度配置服务器”部分。

    切记:浏览器一次只能与服务器建立如此多的连接,它必须等待每个连接可用才能使用,除了服务器允许浏览器执行其他任务(例如下载图像)之前,浏览器还必须移至其他位置或HTML。

    #12:使用内容分发网络(CDN)

    内容交付网络是仅提供内容的服务器的全球基础结构。这样的想法是,如果您的服务器位于加利福尼亚州,并且您有来自德国的访问者,那么如果没有CDN,他们将不得不从加利福尼亚州获取所有文件,从而在往返该网络上花费了很多额外的网络时间。但是,使用CDN时,用户不必一直回到加利福尼亚获取该信息,而是可以转到德国的本地服务器。实际上,取决于您的CDN托管公司,它们可能比仅去德国的地方要好,例如,如果它们来自慕尼黑,则可能会去巴伐利亚的服务器。

    对于那些站点非常繁忙的站点而言,内容交付网络实际上只是一个可行的选择,而这一切都取决于成本。例如,我上次检查时从亚马逊网络服务获得的S3 CDN,每月最低需要花费$ 150,然后根据选择的选项迅速提高到非常大的数字。这确实将CDN置于大多数网站的范围之外。但是,作为Web设计师/创建者,您可以投资CDN,然后将其转售给托管包中的所有客户。

    以下是CDN顶级托管公司的列表…

    Akami –所有内容交付公司中的老爹(或者我应该说是大浪),第一家也是最好的,但是要花上大笔钱。明确的企业选择,非常好的工作伙伴,非常有帮助。

    Max-CDN –由SpeckyBoy使用,并且由WordPress的W3 Total缓存插件支持,价格合理。

    Highwinds –我自己用于WordPress的Share and Follow插件,因为它提供了与其他许多插件不同的安全性,并且价格很高。

    Amazon S3 –来自Amazon Web Services。昂贵但很好,但是定价选项的确增加了混乱,并且花费了大量时间来获得正确的交易。

    Limelight –没有使用此CDN的个人经验,但是我没有听到任何不良报告。

    请记住:使用与您的服务器DNS名称不同的DNS名称作为CDN网络的名称,否则它将发送无意义的Cookie信息。也不要使用子域,它仍然会发送该Cookie信息。

    #13:尝试减少后代选择器的使用

    设计师经常使用后代选择器来明确定义页面元素的外观。返回页面顶部的示例:

    .example-footer-1 {
    内边距:20px;
    border-top:实心1px #cccccc;
    border-bottom:solid 1px #cccccc
    }
    .example-footer-1 ul {list-style-type:none; padding:0; margin:0}
    .example-footer-1 ul li {margin-right:3px; display:inline}
    

    (为了便于阅读,添加了回车符)
    实际上,如果设置为:

    ul {list-style-type:none; padding:0; margin:0}
    li {margin-right:3px; display:inline}
    .example-footer-1 {
    内边距:20px;
    border-top:实心1px #cccccc;
    border-bottom:solid 1px #cccccc
    }
    

    (增加了回车以提高可读性)

    这是更快的方法,因为浏览器不必一直寻找.example-footer-1,并且当知道ul和li已设置时,它便会下降。这是您必须尝试使用​​的“设置并忘记”方法。

    这可以应用于您所有网站的设计,以最大程度地发挥网站的速度,但这当然是速度与美观之间的平衡。

    #14:一起添加东西以节省空间

    通常,在创建网站时,大多数CSS代码在整个页面中都会重复很多次。因此,例如在某些情况下,可能会使用相同的边距,边框和内边距,但对每个边框进行了明显不同的调整。

    .list1 {margin:0; 填充:0; 边框:纯色1px红色}
    .list2 {margin:0; 填充:0; 边框:纯色1px绿色}
    .list3 {margin:0 5px; 填充:0; 边框:纯色1px黑色}
    

    可以更有效地写成

    .list1,.list2,.list3 {margin:0; 填充:0; 边框:纯色1px红色}
    .list2 {border-color:green}
    .list3 {border-color:black; margin:0 5px}
    

    在个人层面上,我倾向于做些不同的是圆角。与其将它们依次应用于每个CSS元素,我倾向于创建已经具有圆角设置的1或2类,并将它们应用于HTML。例如

    。舍入
    {-moz-border-radius:3px; border-radius:3px; -webkit-border-radius:3px}
    
    .rounded-big
    {-moz-border-radius:15px; border-radius:15px; -webkit-border-radius:15px}
    
    .rounded-top {
    -moz-border-radius-topleft:3px; border-top-left-radius:3px;
    -webkit-border-top-left-radius:3px; -moz-border-radius-topright:3px;
    border-top-right-radius:3px; -webkit-border-top-right-radius:3px;
    }
    

    #15:将所有CSS合并为1个文件

    当每个页面的连接数减少时,所有Web服务器和页面的工作速度都会更快。因此,考虑到这一点,只有一个CSS文件被调用(gzip,缓存和放在CDN上)要快得多,而不是很多。每个对新文件的请求都将花费额外的时间,通常需要进行DNS查找,交换cookie信息并必须等待与服务器的连接。只需将所有CSS添加到一个文件中,即可消除所有这些废话。

    #16:尽最大努力使CSS文件低于25k

    如果您的文件可以保存到25k以下,则iPhone和其他移动设备将对其进行缓存。如果他们是您的目标受众,这非常重要。如果文件被缓存,将不会再次下载。

    #17:如果您不使用它,请不要发送它

    假设您正在为花店创建一个站点,并正在为其修改WordPress的二十一主题。您能想到在任何情况下都使用CODE标签的情况吗?我也不能。所以不要将CSS发送给客户端。如果您不使用abbr,sub,sub blockquote等,也可以将这种方法应用于可能也要使用的CSS重置,请将其从CSS编码中删除。同样,如果您正在制作的网站没有评论,请不要包括所有处理评论的CSS。

    这是一条简单的规则,但经常被遗忘,尤其是在适应他人的工作作为起点时。

    #18:缩小CSS

    在花了一些时间来节省所有空间后,您要做的最后一件事就是缩小CSS以使其尽可能地小。这是在正式拥有有价值的CSS之前应该做的事情。

    进行压缩的方法有几种,您可以在使用此在线CSS压缩器,在PC上的本地应用程序(例如YUI Compressor)或服务器上作为服务器任务的服务器上的本地应用程序上载CSS之前完成此任务为浏览器加载CSS文件的时间。与以往一样,最好先缩小然后再上传,因为提供缩小的文件所需的服务器资源更少。

    请记住,如果在将其放到服务器上之前将其最小化,则或多或少将无法再读取该文件。

    围捕

    好了,这就是“网站速度”系列第一部分的结尾。我将在以后的版本中介绍更多内容,以便为您提供一套完善的工具,以帮助他们尽快完成任务。

    请记住,这些项目中的每一项都来自多年的经验,因此在这18个项目中都没有浪费任何精力。每个人都会帮助您加快网站速度。

    当然,如果您不能等那么长时间,并且需要有人用神奇的魔杖在您的站点上挥舞,给我发邮件,我自己和我的团队将很乐意在所有速度方面对您进行分类。

    1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
    3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如遇到加密压缩包,默认解压密码为"www.yuankufang.com",如遇到无法解压的请联系管理员!
    源库坊 » 网站加速第1部分: 如何编写更高效的CSS来加速您的网站

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    源库坊
    一个高级程序员模板开发平台
    • 348会员总数(位)
    • 1192资源总数(个)
    • 2本周发布(个)
    • 1 今日发布(个)
    • 1458稳定运行(天)

    提供最优质的资源集合

    赞助本站svip 了解详情