一.前端优化（参考：https://coolshell.cn/articles/9666.html）
延伸问问题： 浏览器优化 / 页面优化 / 用户体验优化
1.CSS匹配DOM Tree主要是从右到左解析CSS的Selector；CSS尽量用id和class；不要过渡层叠；
2.减少reflow/repaint。reflow原因有：页面初始化时；JS操作DOM时；Resize改变元素尺寸时；CSS属性发生变化时；节点污染（dirty）时，同一个节点的子树上发生多个reflow。
有两个概念：
- Repaint（重绘）——屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。
- Reflow（回流）——意味着元件的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow，或是Layout。
Reflow的成本比Repaint的成本高的多。
下面这些动作有很大可能会是成本比较高的。
- 当你增加、删除、修改DOM结点时，会导致Reflow或Repaint
- 当你移动DOM的位置，或是搞个动画的时候。
- 当你修改CSS样式的时候。
- 当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候。
- 当你修改网页的默认字体时。
- 滚动页面时，有fixed元素，或是有些Element不跟着滚动，有些Elment是动画
注：display:none会触发reflow，而visibility:hidden只会触发repaint，因为没有发现位置变化。
3.不要一条一条地修改DOM的样式。预先定义好css的class，然后修改DOM的className
4.把DOM离线后修改。
- 使用documentFragment 对象在内存里操作DOM；
- 先把DOM给display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他显示出来；
- clone一个DOM结点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。
5.尽可能的修改层级比较低的DOM。当然，改变层级比较底的DOM有可能会造成大面积的reflow，但是也可能影响范围很小。
6.为动画的HTML元件使用fixed或absoult的position，那么修改他们的CSS是不会reflow的。
7.千万不要使用table布局。因为可能很小的一个小改动会造成整个table的重新布局。
8.避免后代选择符，尽量使用子选择符。原因：子元素匹配符的概率要大于后代元素匹配符。后代选择符：#tp p{} ；子选择符：#tp>p{}
9.避免使用通配符，举一个例子：.mod .hd *{font-size:14px;}
10.将CSS放到head标签里，将所有的script标签放到页面底部，也就是body闭合标签之前，这能确保在脚本执行前页面已经完成了DOM树渲染。
11.JS载入后马上执行，执行时会阻塞页面后续的内容。采用无阻塞下载 JavaScript 脚本的方法：使用script标签的 defer 属性；使用动态创建的script元素来下载并执行代码；
原因：因为浏览器需要一个稳定的DOM树结构，而JS中很有可能有 代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修 改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现。
12.使用Gzip格式压缩HTML；使用gzip压缩的方式来传输html文件，可以做到边下载边解压。另外从显示效果上看是边下载边解析的，如果不是的话，停止下载的时候要么显示全部要么一点不显示。
13.使用webpack压缩，打包，代码分割，懒加载
14.vue 组件按需引用，vue-router懒加载，加载动画
16.图片预加载，图片懒加载
17.服务器端ssr渲染，SSR框架NUXT.js
-------------------------------<本节完>------------------------------------------