本文提供了一套全面的网页性能优化方案，包括压缩响应内容、合理设置缓存时间、减少不必要的资源加载、优化文件加载顺序等内容，并针对JavaScript提出了具体的优化建议。
返回包是否进行gzip压缩？
使用[size=x-small;]httwatch[/size]抓包，看返回包的里面的content-Encoding字段（gzip）
是否进行了合适的缓存处理？
使用httwatch抓包，看返回包的里面的Expires或者Cache-Control字段：
这里还要关注过期时间是否设置合理（比如logo图片等长期不变的内容，我们可以做长cache，其它的可以根据业务需要设置不同的缓存时间）
js是否做了初级混淆？
使用httwatch抓包，查看content内容（空行或空格等）
http返回码检查
查看是否存在 404、50*、abort请求；另外302的跳转请求也需要检查是否确实有跳转的需要
图片大小检查
是否有超过200K的图片（一些特殊的广告图片除外）
文件访问顺序是否合理？
css加载靠前，js加载靠后，统计类需求放最后面
页面是否进行分屏加载
清空缓存，打开httpwatch，访问测试页面，待页面加载完毕后，清空httpwatch抓取的记录，然后滚动拖动滚动条访问非页面非首屏能展示的内容，如果能看到httpwatch能抓到内容，正确页面做了分屏加载，如果没有抓到内容，说明该页面没有做分屏加载。
文件是否会被重复加载？
同一个请求在一个页面出现多次
多个小图片是否合并成整图
同一类的图片是否分散加载，而不是整图的形式
静态内容和动态内容是否有考虑分域名部署
动静域名分离，主要是静态页面（图片、html等）和数据类请求域名是否分开
图片格式检查
普通图片尽量使用png格式
不要缩放固定的图像大小
查看源文件、通过IE developer或者firebug工具查看(图片的实际大小和页面展示的大小不一致）
是否应用了不需要文件（如js、图片等）
是否加载了一些多余的文件（比如有些页面就没有调用某个js，但访问这个页面的时候加载了）
js、css文件适当合并
多个比较小的js、css可以合并
样式引用是否使用代替@import导入
不能使用@import导入css
1、 是否符合拍拍js代码框架
2、 是否录入到前端代码开发平台
3、 可以组件化的功能是否开发为基础函数录入平台
4、 长字符串的连接是否用数组实现
5、 操作同一个dom对象的时候是否先用变量把对象预存起来。而不是反复获取。
6、 代码中所调用的接口是否已经录入到接口平台中
7、 代码注释是否合格：每个function至少有一行注释、业务初始化代码区是否每行代码一条注释
1、是否存在alert,debugger调试代码； //调试代码
2、是否使用jquery； //尽量减少jquery的使用
3、是否未录入系统； //所有代码逐渐录入系统中
4、是否循环获取length； //采用for（var i=0,len=arr.length;i<len;i++）形式
5、是否循环绑定element； //在父级element绑定操作
6、是否读取scrollTop等； //减少回流和重绘
7、是否未关闭setInterval、setTimeout； //减少cpu消耗
8、字符串拼接是否使用数组； //提高运算性能
9、是否使用window变量； //尽量使用函数的闭包特性，减少全局变量的使用
10、是否使用非系统函数； //所有函数尽量录入系统中，方便维护和管理，严格禁止代码中和系统中各一份差不多的代码
11、loadScript是否未注明回调函数； //loadscript必须注明回调函数
12、switch是否缺少break； //贯穿引发的问题难以定位
13、是否使用“==”； //判断的时候必须清楚变量的可能值，使用”===”替换“==”（来自《javascript语言精粹》的建议）
14、是否使用“++”； //++和—容易引发缓冲区溢出，使用i=i+1来替换（来自《javascript语言精粹》的建议）
15、是否使用eval； //代码难以阅读，性能显著降低，尽量减少使用（来自《javascript语言精粹》的建议）
16、是否使用with； //代码难以阅读，性能显著降低，尽量减少使用（来自《javascript语言精粹》的建议）
17、是否使用continue； //会降低性能（来自《javascript语言精粹》的建议）
18、是否缺少块符号； //if(test) a=b；需修改为：if(test){a=b}，单句语法也加上{}，方便阅读
19、是否使用new； //多使用函数闭包特性，减少new的使用（来自《javascript语言精粹》的建议）
20、parseInt是否未定义为10进制； //如果使用parseInt，则必须采用parseInt(num,10)这种形式的，否则当num为“08”这种格式的时候，结果可能不符合预期
使用[size=x-small;]httwatch[/size]抓包，看返回包的里面的content-Encoding字段（gzip）
是否进行了合适的缓存处理？
使用httwatch抓包，看返回包的里面的Expires或者Cache-Control字段：
这里还要关注过期时间是否设置合理（比如logo图片等长期不变的内容，我们可以做长cache，其它的可以根据业务需要设置不同的缓存时间）
js是否做了初级混淆？
使用httwatch抓包，查看content内容（空行或空格等）
http返回码检查
查看是否存在 404、50*、abort请求；另外302的跳转请求也需要检查是否确实有跳转的需要
图片大小检查
是否有超过200K的图片（一些特殊的广告图片除外）
文件访问顺序是否合理？
css加载靠前，js加载靠后，统计类需求放最后面
页面是否进行分屏加载
清空缓存，打开httpwatch，访问测试页面，待页面加载完毕后，清空httpwatch抓取的记录，然后滚动拖动滚动条访问非页面非首屏能展示的内容，如果能看到httpwatch能抓到内容，正确页面做了分屏加载，如果没有抓到内容，说明该页面没有做分屏加载。
文件是否会被重复加载？
同一个请求在一个页面出现多次
多个小图片是否合并成整图
同一类的图片是否分散加载，而不是整图的形式
静态内容和动态内容是否有考虑分域名部署
动静域名分离，主要是静态页面（图片、html等）和数据类请求域名是否分开
图片格式检查
普通图片尽量使用png格式
不要缩放固定的图像大小
查看源文件、通过IE developer或者firebug工具查看(图片的实际大小和页面展示的大小不一致）
是否应用了不需要文件（如js、图片等）
是否加载了一些多余的文件（比如有些页面就没有调用某个js，但访问这个页面的时候加载了）
js、css文件适当合并
多个比较小的js、css可以合并
样式引用是否使用代替@import导入
不能使用@import导入css
1、 是否符合拍拍js代码框架
2、 是否录入到前端代码开发平台
3、 可以组件化的功能是否开发为基础函数录入平台
4、 长字符串的连接是否用数组实现
5、 操作同一个dom对象的时候是否先用变量把对象预存起来。而不是反复获取。
6、 代码中所调用的接口是否已经录入到接口平台中
7、 代码注释是否合格：每个function至少有一行注释、业务初始化代码区是否每行代码一条注释
1、是否存在alert,debugger调试代码； //调试代码
2、是否使用jquery； //尽量减少jquery的使用
3、是否未录入系统； //所有代码逐渐录入系统中
4、是否循环获取length； //采用for（var i=0,len=arr.length;i<len;i++）形式
5、是否循环绑定element； //在父级element绑定操作
6、是否读取scrollTop等； //减少回流和重绘
7、是否未关闭setInterval、setTimeout； //减少cpu消耗
8、字符串拼接是否使用数组； //提高运算性能
9、是否使用window变量； //尽量使用函数的闭包特性，减少全局变量的使用
10、是否使用非系统函数； //所有函数尽量录入系统中，方便维护和管理，严格禁止代码中和系统中各一份差不多的代码
11、loadScript是否未注明回调函数； //loadscript必须注明回调函数
12、switch是否缺少break； //贯穿引发的问题难以定位
13、是否使用“==”； //判断的时候必须清楚变量的可能值，使用”===”替换“==”（来自《javascript语言精粹》的建议）
14、是否使用“++”； //++和—容易引发缓冲区溢出，使用i=i+1来替换（来自《javascript语言精粹》的建议）
15、是否使用eval； //代码难以阅读，性能显著降低，尽量减少使用（来自《javascript语言精粹》的建议）
16、是否使用with； //代码难以阅读，性能显著降低，尽量减少使用（来自《javascript语言精粹》的建议）
17、是否使用continue； //会降低性能（来自《javascript语言精粹》的建议）
18、是否缺少块符号； //if(test) a=b；需修改为：if(test){a=b}，单句语法也加上{}，方便阅读
19、是否使用new； //多使用函数闭包特性，减少new的使用（来自《javascript语言精粹》的建议）
20、parseInt是否未定义为10进制； //如果使用parseInt，则必须采用parseInt(num,10)这种形式的，否则当num为“08”这种格式的时候，结果可能不符合预期
扫一扫
2816
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
