前端性能优化
缓存处理
准备资源包
<link href="/js/index.ec325bab.js" rel="preload" as="script" />
rel="preload" 预加载 不执行，要执行要重新加载
<link rel="prefetch"> 已经被许多浏览器支持了相当长的时间，但它是意图预获取一些资源，以备下一个导航/页面使用（比如，当你去到下一个页面时）。这很好，但对当前的页面并没有什么助益。此外，浏览器会给使用prefetch的资源一个相对较低的优先级——与使用preload的资源相比。毕竟，当前的页面比下一个页面相对更加重要
as rel="preload"设置后使用
<link href="/js/notFindPage.ec325bab.js" rel="prefetch" />
<link href="main.css" rel="stylesheet">
加载
预加载
link ref=preload 预加载 当前页要用
ref =prefetch 下载资源以被下一个导航用，优先级比较低
异步加载
script async defer延迟加载
有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行，但是标记为 async 的脚本并不保证按照指定它们的先后顺序执行，也就是说后面的js脚本可能先于之前的Js脚本执行
加载完成后立即执行 ，在window.onload之前执行 DOMContentLoaded不一定能够监控到
有了defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded事件触发执行之前
在文档解析完成之后执行
按需加载
少加载，多用缓存
缓存的使用
服务器对缓存进行控制 让代码更新要立即生效，没有变更要应用缓存 etag if-modify-since从上次请求后是否有修改 文件修改时间进行对比
service work 离线缓存
公共资源包 ，变更少的包 进行缓存
1.第三方资源缓存 变动少 缓存价值大
2公共模块提取缓存
3异步公共模块提取缓存
4.运行时缓存
contenthash css文件hash使用contenthash，这样不受js模块变化影响
chunkhash
[chunkhash]，使得文件只随着内容变化，不随着编译变化
[hash]是每次编译都变化一次
contenthash css变化 js模块会变化
hash [范围最大] 是针对整个项目的,如果把整个项目当做是一个文件(为什么非要是单个的1.txt就这么好理解成是文件了?),那么这个项目文件的内容发生改变(文件删除添加,文件内容修改),都会导致整个项目的hash值发生改变.
chunkhash [范围其次] 是根据当前入口文件最终打包出来的js文件.output. 当前依赖链中,有任意文件变动,都会改变这个hash值.
而contenthash [范围最小] 就仅仅只是针对当前文件的内容.
关于缓存 就是代码更新后 没有立即生效的问题
注意缓存的读取和设置是否同步
js解析
先读后写
属性短链接
weakMap 弱引用 是指不能确保其引用的对象不会被垃圾回收器回收的引用
weakSet 避免内存泄漏
使用场景 储存 DOM 节点 私有成员变量 监听事件
css解析
从右到左解析
渲染
减少回流的操作 reflow,布局属性变化会导致回流
打包速度优化
cdn
noParse 第三方组件
排除 node_modles 文件夹下的内容
删除多余的npm包
