前端性能分析及优化

资源的压缩与合并

• 优化要点：减少http数量请求和资源大小请求
• 运用压缩与合并
• 实现方式有在线网站和压缩工具（需要node）

web前端本质上是一种GUI软件，本可以直接借鉴其他GUI系统架构设计方法，但web前端有点特别

浏览器的一个请求从发送到返回都经历了什么？

在这些请求过程中有一些潜在的性能优化点

• dns是否可以通过缓存减少dns查询时间
• 网络请求的过程可不可以走最近的网络环境
• 相同的静态资源是否可以缓存
• 能否减少请求http请求的大小
• 减少http请求
• 利用服务端渲染

其中，资源合并与压缩（html压缩，css压缩，js的压缩与混乱，文件合并，开启gzip）就可以减少http请求，可以减少请求资源的大小

html压缩

HTML的全称是超文本标记语言，HTML网页本身是一种文本文件，通过在文件中添加标记符，可以告诉浏览器如何显示其中的内容，包括文字大小，颜色，图片显示等等。这就意味着在文本文件中的一些特定意义的字符可以在浏览器显示的时候就不一样了，HTML代码压缩就是压缩这些在文本文件中有意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如HTML注释也可以被压缩。

这有一个计算
google的流量，占到整个互联网的40%

预计2016年全球网络流量将会达到1.3ZB(1ZB = 10^9TB)

那么google在2016年的流量就是1.3ZB * 40%

如果google每1MB请求减少一个字节

每年可以节省流量近500TB

css压缩

• 无效代码删除
• css语义合并

js压缩与混乱

• 无效字符的删除
• 剔除注释
• 代码语义的缩减和优化
• 代码保护

文件合并

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

文件合并存在的问题

• 首屏渲染问题---公共库
• 缓存失效问题---不同页面的合并

图片优化

先来看一张JPG图片有损压缩的解析过程

png8/png24/png32之间的区别

png8 —— 256色 + 支持透明
png24 —— 2^24色 + 不支持透明
png32 —— 2^24色 + 支持透明

每种图片格式都有自己的特点，针对不同的业务场景选择不同的图片格式很重要

• jpg有损压缩，压缩率高，不支持透明

• png支持透明，浏览器兼容好

• webp压缩程度更好，在ios webview有兼容性问题

• svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景

• jpg —— 大部分不需要透明图片的业务场景

• png —— 大部分需要透明图片的业务场景

• webp —— 安卓全部

• svg矢量图 —— 图片样式相对简单的业务场景

进行图片压缩：针对图片真实情况，舍弃一些相对无关紧要的色彩信息

css雪碧图（精灵图）：把你的网站用到的一些图片整合到一张单独的图片中以达到减少网站的http请求数量

image inline：将图片的内容内嵌到html当中以减少http请求数量

使用矢量图： 使用SVG进行适量图的绘制，使用iconfont解决icon问题

在安卓下使用webp： WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一

图片压缩
雪碧图网站

css，js的加载与执行

javascript是单线程的

一个网站在浏览器是如何进行渲染的呢？

html页面加载渲染的过程

html渲染过程的一些特点

• 顺序执行，并发加载
  • 词法分析
  • 并发加载
  • 并发上限
• 是否阻塞
• 依赖关系
• 引入方式

css阻塞

• css head中阻塞页面的渲染
• css阻塞js的执行
• css不阻塞外部脚本的加载

js阻塞

• 直接引入的js阻塞页面的渲染
• js不阻塞资源的加载
• js顺序执行，阻塞后续js逻辑的执行

依赖关系

• 页面渲染依赖于css的加载
• js的执行顺序的依赖关系
• js逻辑对于DOM节点的依赖关系

js引入方式

• 直接引入
• defer
• async
• 异步动态引入js

加载和执行的一些优点

• css样式表置顶
• 用link代替import
• js脚本置地
• 合理使用js的异步加载能力

可以使用Chrome浏览器的performance工具分析页面的加载过程

重绘与回流

css竟然能让JavaScript变慢

回流

• 当render tree中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就成为回流
• 当页面布局和几何属性改变时就需要回流

重回

• 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘

回流必将引起重绘，而重绘不一定会引起回流

触发页面布局的属性

• 盒子模型相关属性会触发重布局
• 定位属性及浮动也会触发重布局
• 改变节点内部文字结构也会触发重布局

/1853166-20200201214813494-566532226.png)

浏览器存储

浏览器是由多种存储方式的，如何选择他们呢？

cookie

• 因为HTTP请求无状态，所以需要cookie去维持客户端状态
• 过期时间 expire
• cookie的生成方式
  • http response header中的set-cookie
  • js中可以通过document.cookie可以读写cookie
• 仅仅作为浏览器存储（大小4KB左右，能力被localstorage替代）
• cookie中在相关域名下面 —— cdn的流量损耗
• httponly

localstorage

= HTML5设计出来专门用于浏览器存储的

• 大小为5M左右
• 仅在客户端使用，不和服务端进行通信
• 接口封装较好
• 浏览器本地缓存方案

sessionstorage

• 会话级别的浏览器存储
• 大小为5M左右
• 仅在客户端使用，不和服务端进行通信
• 接口封装较好
• 对于表单信息的维护

IndexDB

• IndexedDB 是一种低级API，用于客户端存储大量结构化数据。该API使用索引来实现对该数据的高性能搜索。虽然 Web Storage 对于存储较少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太有用。IndexedDB提供了一个解决方案。
• 为应用创建离线版本

PWA

PWA (Progressive Web Apps) 是一种 Web App 新模型，并不是具体指某一种前沿的技术或者某一个单一的知识点，我们从英文缩写来看就能看出来，这是一个渐进式的 Web App，是通过一系列新的 Web 特性，配合优秀的 UI 交互设计，逐步的增强 Web App 的用户体验。

• 可靠：在没有网络的环境中也能提供基本的页面访问，而不会出现“未连接到互联网”的页面。
• 快速：针对网页渲染及网络数据访问有较好优化。
• 融入（Engaging）：应用可以被增加到手机桌面，并且和普通应用一样有全屏、推送等特性。

可以使用Chrome浏览器的lighthouse来查看网站有关PWD的支持情况

Service Worker

Service Worker 是一个脚本，浏览器独立于当前网页，将其在后台运行,为实现一些不依赖页面或者用户交互的特性打开了一扇大门。在未来这些特性将包括推送消息,背景后台同步， geofencing（地理围栏定位），但它将推出的第一个首要特性，就是拦截和处理网络请求的能力，包括以编程方式来管理被缓存的响应。

Service Worker生命周期

两条Chrome跟Service Worker有关的命令

chrome://serviceworker-internals/
chrome://inspect/#service-workers

除了上述以外，还可以考虑浏览器缓存方面的优化，这就有点接触到后端的内容了，服务端渲染和客户端渲染合理利用也是可以提升页面性能的