80%的时间花费在页面组件上,HTML文档下载一般不超过总时间的20%
性能改进?前端还是后端?
前端的优势:
1.前端针对其80%的时间优化,提升大
2.相比后端,前端花费时间及资源更少,而后端需要面对升级硬件,改进算法会花费更多时间及引起错误的可能性更大
-------------------------------------------------------------------------------------------------
Rule 1: Make Fewer HTTP Requests
CSS Sprits
1.减少HTTP请求
2.减少下载量(合并的图片比总体之和要小,因为减少了色彩索引等信息)
Inline Images
Combined Scripts and Stylesheets
-------------------------------------------------------------------------------------------------
Rule 2: Use a Content Delivery Network(CDN)
分散组件(Image,Stylesheet,Script,Flash...)WEB服务器
-------------------------------------------------------------------------------------------------
Rule 3: Add an Expires Header
可能会引发时钟同步问题
-------------------------------------------------------------------------------------------------
Rule 4: Gzip Components
两种压缩格式:gzip ,deflate
压缩什么?
HTML,CSS,JS,XML,JSON
不压缩:Image,PDF
压缩成本:CPU,客户端解压
The Saving: 数据量减少50%~70%
Proxy Caching:
如果第一个请求支持gzip,而第二个不支持,则后果很严重
解决:Vary Accept-Encoding
-------------------------------------------------------------------------------------------------
Rule 5: Put Stylesheet at the Top
Progressive Rendering
Blank White Screen
Flash of Unstyled Content(无样式内容闪烁)
-------------------------------------------------------------------------------------------------
Rule 6: Put Scripts at the Bottom
原因:Scripts Block Downloads
阻止下载的用意:
1.防止脚本修改页面内容影响布局
2.保证脚本按顺序执行
-------------------------------------------------------------------------------------------------
Rule 7: Avoid CSS Expressions
Updating Expressions
求值频率过高(页面滚动,鼠标移动...),都会计算值
One-Time Expressions
:expression( func(this) );