一说到页面的性能优化,大家可能都会想起雅虎军规
、2-5-8原则
、3秒钟首屏指标
等规则,这些规则在开发过程中不是强制要求的,但是有时候为了追求页面性能的完美和体验,就不得不对原有的代码进行修改和优化。
下面整理出一些常用的性能优化要点,同时再罗列一下雅虎军规
、2-5-8原则
、3秒钟首屏指标
这三个常用规则的要点。
❝ 为了方便记忆和阅读,文章使用部分简写名词,解释如下 ❞
Desktop End Page
Mobile End Page
首屏指标
Loading
进行占位
338kb/s(2.71mb/s)
,首屏资源不应超过1014kb
❝ 「加载优化」 ❞
Android
支持4个,iOS5+
支持6个」)
GZip
link
方式引入,脚本放在尾部并使用异步方式加载
Loading
,资源加载完成后再显示页面,但加载时间过长,会造成用户流失
Loading
srcset
来按需显示(「过度压缩图像大小影响图像显示效果」)
webp
优于jpg
,png8
优于gif
1014kb
、不宽于640px
Cookie
会影响加载速度,静态资源域名不使用Cookie
加载过程是最为耗时的过程,可能会占到总耗时的`80%时间(**优化重点**)
❝ 「执行优化」 ❞
src
会重新加载当前页面,影响速度和效率
DataURL
图像没有使用图像的压缩算法,文件会变大,并且要解码后再渲染,加载慢耗时长
执行处理不当会阻塞页面加载和渲染
❝ 「渲染优化」 ❞
❝ 「样式优化」 ❞
display
会影响页面的渲染
display:inline
后不应该再使用float
、margin
、padding
、width
和height
display:inline-block
后不应该再使用float
display:block
后不应该再使用vertical-align
display:table-*
后不应该再使用float
和margin
float
在渲染时计算量比较大,尽量减少使用
font-size
影响CSS树的效率
0
时不要带单位
Opera
改用blink
内核,-o-
已淘汰
❝ 「脚本优化」 ❞
.length
计算用一个变量保存值
id
选择器选择元素是最快的
tap
(touchstart
和touchend
)代替click
(「注意touch
响应过快,易引发误操作」)
❝ 「雅虎军规」 ❞
雅虎团队通过大量实践总结出以下7类35条
前端优化规则,规则详情请参考这位兄弟的《雅虎前端优化35条规则翻译》。
HTTP
请求数
DNS
查询
AJAX请求
DOM
元素数量
iframe
数量
404
错误
CSS
表达式
<link>
代替@import
JS
和CSS
JS
和CSS
DOM
操作
CSS精灵图
HTML
中缩放图片
favicon
Cookie
大小
Cookie
域名的资源
25kb
CDN
Expires
或Cache-Control
Gzip
资源
ETags
AJAX请求
时使用get