关于Yahoo十四条军规与前端性能优化

时间  2019-12-01
标签 关于 yahoo 十四 军规 前端 性能 优化 栏目 硅谷 繁體版
原文   原文链接

关于Yahoo十四条军规与前端性能优化

热度 4已有 223 次阅读2014-8-3 15:01 |我的分类:前端相关|系统分类:前端优化| 前端优化, yahoo, 性能优化php


  • 启用Gzip压缩。Gzip的思想就是把文件先在服务器端进行压缩，而后再传输。这样能够显著减小文件传输的大小。传输完毕后浏览器会 从新对压缩过的内容进行解压缩，并执行。目前的浏览器都能“良好”地支持 gzip。不只浏览器能够识别，并且各大“爬虫”也一样能够识别，各位seoer能够放下心了。并且gzip的压缩比例很是大，通常压缩率为85%，就是 说服务器端100K的页面能够压缩到25K左右再发送到客户端。具体的Gzip压缩原理你们能够参考csdn上的《gzip压缩算法》 这篇文章。雅虎特 别强调， 全部的文本内容都应该被gzip压缩: html (php), js, css, xml, txt… 这一点咱们网站作得不错，是一个A。之前咱们的首页也并非A，由于首页上还有不少广告代码投放的js，这些广告代码拥有者的网站的js没有经 过gzip压缩，也会拖累咱们网站。
  • 减小HTTP请求数。当你输入url地址按回车键到下载内容到客户端浏览器后，须要通过1. 域名解析   2. 开启TCP链接 
       3. 发送请求 
       4. 等待(主要包括网络延迟和服务器处理时间)
       5. 下载资源         
    减小http请求有这样几个优势:
    (1)   减小DNS请求所耗费的时间.
    且不说对错,由于从基原本说,减小http请求数的确能够减小DNS请求和解析耗费的时间.
    (2)   减小服务器压力.
    这个一般是被考虑最多的,也是我用来说解给别人听的最大理由,由于每一个http请求都会耗费服务器资源,特别是一些须要计算合并等操做的服务器,耗费服务器的cpu资源可不是开玩笑的事情,硬盘能够用钱买来,cpu资源可就没那么廉价了.
    (3)   减小http请求头.
    当咱们对服务器发起一个请求的时候,咱们会携带着这个域名下的cookie和一些其余的信息在http头部里,而后服务器响应请求的时候也会带回一些cookie之类的头部信息.这些信息有的时候会很大,在这种请求和响应的时候会影响带宽性能.
  • 无疑，每一次http请求都是 很是耗时的，那么，该如何减小http请求数呢？
  • 如何减小请求数

    一、合并文件
         合并文件就是把不少JS文件合并成1个文件，不少CSS文件合并成1个文件，这种方法应该不少人用到过，这里不作详细介绍，
         只推荐1个合并的工具：yuiCompressor 这个工具yahoo提供的。 http://developer.yahoo.com/yui/compressor/

      二、合并图片
         这是利用css sprite，经过控制背景图片的位置来显示不一样的图片。这种技术也是你们都用过的，不作详细介绍，推荐1个在线合并图片的网站:http://csssprites.com/

      三、把JS、CSS合并到1个文件
         上面第1种方法说的只是把几个JS文件合并成1个JS文件，几个CSS文件合并成1个CSS文件，哪如何把CSS和JS都合并到1个文件中，见个人另1篇文章:
         http://www.blogjava.net/BearRui/archive/2010/04/18/combin_css_js.html

      四、使用Image maps
         Image maps 是把多个图片合并成1个图片，而后使用html中的<map>标签链接图片，并实现点击图片不一样的区域执行不一样的动做，image map在导航条中比较容易使用到。
         image map的使用方法见： http://www.w3.org/TR/html401/struct/objects.html#h-13.6

      五、data嵌入图片
         这种方法把图片进行编码直接嵌入到html中进行使用，以减小HTTP请求，但这个会增长HTML页面的大小，并且这样嵌入的图片不能缓存。
  • 将CSS文件放在<head></head>标签中，是为了防止在低网速的状况下，用户的IE浏览器只能看到空白页。Firefox虽然不会阻止，但可能须要重画，这就可能致使页面闪烁的问题。因此，为了提升浏览器的渲染性能，避免页面出现空白或者闪烁的现象。应该将css文件放在<head>标签中，而不是<body>标签。
  • 使用CDN内容分发网络。CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽量避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
  • 将<script>标签放在最下面。他会先讲内容呈现出来，不会让用户等得过久。由于防止script脚本的执行阻塞页面的下载。在页面loading的过程当中，当浏览器读到js执行语句的时候必定会把它所有解释完毕后在会接下来读下 面的内容。不信你能够写一个js死循环看看页面下面的东西还会不会出来。因此放在页面最后，能够有效减小页面可 视元素的加载时间

  • 添加Expire/Cache-Control 头：Add an Expires Headercss

    如今愈来愈多的图片，脚本，css，flash被嵌入到页面中，当咱们访问他们的时候势必会作许屡次的http请求。其实咱们能够经过设置 Expires header 来缓存这些文件。Expire其实就是经过header报文来指定特定类型的文件在览器中的缓存时间。大多数的图片，flash在发布后都是不须要常常修 改的，作了缓存之后这样浏览器之后就不须要再从服务器下载这些文件而是而直接从缓存中读取，这样再次访问页面的速度会大大加快。html

  • 避免使用CSS Expression表达式。CSS表达式会下降浏览器的渲染性能；在页面滚动乃至鼠标移动和页面缩放的时候全部元素都要被从新计算一次，大大下降了浏览器的性能。


    8. 把css文件和js文件放外部。不只从性能优化上会这么作，用代码易于维护的角度看也应该这么作。把css和js写在页面内容能够减小2次请求，但也增 大了页面的大小。若是已经对css和js作了缓存，那也就没有2次多余的http请求了。固然，我在前面中也说过，有些特殊的页面开发人员仍是会选择内联 的css和js文件。也大大提升了css和js代码的复用性。


    写在页面内的状况：只用用于一个页面；不常常被访问到；脚本和样式不多。


    9. 减小DNS请求：在网络 上每台计算机都对应有一个独立的ip地址。在域名和ip地址之间的转换工做称为域名解析，也称DNS查询。一次DNS的解析过程会消耗20-120毫秒的 时间,在dns查询结束以前，浏览器不会下载该域名下的任何东西。因此减小dns查询的时间能够加快页面的加载速度。yahoo的建议一个页面所包含的域 名数尽可能控制在2-4个。


    IE默认的DNS缓存时间为30min；Firefox为60s；chrome为60s；




    10.
    压缩 JavaScript 和 CSS 。能够去除没必要要的字符、注释和空格。
    压缩js和css的左右很显然，减小页面字节数。容量小页面加载速度天然也就快。并且压缩除了减小体积之外还能够起到必定的保护左右。这点咱们作得不错。 经常使用的压缩工具备JsMin、YUI compressor等。另外像http://dean. edwards.name/packer/还给咱们提供了一个很是方便的在线压缩工具。



    11. 避免重定向。原始请求被转向了其余请求。









    14.使用AJAX缓存。


