前端性能优化
2016-10-30 本文已影响0人
晓梦初醒my
浏览器缓存机制
- 强缓存：浏览器不发送请求到服务器，直接从本地硬盘读取文件（200 from cace）。通过请求头里的exprice 和 cache-contro:img-max实现
- 协商缓存: 浏览器向服务器发送请求，服务器查看文件是否修改了。若未修改，则返回304，浏览器从本地读取缓存文件。
两者区别：协商缓存会和服务器通信，强缓存不与浏览器通信
下面来详细看下两种缓存是如何实现：
强缓存原理：
在请求头里，利用Expires或者Cache-Control，设置过期时间，其实就是一个有效期，表示文件在当前时间内都是有效的。
Expires是http1.0提出的一个表示资源过期时间的header，它描述的是一个绝对时间，由服务器返回，用GMT格式的字符串表示，如：Expires:Thu, 31 Dec 2037 23:55:55 GMT。若当前访问时间，在这个时间段内，则表示有效。
Cache-Control描述的是一个相对时间，max-age表示在xxxs之内，文件有效。在进行缓存命中的时候，都是利用客户端时间进行判断，所以相比较Expires，Cache-Control的缓存管理更有效，安全一些。
高性能网站建设进阶指南之读书笔记
＊ 第一章 ： ajax性能：优化性能，应从性能最大瓶颈处入手，否则效果不佳。很多时候，浏览器的瓶颈都在dom绘制和布局，渲染中，并不在js执行过程。所以，分析性能问题的第一步，就是明确每阶段的耗时。
下面讲一讲几个关键的网页性能指标：
- document response返回时间和dom树构建时间
- css加载完毕时间
- js加载完毕时间
- js执行完毕，用户可操作时间
那么如何获取这几个关键耗时呢？公司内部都有测速系统，想要获取某个点，自己设置下就可以了。不过chrome的network面板上，有记录两个时间点：
- load：dom树构建完毕时间（= DOCUMENT文档返回 + 浏览器解析HTML元素并构建dom树过程 ）
- DOMContentLoaded：浏览器的DOMContentLoaded事件。不会等待CSS文件、图片、iframe加载完成。
备注：$(document).ready()与window.onload的区别
window.onload ： 页面所有元素加载完毕，包括图片，flash，iframe 等
$(document).ready() ： dom树，加载完毕。所以它比window.onload先执行。而jquery内部及监听的DOMContentLoaded事件
RTX截图未命名.png
