Make your web faster

加快网页打开速度
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 Headers
Cache-Control:max-age=600
Expires:Tue, 12 Mar 2013 15:27:06 GMT

客户端缓存
 Last-Mofidied和Etag
Last-Mofidied和ETag都是用来标示资源的有效性
Last-Mofidied的值是个日期，ETag的值是按照规则生成的
字符串
Rquest Headers
If-Modified-Since: Fri, 12 May 2006 18:53:33 GMT
If-None-Match: W/"50b1c1d4f775c61:df3"
Response Headers
Last-Modified: Fri, 12 May 2006 18:53:33 GMT
ETag: "50b1c1d4f775c61:df3"

客户端缓存
http://blog.csdn.net/eroswang/article/details/8302191

客户端缓存
 both HTTP and HTTPS
http和https的资源都可以被缓存
 给所有静态资源设置缓存头
避免不必要重复，Expires和Cache-Control只需二选一，
Last-Mofidied和Etag同理
建议使用Expires& Last-Modified，因为他们更广泛被支持
Expires头的值至少一个月，最好是一年，不要超过一年，因
为这个违反RFC标准
 使用时间戳更新缓存资源
在URL中加入一个get请求参数，如?v=201314

客户端缓存
 为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的资源。

减少往返延时
往返延时(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 Site
http://developer.yahoo.com/performance/rules.html
 Writing Efficient CSS
https://developer.mozilla.org/en-
US/docs/Writing_Efficient_CSS
它山之石可以攻玉

Make your web faster

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (6)

Similaire à Make your web faster

Similaire à Make your web faster (20)

Make your web faster

Notes de l'éditeur