【web前台优化】web前台性能优化-checklist

上一篇 / 下一篇  2011-08-25 18:42:58 / 个人分类：web前台优化

查看( 1666 ) / 评论( 0 ) / 评分( 0 / 0 )
测试类型测试点测试说明
js文件代码量少的js脚本置于页面底部，或者合并成一个js文件js脚本置于页面底部不会阻塞页面加载
javascript压缩、代码混淆、减少javascript代码量、如注释、空行等抓包查看javascript文件是压缩的文件形式，注释、空格、回车等字符都去掉
尽量使用外部javascript，外部引用JS文件最好置底script标签引入js文件会对所有浏览器都产生阻塞，串行加载。
Event Delegation（事件代理）应用1、减少Javascript对DOM Tree的遍历，降低客户端内存占用，提升处理性能
2、减少DOM元素外漏性，让代码和document之间的耦合性降低
减少javascript对dom元素的操作对DOM元素的添加、修改（内容）、删除操作会导致浏览器的回流和重绘操作，增加了页面渲染的速度。
css文件css样式放在页面的上方<head>标签之间，使用<link>标签导入css文件，不要使用@import使用import标签在IE浏览器下会引起下载顺序改变，使样式文件下载花费更长，阻碍页面的渲染
css压缩、代码混淆、减少css代码量、如注释、空行等抓包查看css文件是压缩的文件形式，注释、空格、回车等字符都去掉
避免使用CSS滤镜IE的滤镜使用action去执行，比较消耗资源（cpu）
css中尽量不使用expressionexpression就是在CSS里执行javascript，而且是循环触发的，大量使用会造成ie假死
内容减少iframe的使用次数Iframe优点：解决加载缓慢的第三方内容如图标和广告等加载问题、Security sandbox、并行加载脚本；缺点：即使内容为空，加载也需要时间、会阻止页面加载、浏览器兼容支持问题。
避免404错误页面无法找到指定位置的资源
避免301返回码重定向Redirects：客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。
减少dom元素数量建议不超过700个，一个页面的DOM元素越多，Javascript遍历的速度就越慢，前台展示就越慢；
减少DNS查询通过抓包查看dnslookup
分割文件到多域名1、受IE同域名并发请求限制，可以资源分散到多域名下；
2、静态文件和动态执行文件尽可能分域名和分服务器部署，做到对访问速度和服务负载的支撑
3、与dns查询相互矛盾。
页面组件加载检查页面中那些内容是必须首屏显示的需要先加载，部分内容可以通过用户触发的方式再加载（图片滚屏加载）
图片图片类型和压缩处理1、通过抓包查看图片类型，在不影响前台效果表现的情况下，尽量使用png代替gif\jpg；
2、图片大小是否压缩，不要出现超过50K的过大图片（主要集中在banner图片）
多小图片合并，使用css sprites通过抓包查看多张小图是否合并为一张大图，进行分割展示处理
不要在html中缩放图片查看展示图片大小和实际引用图片大小是否一致,缩放图片会让HTML渲染速度变慢，因为大图在加载的过程中是不能获取其高宽的，所以会取到以后再渲染一次
favicon.ico缓存再次请求，通过抓包查看，是否从本地读取
cookie无需cookie的请求，不要带cookie信息，如图片、脚本等静态页面分域名管理，尽量实现和支持无cookie的HTTP请求，提高访问速度
减少cookie的内容1、使cookie体积尽量小以减少对用户响应的影响，尽量控制单个Cookie 的大小不要超过4K，否则页面打开速度将会非常的慢；
2、注意在适应级别的域名（domain）上设置cookie以便使子域名不受影响 
设置合理过期时间较早地Expire时间和不要过早去清除cookie，都会改善用户的响应时间 
cachejs\css\html\cgi\图片等文件缓存一般用cache策略中的max-age和Last-Modified（If-Modified-Since）的组合，慎用etag
尽量减少304返回码根据业务需要合理设置动静态文件的缓存时间（Cache-Control:max-age=NNN），减少304返回值

收藏 举报

TAG: checklist 性能优化 web前台

 

评分：0

我来说两句

Open Toolbar