另外，除了以上的yahoo十四条军规外，还可使用以下三条优化建议：
高性能HTML
1、避免使用iframe
　　iframe也叫内联frame，可将一个HTML文档嵌入另外一个HTML文档中。
　　iframe的好处是，嵌入的文档独立于父文档，一般也借此使浏览器模拟多线程。缺点是：
　　①虽然iframe能模拟多线程，但主流浏览器的同域名并行下载数是不变的，浏览器对同域名的连接老是共享浏览器级别的链接池，
　　   即便是不一样窗口或标签页的同域名网页。
　　②在页面加载时，iframe会阻塞父文档onload事件的触发。而且有些浏览器需在触发onload事件后才能被触发onunload事件。
　　   故用户用onload事件长久未触发而离开页面时，不会触发onunload事件。
　　　　※不兼容IE6~8的解决方案：使用JavaScript动态加载iframe元素或动态设置其src属性。
  1. <iframe id=ifr ></iframe>
  2. document.getElementById( ‘ifr’ ).setAttribute( ‘src’ , ‘url ’ );
复制代码



　　③iframe是文档内最消耗资源的元素之一，即便是空iframe的开销也是昂贵的。【经过 Steve Souders测试】

2、避免空链接属性
　　空链接指：img、link、script 和 iframe元素的src或href属性的值为空。（如src = ””）
　　设置了空链接后浏览器依然会以默认规则发送请求：
　　①IE6~8中只有img元素会出问题：IE会将img的空地址解析为当前页面地址的目录地址并请求。
　　　如当前网页地址为 http://aaa.com/bb/c.html，img的地址会被解析为 http://aaa.com/bb
　　②早些版本的Webkit和Firefox会将空链接解析为当前页面的地址。在ios与android中此问题较严重。
　　　若是页面有多个空链接属性元素，会增长服务器的请求次数。
　　③幸运的是，主流浏览器对iframe的src属性值为空时，会解析为about:blank地址，而不发送额外请求。

3、避免节点深层级嵌套
　　层级越深的节点在初始化构建时，所占内存越多。
　　经过浏览器HTML解析器会将整个HTML文档的结构存储为DOM树结构。当节点嵌套层次越深，构建的DOM书层次也越深。

4、缩减HTML文档大小
　　①删除对执行结果无影响的空格空行和注释；
　　②避免table布局；
　　③使用HTML5；

五。显式指定文档字符集
　　在HTML页面开时指定字符集有助于浏览器当即开始解析HTML代码。
　　HTML文档一般被解析为一序列的带字符集编码信息的字符串，经过Internet传送。
　　字符集编码在HTTP响应头中，或HTML标记中指定。浏览器经过指定的字符集，吧编码解析为可现实在屏幕上的字符。
　　若浏览器没法获知页面的编码字符集，通常会在执行脚本和渲染页面以前，先将字节流缓存，再搜索可进行解析的字符集 或 以默认字符集来解析。

