前端优化 Yslow-23条规则

  1. 减少HTTP请求次数 合并图片、CSS、JS,改进首次访问用户等待时间。

  2. 使用CDN 就近缓存==>智能路由==>负载均衡==>WSA全站动态加速

  3. 避免空的src和href 当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。测试

  4. 为文件头指定Expires 使内容具有缓存性。避免了接下来的页面访问中不必要的HTTP请求。

  5. 使用gzip压缩内容 压缩任何一个文本类型的响应,包括XML和JSON,都是值得的。

  6. 把CSS放到顶部

  7. 把JS放到底部 防止js加载对之后资源造成阻塞。

  8. 避免使用CSS表达式

  9. 将CSS和JS放到外部文件中 目的是缓存,但有时候为了减少请求,也会直接写到页面里,需根据PV和IP的比例权衡。

  10. 权衡DNS查找次数 减少主机名可以节省响应时间。但同时,需要注意,减少主机会减少页面中并行下载的数量。 IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时,IE 用户的图片下载速度就会受到影响。所以腾讯会搞N个二级域名来放图片。

  11. 精简CSS和JS

  12. 避免跳转 同域:注意避免反斜杠 “/” 的跳转; 跨域:使用Alias或者mod_rewirte建立CNAME(保存域名与域名之间关系的DNS记录)

  13. 删除重复的JS和CSS 重复调用脚本,除了增加额外的HTTP请求外,多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存,它们都存在重复运算JavaScript的问题。

  14. 配置ETags 它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性,例如某个文件在1秒内修改了10次,Etag可以综合Inode(文件的索引节点(inode)数),MTime(修改时间)和Size来精准的进行判断,避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用,可取后两个参数。使用ETags减少Web应用带宽和负载

  15. 可缓存的AJAX “异步”并不意味着“即时”:Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。

  16. 使用GET来完成AJAX请求 当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。因此使用GET获取数据时更加有意义。

  17. 减少DOM元素数量 是否存在一个是更贴切的标签可以使用?人生不仅仅是DIV+CSS

  18. 避免404 有些站点把404错误响应页面改为“你是不是要找***”,这虽然改进了用户体验但是同样也会浪费服务器资源(如数据库等)。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先,这种加载会破坏并行加载;其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。

  19. 减少Cookie的大小

  20. 使用无cookie的域 比如图片 CSS 等,Yahoo! 的静态文件都在主域名以外,客户端请求静态文件的时候,减少了 Cookie 的反复传输对主域名的影响。

  21. 不要使用滤镜 png24的在IE6半透明那种东西,别乱使,淡定的切成PNG8+jpg

  22. 不要在HTML中缩放图片

  23. 缩小favicon.ico并缓存

PageSpeed 黄金法则

优化关键的渲染路径时需要注意什么,以及其中缘由。

  • 1.消除阻塞渲染的 JavaScript 及 CSS

为了尽快达到首次渲染,你想要最小化和(有可能的)消除关键资源的数量,最小化关键字节的下载,以及优化关键路径长度。

  • 2.优化 JavaScript 的使用

JavaScript 资源默认是解析阻塞的,除非标记为异步,或者通过特殊的 JavaScript 片段加载。解析器阻塞 JavaScript 迫使浏览器等待 CSSOM ,暂停 DOM 的构建,大大延迟了首次渲染时间。

  • 3.推荐用异步 JavaScript 资源

异步资源不阻塞文档解析,允许浏览器避开 CSSOM 优先级执行脚本。通常,脚本设置异步,也意味着它不是首次渲染必须的 —— 考虑在初始渲染之后加载异步脚本。

  • 4.延迟解析 JavaScript

任何非必须的脚本(初次渲染时与构建可见内容无关的脚本)都应该被延迟,为了最小化浏览器渲染页面的工作量。

  • 5.避免耗时运行的 JavaScript

长时间运行的 JavaScript 阻塞浏览器构建 DOM,CSSOM,及渲染页面。那么,任何与初次渲染无关的初始化逻辑和功能应该延迟执行。如果很长的初始化序列需要执行,考虑分割成几个阶段,让浏览器可以间隔处理其他的事件。

  • 6.优化 CSS 使用

CSS 是构建渲染树必须的,在页面构建初期 JavaScript 常常会阻塞 CSS 。你应该确保任何不必要的 CSS 标记为非关键资源(例如 print 或者其它的 media queries 媒体查询),关键 CSS 的数量尽可能减少,传输时间尽可能的缩小。

  • 7.把 CSS 放入文档的 head 标签内

所有 CSS 资源应该尽早指定在 HTML 文档中,这样浏览器可以尽早发现 标签,尽早派发 CSS 请求。

  • 8.避免使用 CSS imports

CSS import(@import)从另一个样式表引入样式。这种用法应该避免,因为它会把额外的服务器往返引入关键路径:当带有 @import 的 CSS 样式表被接收和解析完以后,引入的 CSS 资源才会被发现。

  • 9.内嵌阻塞渲染的 CSS

为获得最佳性能,你也许会把关键的 CSS 直接内嵌到 HTML 文档中。这样为关键路径消除了额外的服务器往返,如果做的正确,可用于实现“一次往返”的关键路径长度,其中只有 HTML 是一个阻塞资源。