《前端性能优化链路》 学习

极客时间地址 MarkShow - 在线PPT，复制 feOptimization 内容

章节

01课程介绍

讲师10年前端开发经验， 系统学习前端优化；
根据讲师内容 + 个人理解，系统整理前端优化链路；

02课程综述， 六大部分；

静态资源优化
页面渲染架构设计
原生APP优化
原生APP优化
研发开发流程优化
全链路质量监控

1）静态资源优化：

03图片优化： 图片格式

图片格式场景； jpg,png,gif,webp；
最新格式图片 下一代图片格式 AVIF（AV1 Image File Format）已经来了，此格式比 JPEG 小 50% 左右、比 WebP 小 20% 左右，相关性能跑分见此，目前 Chrome 85、Firefox 77 已支持；

04图片优化：加速图片加载

压缩图片,tinypng, imagemin-webpack-plugin
图片占位符（默认图片）
压缩图片,低质图片占位符，LQIP, SQIP

05图片优化：服务器端图片优化

图片裁剪：按长边、短边、填充、拉伸等缩放
图片格式转换： 支持 jpg,png,gif,webp 相互转换，不同图片压缩率等
图片处理：添加图片水印、高斯模糊、重心处理、裁剪边框等
AI能力：智能排版、智能鉴黄、智能配色、智能合成、智能抠图等
业界低成本 - 使用 阿里云图片服务；
不同业务，使用不同域名

06HTML优化

骨架屏：页面渲染前呈现用户内容
压缩合并HTML
减少HTML嵌套、使用语义化标签 等
CSS样式内容放页面头部、JS放HTML底部

07CSS 优化

减少嵌套样式、text-content:-9999px; CSS3动画 等属性少用；
避免使用通配选择符：body li { font-size: 14px; }
压缩CSS代码
体积小于5KB图标使用base64图，大型站点使用字体图标

08JS 执行优化

requestAnimationFrame 取代 setTimeout, setInterval,考虑兼容性，该API支持情况：(IE 10+)
压缩JS代码
节流、防抖函数
使用CSS动画替代JS动画、数量庞大的表格等使用Canvas画板

09JS 缓存优化

Cookies 存储体积较小，不同浏览器：3Kb ~ 5Kb
LocalStorage
SessionStorage
IndexedDB(google doc, 石墨文档等);

10JS模块化

Command JS Node.js 模块化方案
AMD 前端异步模块定义，实现库：Require.js
CMD 前端通用模块定义，实现库：Sea.js
ES6 import, 未来主流方式

11减少回流、重绘：

谷歌浏览器，开发调试工具， 查看回流、重绘 选项；你不知道的Chrome调试技巧
CSS 使用绝对定位(fixed, absolute),让更新频繁节点脱离文档流
JS 避免频繁操作DOM，多次DOM节点操作可合并成一个
避免回流和重绘的必要性

12DOM 编程优化

简化DOM操作, 多次操作合并成一个；
控制DOM节点数量，参考React，Vue等前端框架虚拟DOM；

13压缩工具

HTML:html-minifier, CSS:clean-css, JS:uglify
在线工具1：345tool在线工具
在线工具2：FeHelper

14静态打包工具：

压缩、合并 CSS， JS；Combo 方案： domain/xxxx?a.js,b.js
webpack 代码切割配置, webpack4 optimization总结

15版本号更新策略；

eg: 大版本 v1，小版本 v1.2.0, 时间节点（例如年底）收拢版本， 旧版本302重定向到最新版本
现有较成熟的版本管理机制当属语义化版本号[2]，表现形式为 {主版本}.{次版本}.{补丁版本} - 如何打造一款标准的 JS SDK ？

16常用构建工具：

grunt, gulp, webpack， FIS， 以及 讲师着重介绍的 JDF（小众构建工具）
ES, Vite JS, Rome等; 详细参见 - 2020年GitHub 明星项目-构建工具

17webpack打包优化：

