Web前端性能优化

一、Web前端优化最佳实践之 内容 篇

1. 尽量减少HTTP请求；

合并文件，比如把多个css文件合成一个；
CSS Sprites 利用CSS background 相关元素进行背景图绝对定位；
图像地图 （在一个图像上划分不同区域映射不同的链接）；
内联图像（使用data：URL scheme 在实际的页面嵌入图像数据）；

2. 减少DNS查找：

DNS查询完成之前浏览器不能从这个主机下载任何任何文件。
方法：DNS缓存、将资源分布到恰当数量的主机名，平衡 并行下载和 DNS查询 ;

3. 避免重定向：多余的中间访问 （不是绝对的避免，尽量减少）

定义：重定向用于将用户从一个url重新路由到另一个url;
损伤：重定向的延迟也很严重，因为它延迟了整个html文档的传输，在html文档到达之前，页面中不会呈现出任何东西，也没有任何组件会被下载，在用户与html文档之间插入重定向延迟了页面中的所有东西;

4. 使Ajax可缓存

Ajax页面缓存是ajax处理数据时对一些重复相同数据进行一个缓存操作，这种设计使客户端对一些静态页面内容的请求，比如图片，css文件，js脚本等，变得更加快捷，提高了页面的响应速度，也节省了网络通信资源;

5. 非必须组件延迟加载 ，未来所需组件预加载 （异步）;

6.减少DOM元素数量 ;

7. 切分组件到多个域；

主要的目的是提高页面组件并行下载能力，但不要跨太多域；

8. 最小化iframe的数量

iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。 但我们需要慎重的使用iframe。iframe的创建比其它包括script和css的 DOM 元素的创建慢了 1-2 个数量级；
　　 使用 iframe 的页面一般不会包含太多 iframe，所以创建 DOM 节点所花费的时间不会占很大的比重。但带来一些其它的问题：onload 事件以及连接池(connection pool)。
** Iframes 阻塞页面加载**
　　及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览 器的 “忙” 指示器停止，告诉用户当前网页已经加载完毕。当 onload 事件 加载延迟后，它给用户的感觉就是这个网页非常慢。
　　window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的src 可以避免这种阻塞情况。

9. 杜绝http 404错误；

二. Web前端优化最佳实践之 Server篇

• 使用CDN ；
  内容分发网络（CDN）业务是指利用分布在不同区域的节点服务器群组成流量分配管理网络平台，为用户提供内容的分散存储和高速缓存，并根据网络动态流量和负载状况，将内容分发到快速、稳定的缓存服务器上，提高用户内容的访问响应速度和服务的可用性服务。

• 添加Expires或者Cache-Control信息头 ；
• Gzip压缩内容；

能有效减轻网络流量的压力；

• 配置ETags（Entity Tag 实体标签）；

属于HTTP协议的一部分，也就是所有的web服务器都应该（也确实能）支持这个特性。它的作用是用一个特殊的字符串来标识某个资源的“版本”，客户端（浏览器）来请求的时候，可以比较，如果ETag一致，则表示该资源并没有修改过，客户端（浏览器）可以使用自己缓存的版本；

• 尽早刷新Buffer；
• Ajax请求使用GET方法 ；

XMLHttpRequest POST要两步，而GET只需要一步（注意：在IE上GET能处理的最大url长度是2k）；
几个需要补充的地方：
1、“当然，ETag对多数站点性能的影响并不是很大”，应该说ETag在正确使用的情况下，会让大量的请求以304头方式响应，可以相当的节省服务器资源和带宽。
2、对于尽早刷新这点，PHP几乎是做不到的，即使执行了flush以及类似的函数，也要等到请求完全执行之后，才会输出给浏览器端。
3、Ajax使用GET和POST各有好处，GET方式可以更快响应，但是可能会有被浏览器缓存的问题，一般都需要加个随机数来避免，POST方式则不会，so，最好是根据自己的情况分别使用GET和POST 方法；

• 避免空src的img标签

三、Web前端优化最佳实践之 Cookie篇

1. 缩小Cookie大小；尽量控制cookie的大小，不要塞入一些无用的信息；
2. 针对Web组件使用域名无关性的Cookie；
   -- 这里说的Web组件，多指静态文件，比如图片、CSS等，客户端请求静态文件的时候，减少了Cookie的反复传输对主域名的影响；

四、Web前端优化最佳实践之 CSS篇

• 把CSS放到代码页上端，浏览器能够有针对性的对HTML页面从上到下进行解析和渲染；
• 避免CSS表达式 ；
• 从页面中剥离JavaScript 与 CSS，能够有针对性的对其进行单独的处理策略，比如压缩或者缓存策略；
• 精简JavaScript 与 CSS （语法能简写的简写）；
• 使用 而不是@import （在IE中@import指令等同于把link标记写在HTML底部）；
• 避免使用Filter ；

五、Web前端优化最佳实践之 JavaScript篇

1. 将脚本放到HTML代码页底部；
2. 外部引入javascript和css；
3. 压缩javascript和css ；
4. 移除重复脚本 ；
5. 减少DOM访问 ；

1、缓存已经访问过的元素；
2、“离线”更新节点，再将它们添加到树中；
3、避免使用JavaScript输出页面布局--应该是CSS的事儿；

6. 合理设计事件监听器 ；

六、Web前端优化最佳实践之 Image 篇

1. 优化图片：根据实际颜色需要选择色深、压缩 ；
2. 优化css精灵 ；
3. 不要在HTML中拉伸图片 ；
4. 保证favicon.ico小并且可缓存 ；

七、Web前端优化最佳实践之 Mobile(iPhone) 篇

• Web前端优化最佳实践最后一部分是针对移动应用的，其实只是针对iPhone的，目前只有两条规则；

• 单个数据对象小于25k（Keep Components under 25k）；
  --- Apple官方信息指出可缓存到内存中的Web数据对象最大支持到10M，但经过测试，发现也就是25k左右；
• Pack Components into a Multipart Document
  --- 将Web页面组件打包成一个多部分组成的文档，其目的是减少HTTP请求。