加快网页打开速度

Make the Web Faster — laotan

自我介绍

猪八戒前端开发

财付通搬过砖，码过码

擅长页面重构，酷爱自动化

积极热情，直言高调

爱好：美(nv)，乒乓，LOL

http://laotan.net

加速网页渲染漫谈

网页速度是如何影响转化率的http://www.qianduan.net/web-page-speed-affect-conversions.html

Make the Web Faster

目录

缓存的优化

减少往返延时

优化请求数据

优化服务器返回数据

优化浏览器渲染

移动端的优化

Make the Web Faster

客户端缓存

Expires 和 Cache-Control: max-age

Cache-Control: max-age的值是相对于资源首次被访问的时间差，单位是秒

Expires指的是资源过期的绝对日期

如果同时存在，Cache-Control: max-age会覆盖掉Expires

Make the Web Faster-缓存的优化-客户端缓存

Response HeadersCache-Control:max-age=600Expires:Tue, 12 Mar 2013 15:27:06 GMT

客户端缓存

Last-Mofidied和Etag

Last-Mofidied和ETag都是用来标示资源的有效性

Last-Mofidied的值是个日期，ETag的值是按照规则生成的字符串

Make the Web Faster-缓存的优化-客户端缓存

Rquest HeadersIf-Modified-Since: Fri, 12 May 2006 18:53:33 GMTIf-None-Match: W/"50b1c1d4f775c61:df3"Response HeadersLast-Modified: Fri, 12 May 2006 18:53:33 GMTETag: "50b1c1d4f775c61:df3"

客户端缓存

http://blog.csdn.net/eroswang/article/details/8302191

客户端缓存

both HTTP and HTTPShttp和https的资源都可以被缓存

给所有静态资源设置缓存头

避免不必要重复，Expires和Cache-Control只需二选一，Last-Mofidied和Etag同理

建议使用Expires& Last-Modified，因为他们更广泛被支持

Expires头的值至少一个月，最好是一年，不要超过一年，因为这个违反RFC标准

使用时间戳更新缓存资源

在URL中加入一个get请求参数，如?v=201314

Make the Web Faster-缓存的优化-客户端缓存

客户端缓存

为IE设置正确的vary头

IE不会缓存，设置了vary头并且其field含有Accept-Encoding和User-Agent之外其他field的资源。

Vary:Accept-Encoding,User-Agent

在Firefox中利用Cache control: public 来使HTTPS的缓存生效

一些版本的Firefox需要在设置了普通缓存头的基础上，设置Cache-Control：public才能缓存HTTPS的资源。

Make the Web Faster-缓存的优化-客户端缓存

减少往返延时

往返延时(RTT)指从发送端发送数据开始，到发送端收到来自接收端的确

认总共经历的时延。不包括数据下载的时间。

浏览器和服务器的第一次通信至少包含3次往返：DNS查询，TCP的连接，

第一个字节的请求和响应

往返延时不受带宽影响，在一些不需要下载太多数据的场景中，往返延

时是影响页面加载的主要因素，如搜索结果

Make the Web Faster-减少往返延时

减少往返延时

减少DNS查找

最小重定向

避免错误的请求

合并JavaScript和CSS

使用CSS sprites

优化样式和脚本的顺序

避免document.write

避免使用CSS的@import

异步加载脚本

多域名并行加载

Make the Web Faster-减少往返延时

减少DNS查找

Make the Web Faster-减少往返延时-减少DNS查找

减少DNS查找

域名尽量不要使用CNAME别名记录

DNS和并行加载的均衡，1<域名数<6

使用二级目录代替二级域名

developer.example.com => www.example.com/developer

页面开始就加载的JS资源建议和页面同域名

Make the Web Faster-减少往返延时-减少DNS查找

减少重定向

减少不必要的重定向

使用服务器端重写而不是重定向

使用服务器端重定向而不是meta或者js跳转

Make the Web Faster-减少往返延时-减少重定向

避免错误的请求

404之类的资源文件浪费页面请求

404资源文件可能阻止页面浏览器渲染后续进程

Make the Web Faster-减少往返延时-避免错误的请求

合并JavaScript和CSS

合并外链js或css资源可以减少请求往返延时

一个页面外链js或者css的最佳资源数是2-3个

正确的处理js和css的加载顺序

一般是发布过程最后才做资源文件合并

Make the Web Faster-减少往返延时-合并JavaScript和CSS

使用CSS sprites

页面同时引用的图片合并在一起

优先使用png或者gif雪碧图

需要缓存的图片才使用雪碧图

雪碧图中的空白越小越好

雪碧图色彩数最好和调色板匹配，不要超过256色

Make the Web Faster-减少往返延时-使用CSS sprites

优化样式和脚本的顺序

Make the Web Faster-减少往返延时-优化样式和脚本的顺序

加载顺序A 加载顺序B

外链js尽可能放在CSS后面

内联js尽可能的放在外链资源后面

避免document.write

Document.write会严重影响后续下载和渲染进程

直接在html标签输出，避免write

