网站性能优化
网站性能优化
1. 缓存
- 条件GET—默认自带
- →If-modified-since:wed,22,2006,4:15pm
- ←Last-modified:
- Expires:wed,22,2006,4:15pm—需要设置
- 缺点：要求服务器与客户端的时钟严格同步，过期后发送新的过来
- Expires改进 cache-control:max-age —需要设置
- 要求：HTTP1.1
- 改进：不再像Expires那样需要时钟同步，只需在max-age中设置好倒计时。
- 使Expires像cache-control:max-age可以使用Apache的mod_expires插件。
- ETag 设置为禁止—需要设置
- 服务器唯一标识在分布式集群服务器下很难命中缓存
代理缓存
- 缓存响应的各个版本，例如有压缩的，无压缩的 Vary:Accept-Encoding,useragent
- 禁用缓存 Vary:* 或者 Cache-control:Private
问题：
-
缓存之后，你更新了那个文件，而这时候客户端还会使用缓存的旧文件。怎么处理这种情况？
答:在书写html的时候，在上面加上版本号，服务器更新文件后，更新html中引用文件的版本号，这样客户端的缓存就无法命中了，强制从服务器下载更新后的文件。
2. 其它优化
- 减少HTTP请求：使用图像拼合技术、文件合并
- 使用CDN：自动寻找最佳网络线路，加快请求响应速度
- css放在head里：可以防止FOUC(无样式内容闪烁)
- 原理：浏览器用DOM树和样式表进行渲染(rending)，样式表放在底部，会引起重新渲染
- script放在底部：防止阻塞并行下载
- 原理：javascript肯能使用document.write来生成页面，例如两个js中都用了document.write()并行下载并执行的时候会产生冲突。
- 备选方法1—分次下载:设置cookie后，等第二次再下载
- 备选方法2—ajax注入下载
- 不使用CSS表达式
- 原理：css 表达式的计算过于频繁，每次鼠标移动都会产生成千上万的表达式计算
- 使用外部的css和javascript
- 原理：使他们可以被缓存
- 用去空白、混淆来精简javascript
- 压缩：去掉空格、tab缩进等无意义的字符 要求：javascript书写式不能省略";"，否则会出现语法错误
- 混淆：用长单词代替短单词，这样文件的体积会减小，且非常不利于阅读，好处是可以防止别人破解你的代码
- 去重javascript
- 如果是多人协作开发的话，很可能一个库引用了两份
- 使用gzip来压缩传输
- 避免重定向
- 跟踪技术—知道用户离开你的网站之后去了哪里
- url参数 假设我们的网站是www.yahoo.com url为www.yahoo.com/**http%3a//en.wikipedia.org/我们服务器放回一个302重定向，并获取到后面的url地址，就知道用户离开www.yahoo.com之后去了哪里
- 空白的img标签-beacon信标 <a> 单机后触发一个函数 函数中有一个空的get请求，里面有url参数 <a href="www.wiki.com" onClick="result Beacon(this)" >Performance wiki</a><script>var beacon; function resultBeacon(anchor){beacon = new Image(); beacon.src="www.yahoo.com/?"++escape(anchor.href)}</script>
- 避免过度DNS查找
3. 进阶
- 线程长时间运行导致的界面响应卡顿
- 使用Work线程或者Gear插件来实现多线程
- 使用定时器，有间断的执行脚本或者挂起脚本
- 脚本分为初始化和非初始化两部分，非初始化部分可以延迟加载
- script标签的defer属性
- 无阻塞脚本
- ajax(XHR) 注入下载 eval 或者修改script标签的src属性
- 脚本合并
- 这样可以减少HTTP请求数目
- javascript的执行效率
- 二分查找
- 避免使用字符串+运算，使用字符串数组后join的方法
- 使用事件委托:利用事件冒泡机制，减少重复代码
- 图像优化
- 压缩 裁剪 降低分辨率
4. 参考书籍
- 《高性能网站建设指南》—Steve Souders 俗称:狗书
- 《高性能网站建设进阶指南》—Steve Souders 俗称：鹿书
5. 工具
YSlow 图片滚动加载、渐进渲染
chrome profle timeline
使用字体图标和CSS--不过分依赖图片
