前端性能优化——加载优化、渲染优化

目录

1. 加载优化

1.1 首页加载慢的优化

1.1.1 首页加载 图片多、请求多、静态资源（css、js、img）过大？

1.1.2 首页的请求量过多怎么解决？

1.1.3 只有通过合并静态资源的方式才能减少资源请求量吗？

1.1.4 首页请求的资源（CSS、JS、图片...）过大怎么解决？

1.2 优化图片的做法

1.3 实现 Webpack 打包优化

1.4 实现 CDN

2. 渲染优化

2.1 渲染十万条数据如何不造成卡顿

---

1. 加载优化

1.1 首页加载慢的优化

1.1.1 首页加载 图片多、请求多、静态资源（css、js、img）过大？

解决方案：

• 懒加载，监听滚动条事件，滚动条距离浏览器顶部的高度 = 图片距离顶部的高度
• 小图标可以采用 iconfont-字体图标 的方式解决
• 小图片可以采用 雪碧图 / 精灵图 的方式解决

1.1.2 首页的请求量过多怎么解决？

解决方案：

• Vue-UI 的仪表盘 和 浏览器的 Network 可以确定首页加载的资源和请求量
• 通过打包工具（Webpack）来做资源文件的 物理打包 （CDN缓存）

1.1.3 只有通过合并静态资源的方式才能减少资源请求量吗？

解决方案：

• babel插件 按需加载（如 element-ui）
• 前端路由（仅限于 SPA应用）懒加载，点击了才加载对应组件，import 相当于 promise对象，then()才有结果

1.1.4 首页请求的资源（CSS、JS、图片...）过大怎么解决？

解决方案：

• 开启 gzip，进行全部资源压缩
• 对图片进行转码——base64格式，自动化工具压缩图片——熊猫站
• 源码通过 gulp 等前端构建工具 进行压缩打包

1.2 优化图片的做法

• 减少图片的请求——懒加载
• 减小图片的大小——熊猫站、base64、WebP格式

熊猫站（自动化工具）：压缩 PNG 和 JPG，通过减少颜色的数量以及不必要的数据来实现文件压缩

base64：使用 Webpack 的 url-loader 进行图片策略配置，base64可以减少资源，但图片体积增大

WebP格式：同等条件等比例无损压缩后的 WebP 比 PNG 文件少了 26％ 的体积

1.3 实现 Webpack 打包优化

• 减少包数量
• 减小包体积

WebPack配置项：optimization：development / production

使用 Webpack 对代码进行混淆和压缩，并且可以使用 React lazy 进行拆包，结合路由进行按需加载

拆包后的文件，不可能同时加载的，所以就不会造成同一时间资源请求过多的请求

optimization.splitChunks 打包策略的优化：将 node_modules 单独打包，以及将自己实现的代码也可以分为公共包和非公共包，并且分开打包

1.4 实现 CDN

• CDN（内容分发网络）：放静态资源的服务器

CDN 加速是因为：很多地方都部署了 CDN 服务器，如果用户需要下载静态资源，会自动选择 最近的节点 下载

2. 渲染优化

2.1 渲染十万条数据如何不造成卡顿

• 在浏览器中 最消耗性能的 —— 操作 DOM

element.innerHTML：把动态创建的元素追加到数组里，然后一次性把所有的标签进行渲染

document.createDocumentFragment 创建虚拟节点，当所有的 li 都创建后，一次性把虚拟节点里的 li 全部渲染

采取分段渲染的方式，最后使用 window.requestAnimationFrame 逐帧渲染