性能优化: web前端性能优化概述 by罗少木

本文作者：罗少木

测试技术：测试开发工程师

编者：AT

备注：原文排版略作调整，文字与层级关系无改动。

正文开始====

前端性能优化方式分：页面级、代码级

1、页面级性能优化的考虑点：
　　首先、考虑页面数据的来源，是否有来源第三方资源造成性能问题。
　　其次、定位是由于第三方资源还是本地资源导致性能问题。
　　最后、可以以下几种方式进行前端性能优化。
　　1、减少http请求数。
　　　　这是众多前端性能优化比较常用的方式之一，解决方案如下所示：
　　　　1、简化页面：从设计实现层面简化页面。
　　　　　　如百度页面简洁，减少资源的使用是最直接的。
　　　　2、缓存技术：缓存越多内容到客户端越好。主要有以下方式。
　　　　　　1、将很少更新的内容缓存到客户端，
　　　　　　　　然后设置Expires超时时间越长越好。
　　　　　　2、如果有部分内容有可能会被更新，
　　　　　　　　服务器端采用Last_Modified属性来标记该内容最新一次修改时间。
　　　　　　　　下次访问时客户端请求会自动发送If-Modified-Since属性值再次与服务器端的Last_Modified进行匹配。
　　　　　　　　不一样需要重新发送资源到客户端。
　　　　　　　　如果开发只设置了缓存技术且Expires时间过长，会导致用户无法看到最新的页面。
　　　　　　3、多个js文件、CSS文件资源合并与图片进行压缩
　　　　　　4、采用CSS sprite技术。
　　　　　　　　针对图片进行合并，减少每张图片的http请求数及图片变小
　　　　　　5、采用内联图片。
　　　　　　　　将图片以base64编码方式嵌套于页面，减少http请求及图片大小，
　　　　　　　　最大缺点就是浏览器无法缓存，加大网页体积
　　　　　　6、lazyloadimage图片延迟加载，
　　　　　　　　只显示当前页面图片，往下滚动时异步加载
　　注：通过httpwatch、fiddler工具检查前端优化后的响应时间
　　2、浏览器请求数上限限制。
　　　　1、同一时间针对统一域名的请求是有限制的，需要进行分批次发请求。
　　　　2、解决浏览器请求数上限的限制，可以采用分布式方式进行资源存放。
　　　　　　比如图片，CSS，js等存放在某一域名的服务器上、静态页面存放于某一域名服务器下。
　　　　　　此时浏览器可以对不同域名服务器同时并发请求，提高浏览器并发请求数，同时能够更快响应静态页面。
　　　　　　当然不是越多域名越好，毕竟解析dns也是需要花费时间。
　　3、CSS样式表置放于Body顶部
　　　　（若样式表没有加载完成，可能造成页面不显示或网页内容重新显示)
　　4、将外部脚本文件里放于底部
　　　　（外部脚本文件会阻塞其他请求资源下载）
　　　　注：如果网页采用Jquery技术，jquery技术引人document.ready事件，
　　　　如果导致我们无法将所有的脚本文件引入放到 Body下方。
　　　　但是我们的脚本如果都在document.ready之后执行，
　　　　可以直接放到Body底部，等待网页加载完毕后，再加载js文件
2、代码级性能优化的考虑点（后续添加）