网页性能优化建议

通常,实现网页功能并不难,难在如何用简洁高效的代码实现所需功能,并且有着良好的健壮性、可扩展性、可维护性。从用户角度看,网页打开速度快,各种操作都很流畅,这是很重要的问题(网页性能优化)。

下面简单的罗列一下网页性能优化的几点建议:

1. 减少 http 请求数

​合并图片(css sprites),尽可能地合并 css 和 js 文件。css sprites 是指只用将页面上的背景元素合并成一张图,然后通过调整 css 的 background-position 属性获取对应的背景图。

2. css 文件放在页面头部,js文件放置页面底部

ie,firefox 等浏览器在 css 全部传输完全之前不会去渲染任何的东西。css 的全称是 Cascading Style Sheets(层叠样式表),层叠,顾名思义,后面的样式可以覆盖前面的样式,优先级高的样式可以覆盖优先级低的样式,所以为了避免页面加载过程中重画某些页面元素,导致闪烁和性能问题,浏览器这么做也是合理的。

不带特殊属性的 script 标签。当 html 页面解析到该标签时会停止,然后浏览器立即发出请求去下载该脚本(如果该脚本是外部脚本的话),等到脚本下载完成,马上解析执行该脚本。脚本执行完毕再接着解析 html 文档。如果该脚本中有耗时任务,那么页面视觉上加载就比较慢了。考虑到页面内容和脚本之间的依赖关系,我们并不能做到把所有脚本放置页面底部,所以,还是尽可能地往后放吧。

3. 精简css和js文件,即压缩文件体积

4. 使用 cdn,图片、css、js等静态资源使用 cdn 分发

5. 避免空的 href 和 src 等属性值为空

当 link 标签的 href 属性为空、script 标签的 src 属性为空的时候,浏览器渲染的时候会把当前页面的 URL 作为它们的属性值,从而把页面的内容加载进来作为它们的值。

6. 合理利用缓存(Expires 或者 Cache-Control)

前提是 css 和 js 写在外部文件中。例如,用 Exipres 是用来设置 css、js、图片资源文件的过期时间,可以使这些内容在指定时间内具有缓存性,这样下回再访问同样的资源时就通过浏览器缓存区读取,不需要再发出 http 请求(用户强制刷新页面除外)。不过哪些文件应该缓存,哪些文件应该实时更新给用户还是应该斟酌一下。

7. 避免 404,减少 dns 查询时间(减少资源域名数量)

比如外链的 css、js 文件出现问题返回 404 时,会破坏浏览器的并行加载。一次 dns 解析过程会消耗一定的时间,在 dns 查询结束之前,浏览器不会下载该域名下的任何东西。所以减少 dns 查询的时间可以加快页面的加载速度,也就是减少页面包含的资源域名数量。

8. 避免重定向

每增加一次重定向就会增加一次 web 请求,应该尽量减少。比如当 URL 本该有斜杠(/)却被忽略掉时。例如,当我们要访问 http://baidu.com 时,实际上返回的是一个包含 307 临时重定向的跳转,它指向的是 http://baidu.com/

比如 css、js、图片等,客户端请求静态文件的时候,减少了 cookie 的反复传输对主域名的影响。

10. js 尽量使用“异步加载”,非首屏模块使用“惰性加载”

首屏一定要快!能不加载的先不加载,能不执行的先不执行!

参考:
[1] http://developer.51cto.com/art/201207/347525_all.htm
[2] http://div.io/topic/371

views