读书笔记_high performance web sites

 

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) );