前端优化14个性能规则分析.ppt

第十二条：避免重定向（ Avoid URL redirects） 解决方法 尽量减少或不使用redirect 第十二条：避免重定向（ Avoid URL redirects） 其他网站的情况 京东：首页无redirect 新蛋：首页无redirect 淘宝：首页无redirect 第十二条：避免重定向（ Avoid URL redirects） 我们采用的方法 首页会根据用户的IP自动选择商家做redirect 第十二条：避免重定向（ Avoid URL redirects） YSLOW评测、还可以改进的地方 Grade A on Avoid URL redirects 第十三条：移除重复的脚本（ Remove duplicate JavaScript and CSS） 分析 重复的脚本会造成不必要的网络资源请求和执行Javascript的时间，但是由于开发团队的增长和代码量的不断增加，就经常会出现一个页面引入多个JS或者CSS文件的情况。 第十三条：移除重复的脚本（ Remove duplicate JavaScript and CSS） 解决方法 在系统中实现脚本管理模块，对一个页面的脚本统一管理。 第十三条：移除重复的脚本（ Remove duplicate JavaScript and CSS） 其他网站的情况 京东：有脚本管理 新蛋：有脚本管理 淘宝：有脚本管理 第十三条：移除重复的脚本（ Remove duplicate JavaScript and CSS） 我们采用的方法 为了避免以前V1容易重复引入脚本的情况，我们有自己的脚本管理模块。 第十三条：移除重复的脚本（ Remove duplicate JavaScript and CSS） YSLOW评测、还可以改进的地方 Grade A on Remove duplicate JavaScript and CSS 第十四条：配置ETag（ Configure entity tags） 分析 默认的ETag不适合集群服务器，所以不适合我们的情况。 ETag的作用类似于Last-Modified，同样是为了验证请求的组件是否可以利用缓存的内容，ETag是在服务器端产生的一串字符，不同的应用服务器产生的规则不同，但是默认情况下，多台同样的服务器也会对同一个文件产生不同的ETag，导致用户在A服务器请求的内容下次到B服务器请求时还会返回200，并产生下载流量。而且ETag和Last-Modified同时存在时，ETag会有更高的优先级，服务器会忽略Last-Modified，返回200. Etag比Last-Modified有优势的地方是，可以更精确的反应文件的变化，比如在1秒中的多次变化。 第十四条：配置ETag（ Configure entity tags） 解决方法 只有在很少的情况下才会考虑使用ETag，大部分情况下Last-Modified可以替代ETag 第十四条：配置ETag（ Configure entity tags） 其他网站的情况 京东：没有使用 新蛋：有使用ETag 淘宝：没有使用 第十四条：配置ETag（ Configure entity tags） 我们采用的方法 没有使用 第十四条：配置ETag（ Configure entity tags） YSLOW评测、还可以改进的地方 Grade A on Configure entity tags (ETags) V2纵览 YSLOW评测、还可以改进的地方 Grade A on Make AJAX cacheable Grade A on Use GET for AJAX requests Grade F on Reduce the number of DOM elements Grade A on Avoid HTTP 404 (Not Found) error Grade A on Reduce cookie size Grade A on Use cookie-free domains Grade A on Avoid AlphaImageLoader filter Grade A on Do not scale images in HTML Grade A on Make favicon small and cacheable The End 谢谢大家！ The End. 第六条：将CSS放到头部（ Put CSS at top） 分析 将CSS放到底部不会减少整个页面的加载时间，但是会影响浏览器渲染页面的顺序，进而影响用户的感觉，用户会发觉白屏的时间很长，页面加载缓慢。 白屏：