前端性能优化

缓存处理

准备资源包

<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包