性能优化1笔记

2018-08-21 本文已影响0人 hha123

exercise 19 ：https://github.com/FE-star/exercise19

重点网站：https://developers.google.cn/web/fundamentals/performance

cdn 请求都是不带cookie的，可以减小http请求头的大小，减少主域的压力

cdn:负载均衡，就近原则

浏览器同一个域下面发出的请求数是有限的（并发请求）

用cdn可以突破浏览器并发请求数的限制

http cache

设置eTag?

cache-control 和 expires区别

expires表示有效期，某某日期之后失效

cache-control ：max-age=xxx秒，就表示多少秒之后失效

expires里面是一个绝对时间，客户端的时候有可能是错的，所以并不能有效的知道什么时候失效，属于http1.0

cache-control是一个相对时间，不用担心客户端时间是错的，属于http1.1

cache-control：private表示只有浏览器能缓存（默认是private）

cache-control:public表示大家都能缓存

ctx.set('connection',close)表示短连接

ctx.set('connection',keep-alive)表示长连接

判断资源有没有更新：Last-Modified和ETag

Last-Modified

ETag就是内容的哈希值，内容变了哈希值就会变

服务端通过ETag来判断是不是要重定向（304），就是是不是要启用服务端的缓存

last-Modified 是精确到秒的，1秒内生成两个的话（改两次）就会出错，所以用eTag更加精确

http://www.cnblogs.com/vajoy/p/5341664.html

chrome 性能测试插件：lighthouse(本地测页面性能),PageSpeed Insights（在线环境测页面性能）

chrome面板中的network里面的timing 可以看http加载，握手时间等

network里面的蓝线和红线，蓝线表示js已经加载完了，红线表示整个dom都加载完（因为有些dom是js动态生成的）

优化加载速度的方式：

1.压缩文件，减少文件大小

2.cdn(理由上面已经做了笔记了)

3.利用缓存

png无损压缩，jpg有损压缩

缓存的安全性

方法之一是校验数据（js文件）有没有被篡改

为什么安全的根本是https,没有https就没办法安全了

如何刷新静态资源？答：1.用时间戳 2.用（文件名）hash值

避免用document.write，因为它会堵塞后面脚本的执行

自己写一个pwa Demo

https://github.com/FE-star/2018.6/issues/18