本书是Oreilly旗下的关于Web开发相关的技术类的书籍
其中的详情可以在这里看到:高性能网站建设指南
其中本书将Web开发中的14条准则详细地说明了,Web开发中的性能提升!
无论是小白还是具有丰富的开发经验的Web工程师都是有必要去读一下这本书的:
其中本书介绍到的重要的准则:
-
减少HTTP请求
-
使用内容分发网络(CDN Content delivery NetWork)
-
添加Expires头
-
压缩组件
-
将样式表放到顶部
-
将脚本放入到底部
-
避免CSS表达式
-
使用外部的JavaScript和对应的CSS
-
减少DNS查找
-
精简JavaScript
-
避免重定向
-
移出重复脚本
-
配置ETag
-
使用Ajax可缓存
在列出对应的14条优化准则之后呢,对本书的一些内容进行列举:
01|前端性能的重要性:
- 前端Web页面性能
- 时间花在哪儿啦?
- 性能黄金法则
02|HTTP概述
- 压缩
- 条件GET请求
- Expires
- Keep-Alive
- 更多信息
03|规则1-减少HTTP请求
- 图片地图
- CSS Sprites
- 内联图片
- 合并脚本和样式表
- 小结
04|规则2-使用内容分发网络
- 内容分发网络
- 节省
05|规则3-添加Expires头
- Expires头
- Max-Age和mod_expires
- 空缓存VS完整缓存
- 不仅仅是图片
- 修订文件名
- 示例
06|规则4-压缩组件
- 压缩是如何工作的
- 压缩什么
- 节省
- 配置
- 代理缓存
- 边缘情形
- 压缩的实际情况
07|规则5-将样式表放在顶部
- 逐步呈现
- sleep.cgi
- 白屏
- 无样式内容的闪烁
- 前端工程师应该做什么?
08|规则6-将脚本放到底部
- 脚本带来的问题
- 并行下载
- 脚本阻塞下载
- 最差情况:将脚本放在顶部
- 最佳情况:将脚本放在底部
- 正确的放置
09|规则7-避免CSS表达式
- 更新表达式
- 围绕问题展开工作
- 小结
10|规则8-使用外部JavaScript和CSS
- 内联VS外置
- 典型的对比结果
- 主页
- 两全其美
11|规则9-减少DNS查找
- DNS缓存和TTL
- 浏览器的视角
- 减少的DNS查找
12|规则10-精简JavaScript
- 精简
- 混淆
- 节省
- 示例
- 锦上添花
13|规则11-避免重定向
- 重定向的类型
- 重定向是如何损伤性能的
- 重定向之外的其他选择
14|规则12-删除重复脚本
- 重复脚本-确有其事
- 重复脚本损伤性能
- 避免重复脚本
15|规则13-配置Etag
- Etag是什么?
- Etag带来的问题
- Etag-用还是不用
- 现实世界中的Etag
规则14-使用Ajax可缓存
- Web2.0,DHTML和Ajax
- 异步与即时
- 优化Ajax请求
- 现实世界中的Ajax缓存
16|规则15-析构十大网站
- 页面大小,响应时间,YSlow登记
- 如何进行测试
- Amazon
- AOL
- CNN
- eBay
- MSN
- MySpace
- Wikipedia
- Yahoo!
- YouTube
本书是如何组织的
前端性能的重要性
其中揭示了至少有80%的时间花在了显示Web页面上,这个是在HTML文档下载完毕后发生的!
HTTP概述
对HTTP进行了简要概述,强调了与性能相关部分!
减少HTTP请求
其中阐述了为什么额外的HTTP请求会对性能产生巨大的影响,并介绍了减少HTTP请求的方法,包括图片地图,CSS Sprites,使用data:模式的URL关联图片,以及合并脚本和样式表!
使用内容分发网络
强调了使用CDN的优势!
添加Expiress头
研究一个简单的HTTP头是如何通过浏览器缓存来大幅度改善Web页面性能的!
压缩组件
解释了压缩是如何工作的,以及如何为Web服务器启用压缩,并讨论了一些现金还存在的一些兼容性问题!
将样式表放在顶部
样式表是如何影响页面呈现的!
将脚本放在底部
脚本是如何影响呈现的,以及脚本是如何下载到浏览器中的!
避免CSS表达式
CSS表达式的使用和度量其影响的重要性!
使用外部JavaScript和CSS
权衡是内联JavaScript和CSS还是将它们放入到外部文件中!
减少DNS查询
强调了解析域名时的频繁查找所产生的影响!
精简JavaScript
量化了JavaScript中移出空白字符所带来的收益
避免重定向
对使用重定向提出了警示,并给出了可替代的方法
删除重复脚本
如果一个页面中包含了两处相同的脚本会发生什么情况!
配置ETag
介绍了Etag的工作流程,以及为什么对于任何拥有多余一台Web服务器的网站来说,默认的实现都是不好的!
使用Ajax可缓存
强调在使用Ajax时牢记这些性能规则的重要性
析构十大网站
如何确定现实世界中的网站的性能改进给出了一些实例!
网友评论