前端性能优化

前端性能优化

三大优化思维：

性能优化目标

用户体验

代价与权衡

八处优化落点：

HTML层级优化

CSS层级优化

JavaScript层级优化

渲染层级优化

交互请求优化

数据结构优化

前端缓存优化

前端性能瓶颈

传统DOM操作对性能的影响

浏览器的渲染过程

重排、重绘

前端性能优化与重绘与回流有关系的原因是：频繁的触发重绘与回流，会导致UI频繁染，最终会导致js变慢，会导致页面性能变差

单一页面完成复杂交互（SPA）

单页面应用（SPA--------single page application），一个web项目只有一个页面（即一个HTML文件）；一个项目的所有页面的所有内容被分成了很多的小块（即组件），可以重复利用的，可以任意调整的组件，每个组件就是一个独立的部分（包括html，css和javascript代码）。

单页应用的优缺点

1.用户体验好、快，内容的改变不需要重新加载，提升了 用户体验；

2.前端组件化，前端开发不再以页面为单位，更多地采用 组件化的思想，代码结构和组织方式更加规范化，便于修 改和调整。

3.首次加载耗时较多，需加载大量的资源 4.导航不可用，由于单页Web应用在一个页面中显示所有 的内容，所以不能使用浏览器的前进后退功能 5.对搜索引擎（SEO）不友好

假如页面很多，是否需要将业务分成几个模块，每个模块再做成SPA

同一个页面的数据多寡

懒加载、分页、虚拟滚动

浏览器请求并发数限制

同一时间段内，相同域名下的请求，浏览器最多只会发送6条（chrome）

编码习惯

良好的代码风格、尽量减少JavaScript代码在计算、数据结构处理中所占的比重，可以在几乎无代价的情况下提高产品性能。

HTML层级优化

减少HTML的层级嵌套

浏览器解析HTML的过程实际是一个遍历的过程，层级越深所需时间也越长。

MVVM框架组件之间的嵌套，也不宜过深

标签的Style属性

通过类名而不是内联方式写样式，直观明朗、文件体积小（代码复用）、加载性能高，维护高效、简便。

Link标签的妙用

prefetch DNS解析的预加载：

<link rel=”dns-prefetch” href=”http://www.dorsey.com”>

proload 脚本预加载，在浏览器空闲时加载：<link rel=”preload” href=”point.js” as=”script”>

1、preload和prefetch的本质都是预加载，即先加载、后执行，加载与执行解耦。

2、preload和prefetch不会阻塞页面的onload。

3、preload用来声明当前页面的关键资源，强制浏览器尽快加载；而prefetch用来声明将来可能用到的资源，在浏览器空闲时进行加载。

img标签

图片变化导致页面reflow：给img标签设定固定的大小，或外套固定大小的标签、再将图片设置成100%；

标签的src属性及href属性

src属性和link标签的href属性为空（值为空）时，一些浏览器可能把当前页面当成属性值加载。

资源加载优化

DNS优化

dns-perfetch

是一种浏览器机制，其利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。网页向浏览器提供一组预取提示，并在浏览器完成当前页面的加载后开始静默地拉取指定的文档并将其存储在缓存中。当用户访问其中一个预取文档时，便可以快速的从浏览器缓存中得到。（https://juejin.cn/post/6893681741240909832）

CDN部署与缓存

内容分发网络。基本原理是避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容能够传输的更快、更稳定。

HTTP缓存

加载模式

懒加载、分页加载、区域无刷Ajax加载

CSS预处理及压缩

JavaScript代码压缩处理

Base64的妙用

Base64的图片在体积上没有优势，但解析速度要比原文件快很多，这是他性能提升的一个方面

使用内联图片，也就是将图片转换为 base64编码的data-url。这种方式，其实是将图片的信息集成到css文件中，避免了图片资源的单独加载。但图片内联会增加css文件的大小，增加首屏渲染的时间。

大中小图片方案及图片压缩

屏蔽开发时的调试、日志代码

其他层级优化

从输入一个URL到页面出现的过程（性能优化即是优化这些过程）

DNS解析，把域名转成IP的过程

浏览器向目标主机发出请求

HTTP/HTTPS协议

服务器返回数据

浏览器加载及渲染页面

不做重复加载（iframe）

精简Cookie

浏览器每次发送请求默认带上Cookie，建议除了保持登录状态基本用户信息之外，尽量不要将其他信息写进Cookie有意识的精简Cookie是一个好习惯，合理使用SessionStorage和LocalStorage SessionStorage是会话级的缓存，关闭浏览器就小时，LocalStorage是本地缓存，会话结束也不会消失

控制交互请求

合理的控制交互请求、减少请求数，对系统的性能提升有很大的帮助

浏览器请求并发数限制

增加资源的域名

浏览器并发请求限制对浏览器本身有好处，对服务端也有好处

减少同后端交互请求数

请求的合并：如CSS Sprite，数据结构的调整

前端的缓存：SessionStorage、LocalStorage、Cookie、IndexDB

资源的打包

传统的轮询方式替换成WebSocket推送，可以大大降低各种空的、无效的请求，降低服务器压力

代理、中间件、请求分发

在后端与前端的中间做一个中间层（中间件）作为请求分发的服务总线

前提是应用的用户量高，并发量大，如果只有一台服务器，则没有任何意义

中间层起到了负载均衡的作用

合理的数据结构

合理的数据结构，后端易查、易存储，前端易取、易展示，可以最大限度的避免各种额外的数据结构。

前端展示、后端处理的思维模式

前端主要负责展示，后端负责数据处理。Javascript是单线程的，而后端语言绝大多数都是多线程的。

数据的结构尽量与前端展示区域的数据结构一致，这部分数据无须再做转换或合并拆解

数据结构宜简不宜繁

读取数据通常是通过遍历访问Key的形式访问数据，层级过深会在一定程度上影响读取的速度。

采用轻量级数据交换格式

JSON

前后端联调对接那些事

前后端联调是前后端分离后的必然产物

前端和后端事先约定好固定的数据结构，前端通过Mock数据渲染，后端通过Postman等模拟前端请求。

对接注意问题：比如不通过前端JavaScript来处理复杂的数据结构

如果系统架构中多了一层中间层，则可以在中间层处理数据结构风格统一化、前端表单校验等。

充分利用硬件GPU加速

CSS3变换属性会触发GPU加速：translate、rotate、scale、opacity、filter

新技术对性能的提升

即时通信

Socket技术

订阅-发布模式的socket-io；socket.io是将WebSocket、轮询机制及其他的及时通信方式封装成了通用的接口。

MVVM框架

虚拟DOM

Diff算法

移动端相关应用

骨架屏

PWA渐进式增强的Web应用

一个性能优良的Web前端产品，绝不是通过某一个或某几个优化方式就能达成的，它是一系列有意识的调整从量变到质变的一个过程。

其中非常关键的一点是编码习惯与思维方式，通过长期的业务逻辑的编写、代码的累积，性能可以变得更好，也可能会变得更糟，这种质变通过一任何优化方式基本都是无解的。需要开发人员不断的学习与优化自己的技术和知识体系，做到有意识的朝着好的方向编码，同时优化之前写过的代码。