JS异步加载外链资源

Make the Web Faster-减少往返延时-避免document.write

避免使用CSS的@import

@import无法有效利用浏览器的并发数

@import的资源需要等页面加载解析完后才会加载

Make the Web Faster-减少往返延时-避免使用CSS的@import

异步加载脚本

异步加载指浏览器在下载执行 js 同时，还会继续进行后续页面的处理

Make the Web Faster-减少往返延时-异步加载脚本

<script>var node = document.createElement('script');node.type = 'text/javascript';node.async = true;node.src = 'example.js';// Now insert the node into the DOM, perhaps using insertBefore()</script>

多域名并行加载

给每个域名均衡的分配资源负荷因为部分浏览器不支持js并行加载，不要考虑为js分配并行域名

结合减少dns查找时间，最佳域名个数为2-5

避免外链js阻塞其他资源的加载

Make the Web Faster-减少往返延时-多域名并行加载

优化请求数据

使用服务器端存储减小cookie负载

删除无用或者重复的字段

使用cookie无关的域名来传输静态内容

Make the Web Faster-优化请求数据

优化服务器返回数据

启用gzip

去掉不必要的css

压缩js、css、html

延迟加载js

图像优化

资源的唯一性

Make the Web Faster-优化服务器返回数据

启用gzip

优化html和css的书写顺序，并启用gzip

不要对二进制文件使用gzip

Make the Web Faster-优化服务器返回数据-启用zip

去掉不必要的CSS

删掉不再使用的样式

合理把握css文件的颗粒度，避免页面过度引用

页面非初始加载的样式可以延迟加载

Make the Web Faster-优化服务器返回数据-启用压缩

压缩js、css、html

Minify指减少无意义的空格、断行、缩进占用的字节

建议压缩大于4kb的js、css

Html主要指页面内嵌的js和css

Make the Web Faster-优化服务器返回数据-压缩js、css、html

延迟加载

延迟加载并不一定减少总下载数据，但可以提升初始加载的体验

Make the Web Faster-优化服务器返回数据-延迟加载

<script>function downloadJSAtOnload() {var element = document.createElement("script");element.src = "deferredfunctions.js";document.body.appendChild(element);}

if (window.addEventListener)window.addEventListener("load", downloadJSAtOnload, false);else if (window.attachEvent)window.attachEvent("onload", downloadJSAtOnload);else window.onload = downloadJSAtOnload;

</script>

图片优化

选择合适的图像格式

对图片进行压缩

不同页面同一张图提供不同尺寸，同一页面提供唯一

尺寸

Make the Web Faster-优化服务器返回数据-图片优化

资源的唯一性

同一资源使用唯一的url，主要避免

不同时间戳

http和https

同一张图，不同域名

Make the Web Faster-优化服务器返回数据-资源的唯一性

优化浏览器渲染

使用高效的CSS选择器

避免CSS表达式和滤镜

CSS置于页面头部

指定图片大小

指定字符集

Make the Web Faster-优化浏览器渲染

使用高效的CSS选择器

除了顶级，避免使用通用选择器（*）

使用具体的样式

去除多余的限制查询

用样式名代替后代标签选择器，避免过渡嵌套

IE下，非链接元素不要使用hover伪类

Make the Web Faster-优化浏览器渲染-使用高效的CSS选择器

避免CSS表达式和滤镜

使用标准的CSS属性

用js代替表达式

用图片代替滤镜效果

Make the Web Faster-优化浏览器渲染-避免CSS表达式和滤镜

CSS置于页面头部

浏览器会等样式下载完成再渲染页面

外链和内联样式都放head里面

Make the Web Faster-优化浏览器渲染-CSS置于页面头部

指定图片大小

尽量给图片指定实际展示的大小

通过设置img标签属性或者CSS属性，抑或设置图片

块级父元素均可，内联或者非直接父级无效

Make the Web Faster-优化浏览器渲染-指定图片大小

指定字符集

总是指定字符集

指定正确的字符集

Make the Web Faster-优化浏览器渲染-指定字符集

移动端优化

http://www.smashingmagazine.com/2013/04/03/

build-fast-loading-mobile-website/

http://mobile.51cto.com/web-410291.htm

Make the Web Faster-移动端优化

番外篇-工具

猪八戒改版前后加载速度

改版前

http://alibench.com/rp/6984ad80bb254525bbd25afbc5c27e54

改版后

http://alibench.com/rp/3510c66a16de803c656474ae72b65900

验证和测试

参考文献 Make the web faster

https://developers.google.com/speed/docs/best-practices/rtt?hl=fr

浏览器支持一览http://www.browserscope.org/?category=network&v=top

异步加载http://www.cnblogs.com/tiwlin/archive/2011/12/26/2302554.html

Best Practices for Speeding Up Your Web Sitehttp://developer.yahoo.com/performance/rules.html

Writing Efficient CSShttps://developer.mozilla.org/en-US/docs/Writing_Efficient_CSS

它山之石可以攻玉

Thanks & QA