![](https://csdnimg.cn/release/download_crawler_static/10409366/bg8.jpg)
避免图片和 iFrame 等的空 Src 。空 Src 会重新加载当前页面,影响速度和效率
尽量避免写在 HTML 标签中写 Style 属性
移动 端性能 优化
尽量使用 css3 动画,开启硬件加速。
适当使用 touch 事件代替 click 事件。
避免使用
css3
渐变阴影效果。
可以用 transform: translateZ(0) 来开启硬件加速。
不滥用 Float 。Float 在渲染时计算量比较大,尽量减少使用
不滥用 Web 字体。 Web 字体需要下载,解析,重绘当前页面,尽量减少使用。
合理使用 requestAnimationFrame 动画代替 setTimeout
CSS中的属性( CSS3 transitions 、CSS3 3D transforms 、 Opacity 、 Canvas 、WebGL 、Video )会触发 GPU
渲染,请合理使用。过渡使用会引发手机过耗电增加
PC端的在移动端同样适用
相关阅读: 如何做到一秒渲染一个移动页面
什么 是Etag ?
当发送一个服务器请求时,浏览器首先会进行缓存过期判断。浏览器根据缓存过期时间判断缓存文件是否过期。
情景一:若没有过期,则不向服务器发送请求,直接使用缓存中的结果,此时我们在浏览器控制台中可以看到 200
OK (from cache) ,此时的情况就是完全使用缓存,浏览器和服务器没有任何交互的。
情景二:若已过期,则向服务器发送请求,此时请求中会带上①中设置的文件修改时间,和
Etag
然后,进行资源更新判断。服务器根据浏览器传过来的文件修改时间,判断自浏览器上一次请求之后,文件是不是
没有被修改过;根据 Etag ,判断文件内容自上一次请求之后,有没有发生变化
情形一:若两种判断的结论都是文件没有被修改过,则服务器就不给浏览器发
index.html
的内容了,直接告诉
它,文件没有被修改过,你用你那边的缓存吧 ——
304 Not Modified
,此时浏览器就会从本地缓存中获取
index.html 的内容。此时的情况叫协议缓存,浏览器和服务器之间有一次请求交互。
情形二:若修改时间和文件内容判断有任意一个没有通过,则服务器会受理此次请求,之后的操作同①
① 只有 get 请求会被缓存, post 请求不会
Expires 和Cache-Control
Expires 要求客户端和服务端的时钟严格同步。 HTTP1.1 引入 Cache ‐ Control 来克服 Expires 头的限制。如果 max-
age 和Expires 同时出现,则 max-age 有更高的优先级。
Cache ‐ Control: no ‐ cache, private, max ‐ age=0
ETag: abcde
Expires: Thu, 15 Apr 2014 20:00:00 GMT
Pragma: private
Last ‐ Modified: $now // RFC1123 format123456789
ETag应用 :