优化4个小技巧：
定位大模块、删除无用模块、生产模式公共模块抽离、开发模式DLL & DllReference优化；
webpack-打包优化

2）页面渲染架构设计：

18浏览器渲染过程

浏览器渲染过程， 缺少了CDN解析、HTTP握手相关；浏览器渲染原理和过程
浏览器解析HTML，生成DOM树；
浏览器解析CSS，生成CSSOM（CSS Object Model）树；
JS 会通过DOM API（DOM）和 CSSOM API 操作 DOM 树和 CSS Rule 树， 浏览器将DOM树和 CSSOM树 合成渲染树（Render Tree）；
布局（Layout）: 根据生成的Render Tree进行回流 计算每个节点的几何信息；（位置、大小、字体样式等）
绘制（painting）: 根据渲染树和回流得到几何信息，得到每个节点绝对像素；
展示（display）: 将像素发给图形处理器GPU， 展示在页面上；

19页面渲染技术架构

服务端渲染： 后端同步渲染、同构直出、BigPipe
客户端渲染：

20后端同步渲染

JSP，PHP， ASP 步骤差不多，以JSP为例
优点：快速实现业务开发、上线（协作模板引擎：JSmart, Velocity.js）； 缺点：用户需等待HTML完全加载才看到页面（白屏问题），代码耦合严重，前端页面复杂时不方便更新、迭代；

21动态页做页面静态化

静态化是指动态化网站生成静态HTML页面供用户、搜索引擎更好访问的技术，分成纯静态化和伪静态化两种
优势：
劣势：

22实现前后端分离

定义：前后端人员分离，技术栈分离； 后端负责业务功能、提供数据接口，前端负责页面UI、交互逻辑等；
优势：团队更加专注、提升开发效率、增加代码可维护性
后端架构：JAVA 、PHP + nginx,使用微服务（dubbo）, 使用某种协议例如JSF 提供不同服务； 前端架构： Angular,React,Vue等前端框架编译后部署 CDN 或 Node Server；
劣势：前端工作量较多，重前端，需要前端人员较多； 不利于SEO；

23单页面应用场景

定义： SPA（single-page-Application）, 页面切换浏览器不重新加载，而是通过动态重写当前页；
优点：
缺点：

24BigPipe

定义：页面加载到 pagelet, 加快页面渲染速度。将整个页面拆解成N个 pagelet，各自渲染优化用户体验；
技术实现：

25同构直出选择

同构定义：一套代码既可以在服务端运行，又可以在客户端运行；
优势：
实现： next.js, gatsbjs, nuxt.js; express, koa2, egg等；

26PWA

定义： Progressive Web App 简称 PWA， 使用特定技术和标准模式开发的Web应用；
优势：
实现， 全站改成Https,Service Worker, App Manifest. 浏览器核心API： ServiceWorkerGlobalScope（浏览器支持率：88%）， Web App Manifest(浏览器支持率：83%)

27页面渲染：技术方案选择

1）存在即合理， 旧项目有历史原因，不可大改；
2）依赖业务形式；
3）依赖团队规模；
4）依赖技术水平；
5）没有银弹。

28页面加载：加载策略

懒加载：延迟加载特定元素：图片、JS/CSS、JS特定函数； 实现思路： 监听滚动条，如懒加载元素(有data-lazy属性) 且可见，其 src 由空变成真实值。
预加载：让浏览器预先加载某些资源，如图片、JS/CSS/模板，这些资源将来才使用； 例如： 一级页面预先加载二级页面资源，加快二级页面打开速度；实现：preload, prefetch, preconnect。
预渲染：大型项目，提前加载后续组件；
按需加载：常规按需加载（原生JS，JQuery），不同APP按需加载（判断是否在微信APP觉得是否加载对应JS-SDK脚本）， 不同设备按需加载（PC端和H5端样式文件），不同分辨率按需加载（CSS Media Query）
楼层式加载： 楼层页加载、缓存对应数据；