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