浅谈web前端性能优化
代码层面：
防抖和节流（resize，scroll，input）。
减少回流（重排）和重绘。
事件委托。
css 放 ，js 脚本放 最底部。
- 由于用户浏览网页是先看再进行操作，所以先把css加载出来有利于客户的使用体验。
延迟JavaScript
defer属性告诉浏览器在 HTML 解析器解析完文档之后运行脚本，但在事件发生之前，DOMContentLoaded会被触发。
减少 DOM 操作。
按需加载
比如 React 中使用 React.lazy 和 React.Suspense ，通常需要与 webpack 中的 splitChunks 配合。
懒加载
- 又由于客户会先浏览第一屏，所以可以先不加载第二屏和后面的。
预加载
- 在做读书或者用户很可能点击之后的页面时，可以做预加载。
- 顾名思义，就是在用户点击下一页之前，就预先请求下一页。
- 这样用户可以很快看到之后的内容。
- 但这样同时会浪费带宽。有利有弊
构建方面：
压缩代码文件，
在 webpack 中使用 terser-webpack-plugin 压缩 Javascript 代码；使用 css-minimizer-webpack-plugin 压缩 CSS 代码；使用 html-webpack-plugin 压缩 html 代码。
服务器端使用gzip压缩
- g-zip压缩算法，把下载过来的数据先进行压缩
- 后台开启gzip，用户下载压缩包，浏览器自动解压
- 文本文件的压缩率可达80%以上，因此
HTML、CSS、JavaScript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑。
开启 gzip 压缩，webpack 中使用 compression-webpack-plugin ，node 作为服务器也要开启，使用 compression。
常用的第三方库使用 CDN 服务
在 webpack 中我们要配置 externals，将比如 React， Vue 这种包不打倒最终生成的文件中。而是采用 CDN 服务。
其它：
- 使用 http2。因为解析速度快，头部压缩，多路复用，服务器推送静态资源。
- 使用服务端渲染。
- 图片压缩。
- 使用 http 缓存，比如服务端的响应中添加
Cache-Control / Expires。
DNS服务优化
- 当我们输入url访问一个网页后，第一步会进行DNS查询，通过DNS得到IP地址。
- 想让DNS查询更快，可以花钱购买一些更快的DNS服务，但没有必要。
- 一般是配置hosts，自己把ip配置好。DNS就会读取系统hosts文件，查找其中是否有对应的ip。
http 连接复用
- 当查询完了ip后，会给ip发送一个请求
- 这个请求是http请求，本质是tcp连接
- 一般需要请求html,css和js，这三个都需要tcp，所以可以用同一个tcp，这就是连接复用。
- 用Keep-Alive 实现，让第一次发送请求建立的TCP连接不要中断，这样第二次发送请求时可以复用这个连接
SQL优化
- 查询是用sql语句查询数据库，可以通过优化sql查询来减少时间。（打开开发者工具看waiting时间可以判断是前端慢还是后端慢）
提高server带宽
- 拿到数据后会返回数据，下载时间=下载量/下载速度，提高服务器带宽就能加快下载速度（需要花钱购买）
优化CSS
- CSS 是阻塞渲染的，这意味着浏览器必须先下载并处理所有CSS文件，然后才能绘制像素。 通过内联关键的 CSS，可以大大加快此过程。
- 由于有时候CSS会写在JS中，所以这种方法并不可靠。
浏览器端使用缓存
- CSS、JavaScript、Logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次HTTP请求都需要的，如果将这些文件缓存在浏览器中，可以极好地改善性能。(html不缓存)
- 缓存是一种快速提高站点速度的方法。它减少了访问者的页面加载时间。我们可以告诉浏览器在特定的时间缓存文件。
我们可以使用以下 API 进行缓存：
- Cache-Control
- ETag
- Last-Modified
此外还有弱缓存：把md5发给服务器，如果md5一致，就返回304，表示不需要下载，此时没有下载量。
减少Cookie传输
- Cookie包含在每次请求和响应中，太大的Cookie会严重影响数据传输，因此哪些数据需要写入Cookie需要慎重考虑，尽量
减少Cookie中传输的数据量。
使用域名加速
- 用户请求页面时，需要请求多个文件，html、css、js等。
- 假如有1个html，10个css,20个js，那么就需要发送31个请求，如果31个一起发，可以节约时间。
- 但是这样会消耗大量带宽，所以浏览器规定了每个域名同时最多只能10个。
- 这样时间会加长，所以通过加域名的方式。
- a域名专门请求html，b域名请求css，c域名请求js，这样就只需两次请求的时间, 加域名我们一般加的是 cdn域名。
- 加了域名后dns时间也会增加，所以要进行权衡。
- cookie-free：增加域名的第二个好多处，cookie只跟着主域名，css、js都无cookie，减少了上传量。
