网页性能优化建议

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

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

加载优化

· 减少 http 请求数

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

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

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

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

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

· 使用 cdn。图片、css、js 等静态资源使用 cdn 分发

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

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

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

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

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

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

另外,确保网站根目录下有 favicon.ico 文件。即使网页中根本不包括这个文件,浏览器每次打开我们的站点也会发起对这个文件的请求。所以,如果这个文件不存在,就会产生 404 错误,消耗资源。

· 避免重定向

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

域名之下如果有 cookie,那么客户端每次向该域名发出 http 请求,都会附上 cookie 的内容,这会影响加载速度,所以静态资源域名不使用 cookie。

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

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

js 代码优化

· 减少重绘和回流

详细内容参见 重绘和回流(repaint & reflow)

· 缓存 dom,缓存 array.length

dom 访问代价挺高的,尽量减少

· 尽量使用事件代理,避免批量绑定事件

逻辑更清晰,性能更优

· 尽量使用 id 选择器

id 选择器速度快

css 代码优化

· 尽量避免写在 html 标签中写 style 属性

这样写维护性差

· 正确使用 display 的属性

display 属性会影响页面的渲染,因此请合理使用
1) display:inline 后不应该再使用 width、height、margin、padding 以及 float
2) display:inline-block 后不应该再使用 float
3) display:block 后不应该再使用 vertical-align
4) display:table-* 后不应该再使用 margin 或者 float

· 不滥用 float

float 在渲染时计算量比较大,尽量减少使用

· 值为 0 时不需要任何单位

为了浏览器的兼容性和性能,值为 0 时不要带单位

参考:
[1] http://developer.51cto.com/art/201207/347525_all.htm
[2] http://div.io/topic/371
[3] https://isux.tencent.com/h5-performance.html

views