6、显示设置图片的宽高
　　有时须要在页面加载完以前，就对页面布局进行定位。
　　若页面中的图片没指定尺寸，或尺寸与实际图片大小不符，浏览器会在图片下载完成后再"回溯"该图片并从新显示，从而浪费时间。
　　故最好为页面的图片设置指定尺寸（行内样式或CSS样式）。
  1. <img src="hello.png" width="400" height="300">
复制代码



7、避免 脚本阻塞加载
　　浏览器在解析常规script标签时，会等待script下载完毕后，才解析执行，以后的HTML代码就只能等待。
　　故应该将脚本放在文档的末尾：
  3. <script src="example.js" ></script>
  4. </body>
复制代码



高性能CSS
1、避免使用@import
　　CSS2.1加入的@import，会使页面在加载时添加额外延迟。
　　因为浏览器不能并行下载样式，会致使页面增添额外的往返耗时。而使用<link>能并行下载样式，但任然是屡次请求。
2、避免AlphaImageLoader滤镜
　　此滤镜能解决IE6即一下版本显示PNG图片的半透明效果，但会在加载图片时终止内容的呈现，并冻结浏览器。
　　在每一个元素(不只仅是图片)都会运算一次，添加内存开支。
　　应使用PNG8格式来代替，或用下划线(_filter)只针对IE6。
3、避免CSS表达式
　　CSS表达式是设置动态CSS属性的即强调又危险的方法。IE5开始支持，IE独有。

// 实现每隔一小时切换一次背景颜色
 
复制代码

　　CSS表达式的缺点是技术频率极大，在页面显示、缩放、滚动 或 移动鼠标，都会从新计算一次。移动随便会达到1w次以上的计算量。
　　①使用一次性的表达式能减小计算次数，在第一次运行时将结果赋给指定样式属性，并用该属性代替CSS表达式。
　　②若是样式属性必须在页面周期内动态地改变，使用时间句柄代替CSS表达式是一个可行的办法。

4、避免通配选择器
　　优化选择器的原则是减小匹配时间。CSS选择器的匹配机制是：从右向左进行规制匹配的！
　　　　#header > a { font-weight:blod; }
　　　　　　上面这条规制实际是浏览器遍历页面全部a元素，并肯定其父元素的id是否为header。
　　　　#header  a {...}
　　　　　　后代选择器开销更大，在遍历页面的全部a元素后，会需向上遍历直到根节点。
　　由此可知，选择器最右边的规制 每每决定了向左移匹配的工做量。故最右边的选择规则 称之为关键选择器。
　　　　.selected * {...}
　　　　　　在匹配全部元素后，再分别向上匹配直至根节点。一般比开销最小的ID选择器高出·~3个数量级。

5、避免单规则的属性选择器
　　.selected [href='#index'] {...}
　　　　浏览器先匹配全部的元素，检查其是否有href属性而且值为“#index”，再分别向上匹配class为selected的元素。
　　故应该避免使用关键选择器是单规则属性选择器的规则。

6、避免正则的属性选择器
　　CSS3添加了复杂的属性选择器，经过类正则表达式进行匹配。但这些类型的选择器会比基于类别的匹配慢不少。

7、移除无匹配的样式
　　①删除无用的样式，可缩减样式文件大小，加快加载速度。
　　②对于浏览器，全部样式规则都会被解析后索引发来，即便是当前页面无匹配的规则！故移除无匹配的规则，减小索引项，加快浏览器查找速度。

高性能JavaScript
1、使用事件代理
　　当过多的时间句柄被频繁触发时，页面反应会迟钝。
　　如一个div有10个按钮，只需给div附加一次事件句柄，而没必要给每一个按钮添加一个句柄。
　　　　事件冒泡时刻捕捉到事件 并判断时那个事件发出的。【触发事件的元素 = ev.srcElement ? ev.srcElement : ev.target;】
2、缓存选择器查询结果
　　减小选择器查询的次数，并尽量缓存选中的结果，便于之后的重用。


  1. jQuery('#top').find('p.classA');
  2. ...
  3. jQuery('#top').find('p.classB');
复制代码

// 使用下面的方法 减小开销
  1. var cached = jQuery('#top');
  2. cached.find('p.classA');
  3. ...
  4. cached.find('p.classB');
复制代码



3、避免频繁的IO操做
　　应减小对cookie或localstorage的操做，由于对它们进行操做的API是同步的，而它们是多个tab页面间共享的。
　　多页面同时操做cookie和localstorage时，会存在同步加锁机制。

4、避免频繁的DOM操做
　　JavaScript访问DOM元素缓慢，应作到：
　　①缓存已经查询过的元素；
　　②线下更新完节点以后，在将它们添加到文档树中；
　　③避免使用JavaScript来修改页面布局。

5、使用微类库
　　尽可能避免使用大而全的类库，而是按需使用微类库来辅助开发。
 
转载原文：http://www.w3cfuns.com/blog-5434413-5399486.html
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程