前端性能优化

从输入URL到页面加载完成过程

1. 浏览器的地址栏输入URL并按下回车
2. 浏览器查找当前URL是否存在缓存，并比较缓存是否过期
3. DNS解析URL对应的IP
4. 根据IP建立TCP连接（三次握手）
5. HTTP发起请求
6. 服务器处理请求，浏览器接收HTTP响应
7. 渲染页面
8. 关闭TCP连接（四次挥手）

前端性能优化的七大手段

• 减少请求数量
• 减小资源大小
• 优化资源加载
• 减少重排（回流）重绘
• 使用性能更好的API
• 构建优化
• 优化网络连接

减少请求数量

合并

• 如果不进行文件合并，有如下3个隐患

  • 文件与文件之间有插入的上行请求，增加了N-1个网络延迟
  • 受丢包问题影响更严重
  • 经过代理服务器时可能会被断开

• 文件合并本身也有自己的问题

  • 首屏渲染问题
  • 缓存失效问题

• 对于文件合并，有如下改进建议

  • 公共库合并
  • 不同页面单独合并

图片处理

• 雪碧图
• Base64（将图片的内容以Base64格式内嵌到HTML中，可以减少HTTP请求数量，但是由于Base64编码用8位字符表示信息中的6个位，所以编码后大小大约比原始值扩大了33%）
• 使用字体图标或者SVG图标来代替传统图片

减少重定向

尽量避免使用重定向，当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载，降低了用户体验。如果一定要使用重定向，如http重定向到https，要使用301永久重定向，而不是302临时重定向。因为使用302，则每一次访问http，都会被重定向到https的页面，而永久重定向在第一次从http重定向到https之后 ，每次访问http会直接返回https的页面

使用缓存最佳实践

不使用CSS的@import

CSS的@import会造成额外的请求

避免使用空的src和href

• a标签设置空的href，会重定向到当前的页面地址
• form设置空的method，会提交表单到当前的页面地址

减小资源大小

压缩

• HTML压缩（在HTML中不显示的字符包括空格，制表符，换行符等）
• CSS压缩（CSS压缩包括无效代码删除与CSS语义合并）
• JS压缩与混乱（JS压缩与混乱包括无效字符及注释的删除、代码语义的缩减和优化、降低代码可读性（实现代码保护））
• 图片压缩（针对真实图片情况，舍弃一些相对无关紧要的色彩信息）

webp

在安卓下可以使用webp格式的图片，它具有更优的图像数据压缩算法，能带来更小的图片体积，同等画面质量下，体积比jpg、png少了25%以上，而且同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性

服务器开启gzip

HTTP协议上的gzip编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用gzip压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来。一般对纯文本内容可压缩到原大小的40%

优化资源加载

资源加载位置

通过优化资源加载位置，更改资源加载时机，使尽可能快地展示出页面内容，尽可能快地使功能可用

• CSS文件放在head中
• 对于初始化页面显示的js或者之后需要调用的一些第三方库、工具函数就需要放在前面
• 一些通过页面事件调用的js就可以放在body底部
• body中间尽量不写style标签和script标签

资源加载时机

• JS延迟加载

  • defer：异步加载，在HTML解析完成后执行（defer的实际效果与将代码放在body底部类似）
  • async：异步加载，加载完成后立即执行
  • 按需异步载入JS
  • 动态创建DOM方式（创建script，插入到DOM中，加载完毕后callback）

• 模块按需加载

  • 在SPA等业务逻辑比较复杂的系统中，需要根据路由来加载当前页面需要的业务模块
  • 按需加载是一种很好的优化网页或应用的方式。这种方式实际上是先把代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后&