让你的网站飞起来
来源:互联网 发布:java打印高为n的金字塔 编辑:程序博客网 时间:2024/04/29 16:16
优化的重要指标
- 页面打开速度(Fully Loaded)
- 网站首页(或列表页)之 First View 的打开速度应在3秒以内或者延迟0.5秒也是尚可的;
- 对 Repeat View 时的各项指标暂不作要求;
- 首屏打开时间(Start Render)
- 网站首页(或列表页)之 First View 的首屏渲染速度在2秒以内是比较优秀的,5秒以内是可以接受的,5秒以上就不可容忍了。用户会选择刷新页面或立刻离开。
- 文档解析完毕时间(Document Complete)
- 对此指标暂不作要求。
指标测试方法参考附录A。
优化提纲
- 遵循常规优化
- 建议外联内联js/css的位置摆放建议
- combo handler的引入图片无损压缩的优化减少 dom elements 的数量引入 textarea/script 元素做延迟解析异步渲染
优化第一阶段:遵循常规优化建议
本阶段所使用工具参考附录B。
常规优化建议
- 关于文件引用
- js 外联文件引用放在 html 文档底部:具体如何摆放内联JS/CSS和外联JS/CSS,请参考 优化第二阶段;
- css 外联文件引用在 html 文档头部:位于 header 内;
- http 静态资源尽量用多个子域名:充分利用现代浏览器的多线程并发下载能力。浏览器的多线程下载能力,参考 附录C;
具体建议 - JS、CSS、CSS背景图片、CSS Sprite图片分散在 a0~a5.jumei.com 下;
- 业务类图片分散在 p0~p3.jumei.com 下;
- 服务器端提供 html 文档和 http 静态资源时,尽量开启 gzip 压缩;
- json/xml 等格式的文本响应,也建议开启 gzip ;
- jepg/png 等图片,可以选择不开启 gzip,因为可能服务器端图片无损压缩算法已经很强悍了,不需要依赖于 gzip;
在 js、css、image 等资源响应的 http headers 里,设置 expires、last-modified;
含义参考 附录D;
郑昀实例示范:
Nginx设置示范:
location ~ .*.(js|css)${
expires 30d;
}
location ~ .*.(gif|jpg|jpeg|png|bmp)${
expires 1M;
}
尽量减少 HTTP Requests 的数量;
通过 combo handler 合并 js 和 css 的下载,参考 优化第三阶段;
本阶段请尽量减少外联 js/css 文件数,尽量减少 ajax 调用;
js/css 的 minify:可统一通过 combo handler 做到压缩加合并;减少不必要的 301/302 跳转:别让页面打开时间浪费在302多次跳转上(每次可能几十毫秒);请大量使用 CSS Sprites:这样做可以大大地减少CSS背景图片的HTTP请求次数;首屏不需要展示的较大尺寸图片,请使用 LazyLoad ;避免404错误:请求一个外联 js 失败时获得的404错误,不但会堵塞并行的下载,而且浏览器会尝试分析404响应的内容,来辨识它是否是有用的Javascript代码;减少 cookies 的大小:尽量减少 cookies 的体积对减少用户获得响应的时间十分重要;
去除不必要的 cookie ;
尽量减少 cookie 的大小;
留心将 cookie 设置在适当的域名下,避免影响到其他网站;
设置适当的过期时间。一个较早的过期时间或者不设置过期时间会更快地删除 cookie,从而减少响应时间。
使用无 cookies 的域:
当浏览其请求一个静态图片并一同发送 cookie 时,服务器并不需要这些 cookies 。这样只是毫无益处地创建了多余的网络流量。应当保证静态资源在请求时没有携带 cookies,所以需要把你的静态资源放在另一个子域名下。
如果你的域名是 www.example.org,你可以将你的静态资源放在 static.example.org 中。如果你把 cookie 设置在顶级域名 example.org 上而不是 www.example.org,那么所有发送至 static.example.org 的请求会包括那些 cookies。在 这种情况下,你可以用一个全新的没有 cookie 的域名来放置你的静态资源。
避免使用 javascript 来定位布局;
优化第二阶段:外联内联js/css的位置摆放建议
玉伯定义的加载和阻塞三定律如下:
定律一:资源是否下载依赖 JS 执行结果——JS 有可能会修改 DOM。典型的,可能会有 document.write。这意味着,在当前 JS 加载和执行完成前,后续所有资源的下载有可能是没必要的。这是 JS 阻塞后续资源下载的根本原因。
定律二:JS 执行依赖 CSS 最新渲染——JS 的执行有可能依赖最新样式。比如,可能会有 var width = $(‘#id’).width(). 这意味着,JS 代码在执行前,浏览器必须保证在此 JS 之前的所有 css(无论外链还是内嵌)都已下载和解析完成。这是 CSS 阻塞后续 JS 执行的根本原因。
定律三:现代浏览器存在 prefetch 优化—— 现代浏览器在竞争中,在 UI update 线程之外,还会开启另一个线程,对后续 JS 和 CSS 提前下载(注意,仅提前下载,并不执行)。有了 prefetch 优化,这意味着,在不存在任何阻塞的情况下,理论上 JS 和 CSS 的下载时机都非常优先,和位置无关。
根据三定律,郑昀认为:
一,如果真的需要把外联js和css放在head里,那也需要从下面这种排序
外联js
外联css
外联js
统一为:
外联css
外联js
外联js
不要script和css交替混编。
原因是,据有人称:『
从Firefox 4+开始,对prefetch的策略有些许调整,调整在于 head 中 css 与 js 的位置。
css 在外联 js 后面时,可能会在 script 后面的 css 加载好之前,提前进行首次渲染。
然后等后面的 css 加载好后,再次更新 Render Tree 并进行渲染,造成页面闪烁现象。
即,各种优化策略,似乎随着浏览器版本不同,头可能发生细微差异。
』
所以郑昀认为,保守做法是,js 和 css 不要在 head 里交替混编,统一为先外联css再外联js!
二,但只有万不得已时,才会在 head 里放外联js,否则请把外联js放置到前。
原因是张克军的《js和css的顺序关系》指出:
只要 head 里出现外联js,无论如何放,css文件都不能和body里的请求并行。body 里 dom 渲染取决于 head 里的js执行完。
外联js放在页面最后,高级浏览器会自动做优化(prefetch),你不用担心,它也可能会提前下载。
优化第三阶段:combo handler 的引入
背景
Combo Handler 是 Yahoo! 开发的一个 Apache 模块,它实现了开发人员简单方便地通过URL来合并JavaScript和CSS文件,从而大大减少文件请求数。
目的
它满足 Yahoo! 前端优化第一条原则:Minimize HTTP Requests,来减少三路握手和HTTP请求的发送次数。
国内实例
淘宝网首页meta里多个js合并的声明:
附录A:页面打开速度和首屏打开时间的测量
推荐工具:
推荐使用 http://www.webpagetest.org/ 评测,由于它受限于并发测试和带宽,所以资源下载速度较差,只能作为与竞争对手对比测试的依据;
Test Location 请选择亚洲的中国江苏节点;
Browser 请选择 Firefox、IE9、Chrome等现代浏览器;
如下图所示:
郑昀
运维部的每周博睿检测数据报告,我们以博睿的数据为准;
博睿从它的各地监测节点以及不同电信链路访问,得到一个响应速度的平均值;
Google PageSpeed https://developers.google.com/speed/pagespeed/insights 的 Critical Path Explorer;
附录B:能提出常规优化建议的工具
推荐工具:
Firefox插件 YSlow! ;Google PageSpeed https://developers.google.com/speed/pagespeed/insights ;
附录C:浏览器多线程下载能力一览
参考怪飞的文章《各浏览器的并行连接数(同域名) 》:
Browser HTTP/1.1 HTTP/1.0
IE 6,7 2 4
IE 8 6 6
Firefox 3+ 6 6
Safari 3+ 4 4
Chrome 3+ 4 4
Chrome 11+ 6 ?
Opera 10+ 4 4
Opera 11+ 16 ?
附录D:expires和last-modified概念
1)Expires
给出的日期/时间后,被响应认为是过时。如Expires: Thu, 02 Apr 2009 05:14:08 GMT
需和Last-Modified结合使用。用于控制请求文件的有效时间,当请求数据在有效期内时客户端浏览器从缓存请求数据而不是服务器端. 当缓存中数据失效或过期,才决定从服务器更新数据。
2)Last-Modified和Expires
Last-Modified标识能够节省一点带宽,但是还是逃不掉发一个HTTP请求出去,而且要和Expires一起用。而Expires标识却使得浏览器干脆连HTTP请求都不用发,比如当用户F5或者点击Refresh按钮的时候就算对于有Expires的URI,一样也会发一个HTTP请求出去,所以,Last-Modified还是要用的,而 且要和Expires一起用。
- 让你的网站飞起来
- 网站优化--让你的网页飞起来
- 网站优化--让你的网页飞起来
- 网站优化--让你的网页飞起来
- 网站优化--让你的网页飞起来
- 让你的N81速度飞起来
- 让你的软件飞起来
- "让你的软件飞起来"心得
- 让你的java程序飞起来
- 让你的任务飞起来,Thread
- 让你的WIN10系统飞起来
- l2cache让你的应用飞起来
- ZendCache:让网站飞起来
- 让你的Linux飞起来的5个妙招
- Ubuntu十大应用程序 让你的电脑飞起来
- Ubuntu十大应用程序 让你的电脑飞起来
- 电脑提速十法!让你的电脑飞起来!
- 让你的软件飞起来:RGB转为YUV
- 感受Vim的强大:进阶技巧
- 【Android 应用开发】Android资源文件 - 使用资源存储字符串 颜色 尺寸 整型 布尔值 数组
- POJ——3468A Simple Problem with Integers(区间更新)
- hdu 5317 RGCDQ 2015 Multi-University Training Contest 3
- C# log4net 不输出日志
- 让你的网站飞起来
- andorid系统启动过程中添加启动脚本
- 在VIM下写C++能有多爽?
- Item 1:将C++视作一系列的语言 Effective C++笔记
- poj 1236 Network of Schools(强连通分量)
- Marvell发布4核A53芯片 基带支持Cat.7 LTE---ESM
- RGB、YUV和YCbCr
- Item 2:避免使用define Effective C++笔记
- Android实现浮层的上下滑动(支持内部添加View)