一、前言

优化对于一个程序来说，可以避免许多不必要的问题和资源浪费，还能够提升用户的体验，接下来我会按照各个方面提出如何优化

二、HTML CSS JS 的优化

1. 关于 HTML 的优化

1.1 CSS文件的引用放在 head 中

根据浏览器的渲染顺序，先是渲染 head 里面的文件，再是 body 中的 HTML 结构，从上到下进行渲染 如果把 CSS 文件的引用放在 body 中，那么可能出现 HTML 解析好转化为DOM树构建好了以后，CSS 文件才刚刚加载完成，这样会导致前端渲染树重新渲染，引发回流

1.2 JS文件的引用放在底部

可以避免阻塞页面的渲染，或者在 < script > 标签中加入defer或者async异步加载 JS文件，defer 是下载完后等待文档解析完成再加载，而 async 则是异步加载，下载完直接执行，二者各有千秋

1.3 尽量少使用 iframe 标签

iframe 会向其他网站发送请求，增加网站的复杂性和加载时间，阻塞渲染

2. 关于 CSS 的优化

2.1 避免使用@import导入CSS文件

当浏览器解析到 @import 语句时，它会暂停当前文档的渲染和下载，直接下载导入的文件，直至文件全部下载并解析完成时，才会继续进行原本文档的渲染，这样会阻塞页面的渲染和加载。
ps :我们都知道 javaScript 是单线程语言，异步操作的出现就是为了解决这个缺陷 应该使用 link 标签，因为 link 标签可以并行加载多个 CSS 文件

2.2 外部引用的文件越少越好

引用外部的文件越多，使用的带宽也就越多，请求的时间越多，可能导致首屏加载的时间过长

2.3 开启CSS硬件加速

当页面的动态部分、交互效果较多时，可以通过设置3D属性的默认值强制该元素启动硬件加速，提高浏览器对页面中复杂或动态变化的元素的渲染速度和性能

transform:tranlate(0,0,0);
// 或者
backface-visibility: hidden;
// 或者
// 由于层叠上下文的特性，将设置该属性的元素进行单独分层，当修改时会单独进行渲染
will-change:transform (会牺牲部分图片画质，提高性能)

2.4 避免 / 减少重绘、重排（回流）的尝试

重绘

顾名思义就是重新绘制页面，当进行某些操作导致 DOM 或其他元素的样式（如：字体颜色、背景颜色等等）发生了改变的时候，就会引发重绘

重排

即常说的 回流 ，顾名思义就是重新排列布局，当进行某些操作使得元素的位置或网页的结构发生改变的时候就会引发重排（回流）

注意：重排（回流）一定会引发重绘，但重绘不一定会引发重排（回流）

3. 关于 JS 的优化

3.1 减少对 DOM 的访问

每一次对 DOM 的访问或修改都需要重新计算布局和渲染页面，频繁地访问和修改 DOM 可能会使浏览器性能下降，导致网页出现卡顿现象，解决方法是应该正确地使用 DOM , 利用变量缓存多次使用的DOM ，减少重复访问，或者使用事件代理(委托)，将监听器放在父元素上面，当子元素触发时会通过事件冒泡传递到父元素

注意：当连续大量修改DOM时（可能会多次引发重绘和重排）应该使用DocumentFragment（文档片段）,它可以先将多次更改存储在fragment中，再一次性的把fragment插入到DOM

// 例如分段加载长列表的数据
const Fragment = document.createDocumentFragment()
for (let i = 0; i < 5; i++) {
  let li = document.createElement('li');
  li.innerText = data[i]
  Fragment .appendChild(li);
}

document.querySelector('ul').appendChild(fragment);

3.2 合理使用防抖和节流

减少不必要的资源浪费

3.3 尽量使用 import 而不是 require

import是ES6的新特性，一般在于代码首行，代码编译时被加载，而 require 在代码运行中加载，import 较于 require 更有利于树摇（Tree-shaking），而且 import 能够进行代码拆分，按需加载

3.4 发送多个 Promise 请求时使用 Promise.all（）

Promise.all 接收多个 Promise 组成的数组作为参数传入，并且返回新的 Promise 实例，传入的 Promise 会进行并行请求，优化请求流程

三、关于 整体网站 的优化方案

使用 CDN

CDN 能够缓存部分静态资源和网络请求到距离用户短的节点上，能够加速网站的访问和响应速度，减少服务器的压力。

压缩代码

使用压缩工具（如：UglifyJS 等）可以消除代码中不必要的空格、换行、注释等等，减少文件大小，以减少网络传输和浏览器解析的时间，提高页面加载速度

减少HTTP请求

可合并多个 CSS 或 JS 文件，或者使用 base64编码将图片放在CSS文件中，减少请求的次数，还有要减少 404、超时的请求，给网站设置小图标

使用懒加载技术(移动端常用)

延迟加载不使用/不可见的图片、组件或路由，利用 JS 滚动监视 DOM 出现在可视窗口时动态加载它们，能够降低首屏加载速度，提高前端性能

将代码进行拆分，在使用时按需加载

图片优化

可以对图片进行压缩、裁剪，或者使用精灵图（雪碧图），尽量不要使用 png 格式的图片，会消耗很大的带宽

尽量强缓存而不是协商缓存

将文件资源存放在浏览器本地缓存可以让浏览器不发起请求的情况下获取该资源

** 以上内容为本人在学习中总结的知识，如有错误欢迎指正，谢谢观看 **