网站性能优化

网站性能优化

                     laiqun@msn.cn

 

1.  缓存

1. 条件GET—默认自带
   • →If-modified-since:wed,22,2006,4:15pm
   • ←Last-modified:
2. Expires:wed,22,2006,4:15pm—须要设置
   • 缺点：要求服务器与客户端的时钟严格同步，过时后发送新的过来
3. Expires改进 cache-control:max-age —须要设置
   • 要求：HTTP1.1
   • 改进：再也不像Expires那样须要时钟同步，只需在max-age中设置好倒计时。
   • 使Expires像cache-control:max-age可使用Apache的mod_expires插件。
4. ETag 设置为禁止—须要设置
   • 服务器惟一标识在分布式集群服务器下很难命中缓存

代理缓存

• 缓存响应的各个版本，例若有压缩的，无压缩的 Vary:Accept-Encoding,useragent
• 禁用缓存 Vary:* 或者 Cache-control:Private

问题：

• 缓存以后，你更新了那个文件，而这时候客户端还会使用缓存的旧文件。怎么处理这种状况？

  答:在书写html的时候，在上面加上版本号，服务器更新文件后，更新html中引用文件的版本号，这样客户端的缓存就没法命中了，强制从服务器下载更新后的文件。

2. 其它优化

1. 减小HTTP请求：使用图像拼合技术、文件合并
2. 使用CDN：自动寻找最佳网络线路，加快请求响应速度
3. css放在head里：能够防止FOUC(无样式内容闪烁)
   • 原理：浏览器用DOM树和样式表进行渲染(rending)，样式表放在底部，会引发从新渲染
4. script放在底部：防止阻塞并行下载
   • 原理：javascript肯能使用document.write来生成页面，例如两个js中都用了document.write()并行下载并执行的时候会产生冲突。
   • 备选方法1—分次下载:设置cookie后，等第二次再下载
   • 备选方法2—ajax注入下载
5. 不使用CSS表达式
   • 原理：css 表达式的计算过于频繁，每次鼠标移动都会产生成千上万的表达式计算
6. 使用外部的css和javascript
   • 原理：使他们能够被缓存
7. 用去空白、混淆来精简javascript
   • 压缩：去掉空格、tab缩进等无心义的字符 要求：javascript书写式不能省略";"，不然会出现语法错误
   • 混淆：用长单词代替短单词，这样文件的体积会减少，且很是不利于阅读，好处是能够防止别人破解你的代码
8. 去重javascript
   • 若是是多人协做开发的话，极可能一个库引用了两份
9. 使用gzip来压缩传输
10. 避免重定向
    • 跟踪技术—知道用户离开你的网站以后去了哪里
    • 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>
11. 避免过分DNS查找

3. 进阶

1. 线程长时间运行致使的界面响应卡顿
   • 使用Work线程或者Gear插件来实现多线程
   • 使用定时器，有间断的执行脚本或者挂起脚本
2. 脚本分为初始化和非初始化两部分，非初始化部分能够延迟加载
   • script标签的defer属性
3. 无阻塞脚本
   • ajax(XHR) 注入下载 eval 或者修改script标签的src属性
4. 脚本合并
   • 这样能够减小HTTP请求数目
5. javascript的执行效率
   • 二分查找
   • 避免使用字符串+运算，使用字符串数组后join的方法
   • 使用事件委托:利用事件冒泡机制，减小重复代码
6. 图像优化
   • 压缩 裁剪 下降分辨率

4. 参考书籍

1. 《高性能网站建设指南》—Steve Souders      俗称:狗书
2. 《高性能网站建设进阶指南》—Steve Souders  俗称：鹿书

5. 工具

YSlow 图片滚动加载、渐进渲染

chrome profle  timeline 

使用字体图标和CSS--不过度依赖图片

来自为知笔记(Wiz)