优化策略关键资源个数越多，首次页面加载时间就会越长关键资源的大小，内容越小，下载时间越短优化白屏：内联css和内联js移除文件下载,较小文件体积预渲染，打包时进行预渲染使用SSR加速首屏加载（耗费服务端资源），有利于SEO优化。 首屏利用服务端渲染，后续交互采用客户端渲染什么是Perfomance API衡量和分析各种性能指标对于确保 web 应用的速度非常重要。Performance API 提供了重要的内置指标，并能够将你自己的测量结果添加到浏览器的性能时间线（performance timeline）中。性能时间线使用高精度的时间戳，且可以在开发者工具中显示。你还可以将相关数据发送到用于分析的端点，以根据时间记录性能指标。
关键时间节点
描述
含义
TTFB
time to first byte(首字节时间)
从请求到数据返回第一个字节所消耗时间
TTI
Time to Interactive(可交互时间)
DOM树构建完毕，代表可以绑定事件
DCL
DOMContentLoaded (事件耗时)
当 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发
L
onLoad (事件耗时)
当依赖的资源全部加载完毕之后才会触发
FP
First Paint（首次绘制)
第一个像素点绘制到屏幕的时间
FCP
First Contentful Paint(首次内容绘制)
首次绘制任何文本，图像，非空白节点的时间
FMP
First Meaningful paint(首次有意义绘制)
首次有意义绘制是页面可用性的量度标准
LCP
Largest Contentful Paint(最大内容渲染)
在viewport中最大的页面元素加载的时间
FID
First Input Delay(首次输入延迟)
用户首次和页面交互(单击链接，点击按钮等)到页面响应交互的时间
代码语言：javascript复制
网络优化策略减少HTTP请求数，合并JS、CSS,合理内嵌CSS、JS
合理设置服务端缓存，提高服务器处理速度。 (强制缓存、对比缓存)
代码语言：javascript复制// Expires/Cache-Control Etag/if-none-match/last-modified/if-modified-since
避免重定向，重定向会降低响应速度 (301,302)
使用dns-prefetch,进行DNS预解析
采用域名分片技术，将资源放到不同的域名下。接触同一个域名最多处理6个TCP链接问题。
采用CDN加速加快访问速度。(指派最近、高度可用)
gzip压缩优化 对传输资源进行体积压缩 (html,js,css)
加载数据优先级 : preload（预先请求当前页面需要的资源） prefetch（将来页面中使用的资源） 将数据缓存到HTTP缓存中
代码语言：javascript复制
关键渲染路径重排（回流）Reflow： 添加元素、删除元素、修改大小、移动元素位置、获取位置相关信息重绘 Repaint：页面中元素样式的改变并不影响它在文档流中的位置。我们应当尽可能减少重绘和回流
1.强制同步布局问题JavaScript强制将计算样式和布局操作提前到当前的任务中
代码语言：javascript复制
2.布局抖动（layout thrashing）问题在一段js代码中，反复执行布局操作，就是布局抖动
代码语言：javascript复制function reflow(){
let el = document.getElementById('app');
let node = document.createElement('h1');
node.innerHTML = 'hello';
el.appendChild(node);
// 强制同步布局
console.log(app.offsetHeight);
}
window.addEventListener('load',function(){
for(let i = 0 ; i<100;i++){
reflow();
}
});
3.减少回流和重绘脱离文档流渲染时给图片增加固定宽高尽量使用css3 动画可以使用will-change提取到单独的图层中静态文件优化1.图片优化图片格式：
jpg:适合色彩丰富的照片、banner图；不适合图形文字、图标（纹理边缘有锯齿），不支持透明度png:适合纯色、透明、图标，支持半透明；不适合色彩丰富图片，因为无损存储会导致存储体积大gif:适合动画，可以动的图标；不支持半透明，不适和存储彩色图片webp:适合半透明图片，可以保证图片质量和较小的体积svg格式图片:相比于jpg和jpg它的体积更小,渲染成本过高,适合小且色彩单一的图标;图片优化：
避免空src的图片
减小图片尺寸，节约用户流量
img标签设置alt属性， 提升图片加载失败时的用户体验
原生的loading:lazy 图片懒加载
代码语言：javascript复制
不同环境下，加载不同尺寸和像素的图片
代码语言：javascript复制
对于较大的图片可以考虑采用渐进式图片
采用base64URL减少图片请求
采用雪碧图合并图标图片等
2.HTML优化语义化HTML:代码简洁清晰，利于搜索引擎，便于团队开发提前声明字符编码，让浏览器快速确定如何渲染网页内容减少HTML嵌套关系、减少DOM节点数量删除多余空格、空行、注释、及无用的属性等HTML减少iframes使用 (iframe会阻塞onload事件可以动态加载iframe)避免使用table布局3.CSS优化减少伪类选择器、减少样式层数、减少使用通配符
避免使用CSS表达式，CSS表达式会频繁求值， 当滚动页面，或者移动鼠标时都会重新计算 (IE6,7)
代码语言：javascript复制background-color: expression( (new Date()).getHours()%2 ? "red" : "yellow" );
删除空行、注释、减少无意义的单位、css进行压缩
使用外链css,可以对CSS进行缓存
添加媒体字段，只加载有效的css文件
代码语言：javascript复制
CSS contain属性,将元素进行隔离
减少@import使用，由于@import采用的是串行加载
4.JS优化通过async、defer异步加载文件
减少DOM操作，缓存访问过的元素
操作不直接应用到DOM上，而应用到虚拟DOM上。最后一次性的应用到DOM上。
使用webworker解决程序阻塞问题
IntersectionObserver
代码语言：javascript复制const observer = new IntersectionObserver(function(changes) {
changes.forEach(function(element, index) {
if (element.intersectionRatio > 0) {
observer.unobserve(element.target);
element.target.src = element.target.dataset.src;
}
});
});
function initObserver() {
const listItems = document.querySelectorAll('img');
listItems.forEach(function(item) {
observer.observe(item);
});
}
initObserver();
虚拟滚动 vertual-scroll-list
requestAnimationFrame、requestIdleCallback
尽量避免使用eval, 消耗时间久
使用事件委托，减少事件绑定个数。
尽量使用canvas动画、CSS动画
5.字体优化代码语言：javascript复制 @font-face {
font-family: "Bmy";
src: url("./HelloQuincy.ttf");
font-display: block;
/* block 3s 内不显示, 如果没加载完毕用默认的 */
/* swap 显示老字体 在替换 */
/* fallback 缩短不显示时间， 如果没加载完毕用默认的 ，和block类似*/
/* optional 替换可能用字体 可能不替换*/
}
body {
font-family: "Bmy"
}
`FOUT(Flash Of Unstyled Text)` 等待一段时间，如果没加载完成，先显示默认。加载后再进行切换。
`FOIT(Flash Of Invisible Text)`字体加载完毕后显示，加载超时降级系统字体 （白屏）