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

目录

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 逐帧渲染

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lyrelion

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值