【web前台优化】web前台性能优化-checklist
上一篇 /
下一篇 2011-08-25 18:42:58
/ 个人分类:web前台优化
测试类型 | 测试点 | 测试说明 |
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中尽量不使用expression | expression就是在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,都会改善用户的响应时间 |
cache | js\css\html\cgi\图片等文件缓存 | 一般用cache策略中的max-age和Last-Modified(If-Modified-Since)的组合,慎用etag |
尽量减少304返回码 | 根据业务需要合理设置动静态文件的缓存时间(Cache-Control:max-age=NNN),减少304返回值 |
收藏
举报
TAG:
checklist
性能优化
web前台