前端提高篇(135):网络优化一些知识点

网络优化：同域名并发连接限制
1.如何更快请求：

• 域名发散，同时避免不必要的cookie传输，但会需要更多的dns查询——用DNS预解析/预链接（预创建TCP链接）
• http2多路复用
• cdn 资源服务器离用户更近，多个资源服务器，一个中心服务器，更高容错性
• http缓存，适用于重复资源，注意资源更新，新鲜度检测/强缓存/服务器再验证/协商缓存/正常请求
• service worker缓存 控制页面发送请求的次数，用cache storage缓存请求，可离线运行，

2.何时请求：资源声明
资源不仅只有js/css，还有如img，可以用资源提示：preload/prefetch/prerender

• 预加载preload：使用高优先级加载
• 预提取prefetch：在空闲时加载
• 预渲染prerender：在空闲时加载并渲染html

后两个多用于加载接下来可能会用到的内容，比如翻页，但兼容性比较差；
加载的功能不会马上应用，只会缓存下来，所以使用时还是要声明资源；
预加载的内容，如果没有使用，会警告，这是对带宽的浪费

chrome资源优先级：先css再js
1.html、 css、 font、 同步XHR请求
2.preload资源、脚本、异步XHR请求、可见图片
3.异步脚本、图片、音频、视频
4.prefetch资源

异步js脚本加载 async /defer：
将script放在body最后，虽然可以避免dom还没解析，脚本操作就结束的错误，但在总时间上，耗时很长

defer会等dom解析完成之后再执行js
async一边解析dom，一边执行js

async可以用来加载与dom无关的脚本
其余脚本应该都用defer

另：http2服务器推送，本意是减少链接请求，无需声明就推送其他资源，但有了cdn/缓存等机制，浏览器获取资源不一定要直接通过服务器，设置这个功能反而浪费了带宽，且影响下一次链接，也不利于后续维护