Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Make your web faster

848 views

Published on

what can font-end engineer do for making web faster

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

Make your web faster

  1. 1. 加快网页打开速度 Make the Web Faster — laotan
  2. 2. 自我介绍 猪八戒前端开发 财付通搬过砖,码过码 擅长页面重构,酷爱自动化 积极热情,直言高调 爱好:美(nv),乒乓,LOL http://laotan.net
  3. 3. 加速网页渲染漫谈 网页速度是如何影响转化率的 http://www.qianduan.net/web-page-speed-affect- conversions.html Make the Web Faster
  4. 4. 目录  缓存的优化  减少往返延时  优化请求数据  优化服务器返回数据  优化浏览器渲染  移动端的优化 Make the Web Faster
  5. 5. 客户端缓存  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
  6. 6. 客户端缓存  Last-Mofidied和Etag Last-Mofidied和ETag都是用来标示资源的有效性 Last-Mofidied的值是个日期,ETag的值是按照规则生成的 字符串 Make the Web Faster-缓存的优化-客户端缓存 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"
  7. 7. 客户端缓存 http://blog.csdn.net/eroswang/article/details/8302191
  8. 8. 客户端缓存  both HTTP and HTTPS http和https的资源都可以被缓存  给所有静态资源设置缓存头 避免不必要重复,Expires和Cache-Control只需二选一, Last-Mofidied和Etag同理 建议使用Expires& Last-Modified,因为他们更广泛被支持 Expires头的值至少一个月,最好是一年,不要超过一年,因 为这个违反RFC标准  使用时间戳更新缓存资源 在URL中加入一个get请求参数,如?v=201314 Make the Web Faster-缓存的优化-客户端缓存
  9. 9. 客户端缓存  为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-缓存的优化-客户端缓存
  10. 10. 减少往返延时 往返延时(RTT)指从发送端发送数据开始,到发送端收到来自接收端的确 认总共经历的时延。不包括数据下载的时间。 浏览器和服务器的第一次通信至少包含3次往返:DNS查询,TCP的连接, 第一个字节的请求和响应 往返延时不受带宽影响,在一些不需要下载太多数据的场景中,往返延 时是影响页面加载的主要因素,如搜索结果 Make the Web Faster-减少往返延时
  11. 11. 减少往返延时  减少DNS查找  最小重定向  避免错误的请求  合并JavaScript和CSS  使用CSS sprites  优化样式和脚本的顺序  避免document.write  避免使用CSS的@import  异步加载脚本  多域名并行加载 Make the Web Faster-减少往返延时
  12. 12. 减少DNS查找 Make the Web Faster-减少往返延时-减少DNS查找
  13. 13. 减少DNS查找  域名尽量不要使用CNAME别名记录  DNS和并行加载的均衡,1<域名数<6  使用二级目录代替二级域名 developer.example.com => www.example.com/developer  页面开始就加载的JS资源建议和页面同域名 Make the Web Faster-减少往返延时-减少DNS查找
  14. 14. 减少重定向  减少不必要的重定向  使用服务器端重写而不是重定向  使用服务器端重定向而不是meta或者js跳转 Make the Web Faster-减少往返延时-减少重定向
  15. 15. 避免错误的请求  404之类的资源文件浪费页面请求  404资源文件可能阻止页面浏览器渲染后续进程 Make the Web Faster-减少往返延时-避免错误的请求
  16. 16. 合并JavaScript和CSS  合并外链js或css资源可以减少请求往返延时  一个页面外链js或者css的最佳资源数是2-3个  正确的处理js和css的加载顺序  一般是发布过程最后才做资源文件合并 Make the Web Faster-减少往返延时-合并JavaScript和CSS
  17. 17. 使用CSS sprites  页面同时引用的图片合并在一起  优先使用png或者gif雪碧图  需要缓存的图片才使用雪碧图  雪碧图中的空白越小越好  雪碧图色彩数最好和调色板匹配,不要超过256色 Make the Web Faster-减少往返延时-使用CSS sprites
  18. 18. 优化样式和脚本的顺序 Make the Web Faster-减少往返延时-优化样式和脚本的顺序 加载顺序A 加载顺序B  外链js尽可能放在CSS后面  内联js尽可能的放在外链资源后面
  19. 19. 避免document.write  Document.write会严重影响后续下载和渲染进程  直接在html标签输出,避免write  JS异步加载外链资源 Make the Web Faster-减少往返延时-避免document.write
  20. 20. 避免使用CSS的@import  @import无法有效利用浏览器的并发数  @import的资源需要等页面加载解析完后才会加载 Make the Web Faster-减少往返延时-避免使用CSS的@import
  21. 21. 异步加载脚本  异步加载指浏览器在下载执行 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>
  22. 22. 多域名并行加载  给每个域名均衡的分配资源负荷 因为部分浏览器不支持js并行加载,不要考虑为js分配并行域 名 结合减少dns查找时间,最佳域名个数为2-5  避免外链js阻塞其他资源的加载 Make the Web Faster-减少往返延时-多域名并行加载
  23. 23. 优化请求数据  使用服务器端存储减小cookie负载  删除无用或者重复的字段  使用cookie无关的域名来传输静态内容 Make the Web Faster-优化请求数据
  24. 24. 优化服务器返回数据  启用gzip  去掉不必要的css  压缩js、css、html  延迟加载js  图像优化  资源的唯一性 Make the Web Faster-优化服务器返回数据
  25. 25. 启用gzip  优化html和css的书写顺序,并启用gzip  不要对二进制文件使用gzip Make the Web Faster-优化服务器返回数据-启用zip
  26. 26. 去掉不必要的CSS  删掉不再使用的样式  合理把握css文件的颗粒度,避免页面过度引用  页面非初始加载的样式可以延迟加载 Make the Web Faster-优化服务器返回数据-启用压缩
  27. 27. 压缩js、css、html  Minify指减少无意义的空格、断行、缩进占用的字节  建议压缩大于4kb的js、css  Html主要指页面内嵌的js和css Make the Web Faster-优化服务器返回数据-压缩js、css、html
  28. 28. 延迟加载  延迟加载并不一定减少总下载数据,但可以提升初始 加载的体验 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>
  29. 29. 图片优化  选择合适的图像格式  对图片进行压缩  不同页面同一张图提供不同尺寸,同一页面提供唯一 尺寸 Make the Web Faster-优化服务器返回数据-图片优化
  30. 30. 资源的唯一性  同一资源使用唯一的url,主要避免  不同时间戳  http和https  同一张图,不同域名 Make the Web Faster-优化服务器返回数据-资源的唯一性
  31. 31. 优化浏览器渲染  使用高效的CSS选择器  避免CSS表达式和滤镜  CSS置于页面头部  指定图片大小  指定字符集 Make the Web Faster-优化浏览器渲染
  32. 32. 使用高效的CSS选择器  除了顶级,避免使用通用选择器(*)  使用具体的样式  去除多余的限制查询  用样式名代替后代标签选择器,避免过渡嵌套  IE下,非链接元素不要使用hover伪类 Make the Web Faster-优化浏览器渲染-使用高效的CSS选择器
  33. 33. 避免CSS表达式和滤镜  使用标准的CSS属性  用js代替表达式  用图片代替滤镜效果 Make the Web Faster-优化浏览器渲染-避免CSS表达式和滤镜
  34. 34. CSS置于页面头部  浏览器会等样式下载完成再渲染页面  外链和内联样式都放head里面 Make the Web Faster-优化浏览器渲染-CSS置于页面头部
  35. 35. 指定图片大小  尽量给图片指定实际展示的大小  通过设置img标签属性或者CSS属性,抑或设置图片 块级父元素均可,内联或者非直接父级无效 Make the Web Faster-优化浏览器渲染-指定图片大小
  36. 36. 指定字符集  总是指定字符集  指定正确的字符集 Make the Web Faster-优化浏览器渲染-指定字符集
  37. 37. 移动端优化  http://www.smashingmagazine.com/2013/04/03/ build-fast-loading-mobile-website/  http://mobile.51cto.com/web-410291.htm Make the Web Faster-移动端优化
  38. 38. 番外篇-工具  猪八戒改版前后加载速度  改版前 http://alibench.com/rp/6984ad80bb254525bbd25afbc5c27e54  改版后 http://alibench.com/rp/3510c66a16de803c656474ae72b65900 验证和测试
  39. 39. 参考文献  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 它山之石可以攻玉
  40. 40. Thanks & QA

×