合理减少HTTP请求
我们知道从URL输入到页面渲染是一个比较复杂且耗时的过程，这个过程就从HTTP请求开始，比如请求html、css、js和图片。

一个完整的HTTP请求会经历DNS查找->TCP3次握手->浏览器发送HTTP请求->服务器接收请求->服务器处理请求并返回响应->浏览器接收响应。

减少请求的场景：

建立一个HTTP请求是很耗时的，如果传输数据的时间只占整个HTTP请求的比例很小时，可以适当减少请求次数
单次请求内容很小的最好合并成一次请求：雪碧图
输入查询和滚动加载可使用防抖或节流
使用HTTP2
HTTP2的优势：

header使用HPACK算法进行压缩，因此传输开销小
HTTP2请求以二进制传输代替HTTP1的明文传输，报文信息被划分成更小的数据帧（帧是数据传输的最小单位），因此服务器解析请求的速度会更快些
多路复用使多个请求可以共用一个TCP连接，同一个请求和响应用一个流来表示，并有唯一的流ID来标识，达到一次连接多次传输的目的。
去掉 OPTIONS请求
当浏览器发起跨域请求时，非简单请求会发起一次预检（也就是options请求），简单请求则不会。
MDN: 跨域资源共享

使用服务端渲染
客户端渲染：获取html文件，根据需要再下载js等文件，再运行文件，生成DOM进行渲染

服务端渲染：服务端只返回html文件，客户端只需要解析html文件。服务端渲染主要针对首屏显示速度有强需求的场景，不过这样会增大服务器的压力。

静态资源使用CDN
CDN（内容分发网络）是一组分布在多个不同地理位置的web服务器。

我们知道当被请求资源的服务器离用户越远，网络传输耗时越久，CDN就是为了解决这一问题，在多个位置部署服务器，让用户离服务器更近，从而减少请求时间。

js放底部，css放头部
浏览器渲染进程的GUI渲染线程和JS引擎线程是互斥的，因此，当浏览器在处理js代码的时候，会阻塞html的解析和渲染，如果把js放在底部，浏览器可以优先解析前面的html，html中的外部资源引用也不会被底部的js阻塞发送请求的时机，css放在头部，方便解析成cssom。

使用浏览器缓存
强缓存 expires或catch-control: max-age
状态码： 200
浏览器先查询浏览器缓存数据表，没有a的缓存信息，就向服务器发送请求a，浏览器返回a和a的缓存规则，浏览器把a和a的缓存规则存入缓存表

协商缓存 etag和last-modified
状态码：304
浏览器先查询浏览器缓存数据表，命中协商缓存，返回etag和last-modified，浏览器在request header中加上etag和last-modified，服务器判断得知这个资源未修改，返回状态码304，客户端从本地缓存中读取资源

文件压缩
webpack用插件压缩文件：

js：UglifyPlugin
css: MiniCssExtractPlugin
html: HtmlWebpackPlugin
服务器也可以通过向HTTP请求头中的Accept-Encoding添加gzip标识来开启这一功能。

图片优化
图片延迟加载：在页面中先不给img标签设置路径，只有当标签出现在浏览器可视区域时，才去加载真正的图片。
调整图片大小：使用原图/缩略图模式，有时我们会看到一个省流模式就是这个啦
降低图片质量： 例如jpg格式的图片，100%的质量和70%的质量，通常肉眼是看不出区别的，我们可以压缩图片
尽可能用css3效果代替图片
使用webp格式的图片，webp的优势在于它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量
减少重绘重排
重排：当改变、添加、删除可见DOM元素，元素尺寸改变，内容改变，浏览器窗口尺寸改变，都会导致浏览器重新生成渲染树
重绘： 当重新生成渲染树后，就要将渲染树每个节点绘制到页面上
不是所有的改动都会导致重排，比如改变字体颜色只会导致重绘。
重绘不一定导致重排，重排一定导致重绘。

使用事件委托
事件委托利用了事件冒泡机制，子元素的某个事件会冒泡到父元素的同名事件，因此，可以指定给父元素一个事件处理程序，就可以管理所有子元素的这类事件了。

使用事件委托可以节省内存，因为，不用为所有的子元素都指定这个事件，按钮事件、多数鼠标事件、键盘事件都可以采用事件委托来做

避免页面卡顿
如果页面中有一个动画或渐变效果或用户正在滚动页面，那么浏览器渲染动画或页面的每一帧的速率也应该和设备的刷新频率（60次/秒）保持一致。

尽量使用css动画
使用requestAnimationFrame来代替setInterval
让人愉悦地等待
loading动画
进度条
趣味动图
让人感觉很快
骨架屏
感觉很快的伪进度条