web前端性能优化

web前端性能优化

• 资源的合并与压缩
• 图片编解码原理和类型选择
• 浏览器渲染机制
• 懒加载预加载
• 浏览器存储
• 缓存机制
• PWA
• Vue-SSR

基础优化

• 资源的合并与压缩

• 作用

1.减少http请求数量
2.减少请求资源的大小
复制代码

• 实现方式

1.html压缩
2.css压缩
3.js的压缩和混乱
4.文件合并
5.开启gzip
复制代码

请求过程中一些潜在的性能优化点？
dns是否可以通过缓存减少dns查询时间？
网络请求的过程走最近的网络环境？
相同的静态资源是否可以缓存？
能否减少请求http请求大小？
减少http请求？
服务端渲染？
复制代码

图片优化

• png8/png24/png32之间的区别

png8: 256色+支持透明
png24: 2^24色+不支持透明
png32: 2^24色+支持透明
复制代码

• 不同格式图片常用的业务场景

1.jpg有损压缩，压缩率高，不支持透明不需要透明图片的业务场景）
2.png支持透明，浏览器兼容好（需要透明图片的业务场景）
3.webp压缩程度更好，在ios webview有兼容性问题（安卓全部）
4.svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景（图片样式相对简单的业务场景）
复制代码

进阶优化

• 懒加载和预加载

一、懒加载
1.图片进入可视区域之后请求图片资源
2.对于电商等图片很多，页面很长的业务场景适用
3.减少无资源的加载
4.并发加载的资源过多会阻塞js的加载，影响网站的正常使用
二、预加载
1.图片等静态资源在使用之前的提前请求
2.资源使用到时能从缓存中加载，提升用户体验
3.页面展示的依赖关系维护
复制代码

• 浏览器重绘与回流

回流：当render tree中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，当页面布局和几何属性改变时就需要回流。
重绘：当render tree的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。
回流必将引起重绘而重绘不一定会引起回流

复制代码

• 触发页面重布局的属性

1.盒子模型相关属性会触发重布局
2.定位属性及浮动也会触发重布局
3.改变节点内部文字结构也会触发重布局
复制代码

• 新建DOM的过程

1.获取DOM后分割为多个图层
2.对每个图层的节点计算样式结果（Recalculate style--样式重计算）
3.为每个节点生成图形和位置（Layout--回流和重布局）
4.将每个节点绘制填充到图层位图中（Paint Setup和Paint--重绘）
5.图层作为纹理上传至GPU
6.符合多个图层到页面上生成最终屏幕图像（Composite Layers--图层重组）
复制代码

• 实战优化点

1.用translate替代top改变
2.用opacity替代visibility
3.不要一条一条地修改DOM的样式，预先定义好class，然后修改DOM的className
4.把DOM离线后修改，比如：先把DOM给display:none（有一次Reflow）,然后你修改100次，然后再把它显示出来
5.不要把DOM结点的属性值放在一个循环里当成循环里的变量
6.不要使用table布局，可能很小的一个小改动会造成整个table的重新布局
7.动画实现的速度的选择
8.对于动画新建图层
9.启用GPU硬件加速
复制代码

浏览器存储

• Cookie

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

• LocalStorage

1.HTML5设计出来专门用于浏览器存储的
2.大小为5M左右
3.仅在客户端使用，不和服务端进行通信
4.接口封装较好
5.浏览器本地缓存方案
复制代码

• SessionStorage

1.会议级别的浏览器存储
2.大小为5M左右
3.仅在客户端使用，不和服务端进行通信
4.接口封装较好
5.对于表单信息的维护
复制代码

• IndexedDB

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

• PWA

PWA(Progressive Web Apps)是一种Web Apps新模型，并不是具体指某一种前沿的技术或者某一个单一的知识点，我们从英语缩写来看，这是一个渐进式的Web App，是通过一系列新的Web特性，配合优秀的UI交互设计，逐步的增强Web App的用户体验。
1.可靠性：在没有网络的环境中也能提供基本的页面访问，而不会出现"未连接到互联网"的页面。
2.快速性:针对网页渲染及网络数据访问有较好优化。
3.融入性：应用可以被增加到手机桌面，并且和普通应用一样有全屏、推送等特性。
4.lighthouse
复制代码

• Service Worker

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