前端性能优化幻灯片.ppt

前端性能优化 前端性能是什么 优化页面响应 优化内容传输 优化服务器端资源 前端性能优化 既简单又复杂 why P146 P260 前端优化14条准则 Make Fewer HTTP Requests Use a Content Delivery Network Add an Expires Header Gzip Components Put CSS at the Top Move Scripts to the Bottom Avoid CSS Expressions Make JavaScript and CSS External Reduce DNS Lookups Minify JavaScript Avoid Redirects Remove Duplicate Scripts Configure ETags Make Ajax Cacheable 页面请求的流程 提交URL请求 DNS查询 请求发送到服务器 服务器返回页面内容 浏览器页面加载 浏览器页面加载 CSS JS 图片 Html的Render（构建DOM树） 影响浏览器Render的因素 连接数 资源的大小 外站资源 JS的加载执行 我们希望达到的目标？ 以运输为例：A - B 提高传输的速度 减少传输的内容 减少传输的次数 减少在传输过程中的等待阻塞 提高传输的速度 更好的web服务器 更好的带宽 以及：CDN加速 减少传输的内容 缩小JS，CSS的文件大小 缩小图片的大小 以及服务器端：GZIP 减少传输的次数 CSS合并 JS合并 小图片合并(css sprites) 更进一步：已经传输过的内容，不用再次传输 已经传输过的内容，不用再次传输 浏览器缓存 如何设置 什么情况下起作用 缓存后的更新 减少传输过程中的等待阻塞 连接数 不同浏览器的最大连接数 最大连接数的意义 减少加载阻塞 JS是串行执行的 JS在执行时，别的加载是要等待的 我们希望JS的执行在页面加载完再执行 避免：document.write 外部脚本的处理 无法控制 往往没加过期时间（每次都要加载） 出错时，整个页面出错 拖延整个页面的加载 建议： 脚本放到本站点（方便合并，缓存） 在$(document).ready里加载 例子 51yes A4 现有Ajax回调组件的问题 一些最佳实践 CSS在前 JS在末尾 外部网站的JS：如广告，放末尾的末尾 页面内的JS脚本同样放末尾 工具 HttpWatch Google Page Speed Yahoo YSSlow 相关图书与资料 高性能网站建设指南 Even+Faster+Websites Http协议/web/high_performance_web_site.html /cn/news/2009/06/Speed /