性能优化
首页加载优化
打包优化
如何进行网站性能优化
LightHouse
- 优化图片
- 图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
- 优化 CSS（压缩合并 css，如 margin-top, margin-left...)
- 网址后加斜杠（如 www.campr.com/目录，会判断这个目录是什么文件类型，或 者是目录。） cdn 托管
- 标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算 大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体 验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的 空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了）
- 减少 http 请求（合并文件，合并图片）
content方面：
- 减少http请求：合并文件、css精灵图、内联图片base64
- 减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询。
- 当我们使用电脑访问某个网址的时候,需要DNS服务器解析，并且把这个网址的ip临时储存起来，这样你下次访问这个网址的时候就可以直接解析，提高了访问速度，这就是DNS缓存，并且它会为缓存设定一个失效时间 (例如N小时)。
- 避免使用
table，其内容要完全下载后才能显示
Server方面：
- 使用
CDN：内容分发网络（Content Delivery Network，简称CDN）是建立并覆盖在承载网之上，由分布在不同区域的边缘节点服务器群组成的分布式网络。CDN应用广泛，支持多种行业、多种场景内容加速，例如：图片小文件、大文件下载、视音频点播、直播流媒体、全站加速、安全加速。 - 配置
ETag：Etag是 Entity tag的缩写，可以理解为“被请求变量的实体值”，Etag是服务端的一个资源的标识，在 HTTP 响应头中将其传送到客户端。浏览器第一次请求一个资源的时候，服务端给予返回，并且返回了ETag: "50b1c1d4f775c61:df3" 这样的字样给浏览器，当浏览器再次请求这个资源的时候，浏览器会将If-None-Match: W/"50b1c1d4f775c61:df3" 传输给服务端，服务端拿到该ETAG，对比资源是否发生变化，如果资源未发生改变，则返回304HTTP状态码，不返回具体的资源。 - 对组件使用
Gzip压缩：前端如glup、webpack都是自带压缩的，gzip能在此基础上再进行50%的压缩，响应头会包含Content-Encoding: gzip - 添加
Expires：Expires：Thu，15 Apr 2010 20：00：00 GMT; 告诉浏览器缓存有效性持续到2010年4月15日为止，在这个时间之内相同的请求使用缓存，这个时间之外使用http请求。
Cookie方面：
- 减小
cookie大小：如果对某个域(Domain)保存了Cookie，那么针对这个域的所有请求，都会发送这些所有的Cookie（哪怕当前请求根本用不着，例如针对图片的请求），大量地、重复地发送Cookie毫无疑问会增加网络的流量，并因此而降低请求被执行的性能。
css方面：
- 将样式表放到页面顶部
- 少用用css表达式，也称动态属性
left: expression(document.body.offsetWidth - 110 + "px") - 使用
<link>不适用@import<link>是xhtml语法无兼容问题，在页面被加载时同时加载；@import只在IE5以上支持，其引用的css要等到页面加载完再加载；前者的权重更高
javascript方面：
- 将脚本放到页面底部
- 将js和css从外部引入
- 压缩js和css
- 减少DOM访问
- 用变量保存ajax请求结果，避免频繁访问
- 用
innerHTML代替DOM操作，较少DOM操作 - 设置样式时尽量通过类，而不是操作
style - 少用全局变量
- 模块延迟加载
defer或异步加载async
图片方面：
- 优化图片：根据实际颜色需要选择色深、压缩
- 色深即色彩深度，色彩深度是计算机图形学领域表示在位图或者视频帧缓冲区中储存1像素的颜色所用的位数，它也称为位/像素（bpp）。色彩深度越高，可用的颜色就越多
- 优化css精灵图
- 不要再html中拉伸图片
- 图片服务器，图床
- 图片预加载
- 视频可以先用图片代替，需要时在改为
video
前端性能评级工具
- PageSpeed
- YSlow
渲染优化
- 不使用
iframe：原因参考 ： 9iframe的缺点 - 禁止使用
gif图片实现loading效果（降低CPU消耗） - 尽量使用CSS3动画替代js动画
- 小图标base64，但不建议大图使用比较耗费cpu
- 减少http请求
- 避免文件跨域，尤其是小程序
- 修改即使生效
- 页面头部中的
<style>和<script>会阻塞页面，因为Renderer进程中js线程和GUI渲染线程是互斥的
资源优化：图片优化、懒加载、代码拆分、打包优化 网络优化：CDN加速、缓存、HTTP/3协议 首屏优化：SSR、PWA、预渲染、骨架屏 其它优化：SEO、安全性优化（XSS\CSRF）