代码改变世界

web前端性能优化总结

2013-10-06 16:59  龙恩0707  阅读(684)  评论(0)  编辑  收藏  举报

      前言： 对于前端开发工程师来说，性能优化毫无疑问是重中之重，最为大家所熟悉的是雅虎的23条军规，在我的认为中，性能优化不仅仅是提高用户访问速度，更是测试一个合格的前端开发工程师的技能，也包括开发效率,下面是我总结一些性能优化方面的知识点。

    HTML部分：

     1. HTML语义化：使代码结构清晰，利于搜索引擎，便于团队开发。

      2.  减少DOM节点： 能快速渲染页面。

      3.  给图片加上正确的宽高值,可以减少页面重绘，同时防止图片缩放。

          通过google下 重绘(Repaint)和重排(Reflow) 基本原理如下：

               Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。

　　　 Reflow(重排)就是DOM的变化影响到了元素的几何属性(宽和高)，浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，

浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，

style属性的改变等等。如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨，所以前端也就有必要知道 Repaint 和 Reflow的知识。

      减少性能影响的办法：

　　上面提到通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式;　有动画效果的元素，它的position属性应当设为fixed或

absolute，这样不会影响其它元素的布局;如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。

　　总之，因为 Reflow 有时确实不可避免，所以只能尽可能限制Reflow的影响范围。

    4. 正确的使用闭合标签：如避免使用<div/>，浏览器会多一个将它解析成<div\></div\>的过程；

    5. 链接为目录或首页的地址后面加”/”，如http://www.cnblogs.com/tugenhua0707/。（因为在输入不带斜杠的时候通常服务器会进行一次跳转，这会导致很多网站查询不到斜杠网站的时候返回值

为 301）。

    6. 用LINK而不用@import方式导入样式。(link导入样式是边渲染页面边加载渲染样式，而import是等整个页面加载完后 再去渲染css)。

    7. 样式放在页头，JS放在页尾；

    CSS部分：

  1. 避免使用 CSS Expressions(CSS表达式)：如background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ) ;
  2. 避免使用CSS滤镜。
  3. 使用css sprites技术 把所有小图合并一张大图，减少http请求数。
  4. 减少查询等级。比如 .header .logo 比 .header .top .logo 效率高，因为css渲染的方式是"从右到左的"。其中ID的权重貌似是100，类名的权重貌似是10，标签的权重貌似是1.具体的可以去查询下。
  5. 避免TAG标签与CLASS或者ID并存，如a.top, a#top等。
  6. 删除重复的css 能合并的尽量合并 比如：有font-family font-size font-weight等等 直接写到一起 font: XX XX XX 等。

   Javascript部分：

   1. 尽量不使用全局变量。（会污染全局环境）

   2. 使用事件代理绑定事件，可以将事件绑定在body(或者与之对应的最外层容器)上进行代理。(减少事件的绑定)

   3. 避免频繁操作DOM节点。

　　 原理： DOM的操作次数越多，性能消耗就越多。

　　　　　  天生就慢。在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JavaScript(ECMAScript)看成另一个岛屿，两者之间以一座收费桥连接”。所以每次访问

DOM都会教一个过桥费，而访问的次数越多，交的费用也就越多。所以一般建议尽量减少过桥次数。

      解决办法：

         修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开

销，在循环结束时一次性写入。

　　减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。

   4. 尽量不使用EVAL try catch等。

   5. 减少对象查找，如a.b.c.d这种查找方式非常耗性能，尽可能把它定义在变量里；

   6. 使用JSON格式来进行数据交换。

   7. 编写合理的JS 代码能抽象的尽量抽象。

  服务器部分：

  1. 合并css,js文件 减少http请求数。

  2. 压缩css,js文件 缩短文件传输时间。

  3. 尽量使用缓存机制。

      原理： 缓存(Caching)优化了用户的回访。再一次访问时不需要从服务器重新下载所有的资源文件。直接从缓存里面读取，HTTP协议提供了两种方式实现缓存机制，缓存头和ETags。

     缓存头可以缓存经常修改的资源。它包含两个部分：Expires和Cache-Control:max-age。Expires标记过期时间，此后的访问将重新请求资源。max-age表示资源的有效秒

数。当带有缓存头时，浏览器只会在缓存头过期后重新请求资源。

     ETag表示资源的版本，用于与服务器比对是否相同。它适用于任意改变的内容资源。资源的ETag头告诉浏览器“去问问服务器有同人没，如果有就不改写啦！”。但是ETag还需

要和服务器交互，不太适用于完全缓存的资源。

   4. 使用CDN(内容分发网络)加速，使用户从离自己最近的服务器下载文件；

   5. 避免404 。

       有些站点把404错误响应页面改为“你是不是要找***”，这虽然改进了用户体验但是同样也会浪费服务器资源（如数据库等）。最糟糕的情况是指向外部 JavaScript的链接出

现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。

   6. 页面上的JS尽量异步加载(具体情况具体分析)。

   7. 减少Cookie的大小，使用无cookie的域，客户端请求静态文件的时候，减少 Cookie 的反复传输对主域名的影响；（比如图片 CSS 等，Yahoo! 的静态文件都在 yimg.com

上，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名 (yahoo.com) 的影响。）

   8. 页面有延迟加载技术。(只加载第一屏，后续加载等滚动条滚动那时候 进行加载或者tab切换，轮播等只加载第一屏)。