一、加载时的优化
1、减少http请求
一个完整的http请求需要经历DNS查找，TCP握手，浏览器发出http请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等一系列复杂的过程。当请求较多时，直接体现在了消耗性能上面，我们可以将多个小文件合并为一个大文件，减少http请求。
2、使用服务器端渲染
客户端渲染时，获取html文件，根据需要加载js文件，运行文件，生成DOM再渲染，这个过程中需要浏览器花费性能处理。而服务端渲染返回html文件，客户端只需要解析html即可。
3、静态资源使用CDN
CDN就是内容分发网络，它是一组分布在多个不同地理位置的web服务器。
当服务器离用户越远时，延迟越高，CDN就是来解决这个问题的，让用户离服务器更近，从而缩短请求时间。
4、css写在头部，js写在底部
所有放在head标签中的css和js都会堵塞渲染，如果这些css和js需要加载和解析很久的话，那么页面就空白了。所以js文件需要放在底部，等html解析完了再加载js。
那为什么css要放在头部呢？因为先加载html再加载css，会让用户第一时间看到的页面是没有样式的、“丑陋”的，为了避免这种情况发生，就要将css文件放在头部。
另外，js也可以放在头部，只要给script标签加上defer属性就可以了，defer是异步下载但js在html解析完再执行。
5、字体图标代替图片图标
字体图标就是将图标制作为一个字体，使用时就跟字体一样，可以设置属性，例如：font-size: 14px; color: red;等等。字体图标是矢量图，不会失真。还有一个优点是生成的文件特别小。
6、利用缓存不重复加载相同的资源
为避免用户每次访问网站都得请求文件，我们可以通过添加expires来控制这一行为。expires设置了一个时间，在这个时间之前，浏览器都不会请求文件，而是直接使用缓存。
7、图片优化
- 图片延迟加载：在页面中，先不给图片设置路径，只有当图片出现在浏览器可视区域时，才去加载真正的图片
- 降低图片质量：图片100%和90%质量通常看不出来区别，尤其是用来当背景图的时候。我们可以在用ps切背景图时，将图片切成jpg格式，并且将它压缩到60%的质量，这样基本看不出来区别
- 尽可能用css3效果代替图片：一些渐变和小箭头用css就可以画出来，没必要使用图片
- 使用雪碧图
8、通过webpack按需加载代码
懒加载或按需加载，是一种很好的优化网页的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载
二、运行时的优化
1、减少重排重绘
用js修改样式时，最好不要直接写样式，而是替换class来改变样式。
在对DOM元素进行操作时，可以将DOM先脱离文档流，修改完后再带回文档，可以使用display: none或文档碎片
2、使用事件委托
事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件
3、if-else对比switch
当判断条件数量越来越多时，越倾向于使用switch而不是if-else。不过，switch只能用于case值为常量的分支结构，而if-else更加灵活
4、不要覆盖原生方法
无论js代码如何优化，都比不上原生方法。因为原生方法是低级语言写的，并且被编译成机器码，称为浏览器的一部分。当原生方法可用时，尽量使用它们，特别是数学运算和DOM操作
5、使用flex布局
在早期的css布局方式中只能对元素实行绝对定位、相对定位或浮动。现在有了flex布局，它比早期的布局方式更有优势，性能比较好
6、用transform和opacity属性更改来实现动画
在css中，transform和opacity这两个属性更改不会触发重排与重绘，它们是可以由合成器单独处理的属性
