前端项目性能优化

一、前端项目架构优化

1、加载性能

1、资源内容使用CDN加载，请求开启Gzip压缩

• 利用CDN加载资源内容

cdn全称content delivery network。它是依靠部署在各地区的边缘服务器，达到用户就近获取内容，降低网络拥塞，提高用户访问速度和命中率的目的。它主要的关键技术是内容存储和分发技术。

• 浏览器提前解析DNS

只有部分浏览器支持

• http请求次数

减少http的请求次数，将多个请求合并成同一个，减少http的开销

• http压缩

采用Gzip压缩：HTTP 压缩就是以缩小体积为目的，对 HTTP 内容进行重新编码的过程，原理是找出一些重复出现的字符串、临时替换它们，从而使整个文件变小，文件中代码的重复率越高，那么压缩的效率就越高，使用 Gzip 的收益也就越大

 

2、减少程序的HTTP请求次数

• 使用项目数据状态管理，减少数据请求获取

vue的用vuex、react的用redux

 

3、对静态资源进行优化，缩小请求体积，减少响应时间

• 大文件资源拆分，分包分片

• 图片优化

2、项目性能优化

1、页面渲染

• 减少阻塞

JS阻塞：当html解析遇到js会先下载和执行js文件，这是为了防止js操作了dom等情况的发生。但我们作为操作者，可以人为的指定，那些元素可以延迟加载。

CSS阻塞：css会阻塞html进行渲染，但是为了界面没有任何样式的展现在用户面前，因此我们需要将css提前

• 减少渲染次数 - 避免回流与重绘

• 减少渲染节点数量 - 懒加载

• 提高渲染效率 - 减少dom节点的操作、利用事件循环和异步更新

 

2、媒体资源进行压缩

• 第三方资源通过引用加载，减少包文件大小，提升加载速度

项目通过externals配置加载外部资源

图片压缩工具： pngyu

在线图片压缩工具：TinyPNG

• 大文件上传CDN

主站得前端静态上传地址: http://xmly.work/quickupload/

资源域名地址：https://imagev2.xmcdn.com/

 

3、渲染完成后的页面交互优化

• 防抖（debounce）/节流（throttle）

输入搜索时，可以用防抖debounce等优化方式，减少http请求；

节流函数：只允许一个函数在N秒内执行一次。滚动条调用接口时，可以用节流throttle等优化方式，减少http请求；

 

4、主流程页面添加骨架屏加载

骨架屏加载与loading加载配合，给用户带来顺畅体验和期待

 

整体优化点：

5、其他优化补充

• webpack模块打包和JavaScript 压缩（如gzip压缩）

• 利用CDN

• 按需加载资源

• 在使用 DOM 操作库时用上 array-ids

• 缓存优化

• 避免重定向

• 启用 HTTP/2

• 应用性能分析

• 使用负载均衡方案

• 为了更快的启动时间考虑一下同构

• 使用索引加速数据库查询

• 使用更快的转译方案

• 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染

• 用于未来的一个建议：使用 service workers + 流

• 图片编码优化，尽量使用svg和字体图标

 

参考：

前端性能优化之关键路径渲染优化

从 8 道面试题看浏览器渲染过程与性能优化

Vue 应用性能优化指南