1. 浏览器对同一个协议+域名组合都有并发请求数的限制， 大概8个左右， 可以申请多个域名增加并发请求数
2. 跨域有时会发生预检查的请求，也就是说发两次清求， 一次为OPTIONS不带请求体的请求， 一次真实请求，下面的情况不会发生预检查：使用GET、POST、HEAD，请求头限制为Accept、Accept-Language、Content-Language、Content-Type （需要注意额外的限制）、DPR、Downlink、Save-Data、Viewport-Width、Width， 并且Content-Type限制为text/plain、multipart/form-data、application/x-www-form-urlencoded
3.禁用所有的同步请求， 否则页面会卡顿， 严重影响用户体验， 如果多个请求有依赖可以参考Promise.all
4.小图片尽量合并成一个图片， CSS、JS脚本尽量合并压缩，减少请求数
5.缓存非常重要， 也是投入最少成效最大的一个优化方案， 所有静态资源URL不要带随机数， 服务端或客户端开启缓存, 缓存一般有两种200 form cache 取内存不发请求， 304 服务器响应资源没有改变， 发请求但不下载资源。
6.cookie只存储必要的数据，也就是说每个请求都会传的数据， 比如服务端token。 浏览器每次请求都会带上cookie， 如果cookie过大会严重影响性能以及服务器的压力
7.事件委托， 利用DOM事件冒泡原理， 绑定父节点或祖先节点统一处理事件。 DOM绑定事件虽然不会损耗太多的性能， 但是过多的DOM节点绑定就不一样了， 比如表格的每个单元格都绑定单击、双击、获取焦点等等， 数据量一大肯定会非常卡顿
8.虚拟DOM， 对比改变后的DOM树结构， 并对DOM树结构进行局部更新或增加。 DOM树的修改和增加代价非常大， 最好把更新操作限制在最小范围。 通俗的讲就是只替换innerText，attrValue，不替换element和innerHtml， 这个只是说渲染简单数据大的页面， 如果复杂可以参考Virtual DOM， 最简单的方法就是换成MVVM框架
9.大量下载资源的时候（首页）尽量开启长连接（h5默认开启），长连接与服务器握手确认连接之后可同时下载不同资源， 好处是只需握手一次就可以下载多个资源，如果不开启每个资源都会重新握手， 三次握手连接四次挥手关闭、传输数据与下载数据客户端与服务器一共九次来回，加上浏览器并发请求数限制， 如果没有做CDN加速客户端离服务器较远的地方会非常慢， 可以访问一些老版外国网站观察
10.服务端开启GZIP压缩， GZIP压缩对文本压缩率可以高达80%， 比如HTML、CSS、JS文件
11.对于一些不是立即使用的JS文件， 可以使用懒加载， 原理是把<script>标签追加到document里。如果直接把<script>标签写上会推迟了 DOMLoaded和window.onload 事件的触发时机，可以参考百度统计的一段代码：
image.png
12.图片像素分割， 16、32、64、128根据业务需求进行分割， 能使用最小的绝不用大的。一般网站快慢很大因素都是图片过大过多。
13.在高并发的时候， 对于一些不太重要的动态资源来说设置非常短的缓存也是解决服务器性能的办法，比如每秒请求数达到上百或上千， 设置1~2秒的缓存可以大量缓解服务器和数据库的压力， 其次要考虑缓存穿透后网络波动带来的影响
14.如果你能提前预知用户将到去某个页面， 你可以简单的发个异步请求拉取某个页面的数据， 最简单的方法是什么也不用做， 别看小一个请求，它会把资源的域名解析到的IP缓存起来， 把静态资源缓存起来，等用户进到下一个页面只会下载动态的资源
网友评论