前端性能优化梳理

waitting_g
400 阅读5分钟

主要从网页渲染过程、网页交互以及Vue应用优化三个角度对性能优化做一个梳理总结。

浏览器渲染流程/CRP（Critical Rending Path）

可优化项及优化方案

  • 关键资源的数量: 可能阻止网页首次渲染的资源

    方案：删除它们（内联）、推迟它们的下载（defer）或者使它们异步解析（async）等等 。。

  • 关键路径长度: 获取所有关键资源所需的往返次数或总时间

    方案：优化加载剩余关键资源的顺序（让关键资源（CSS）尽早下载以减少 CRP 长度（如骨架屏） ）、HTTP缓存。

  • 关键字节: 实现网页首次渲染所需的总字节数，等同于所有关键资源传送文件大小的总和。

    方案：缩小、压缩来减少下载时间 。

页面交互优化

优化方案

  • 减少重绘、回流

  • 图片懒加载

  • 使用事件委托减少元素操作损耗

  • 防抖、节流减少http请求

Vue相关性能优化

定位问题

  • Performance工具

    定位CPU 占用、内存占用、FPS 等运行时性能问题。

  • Network

    通过瀑布图分析资源加载性能问题。可以将结果保存为HAR文件，导入其它性能分析工具中。

  • Lighthouse

    是一款内置在chrome当中的性能分析工具，它可以生成评估界面，然后给各个方面的建议，比如图片、css、js这些文件的处理，还有html里面标签的使用，缓存处理等建议，可以根据这些来对网站进行优化。

    有两种使用方式

    1、直接打开开发者工具，然后找到tab为Audits，这部分是被Lighthouse监管的

    2、下载lighthouse浏览器插件，国内需要翻墙

  • WebPageTest

    可以登录webpagetest.org来测试我们想要测试的网站，感兴趣的可以了解下。

  • 公司内云图工具

评估标准

我们有时候需要用具体的模型来量化我们优化的产出，看看和我们目的有多大差距。

RAIL测量模型

RAIL就是谷歌提出的一套标准，它告诉我们怎么去做，做到什么地步才算好。

R：Response响应，这里指的是网站的响应体验，不是指服务器那个请求和响应

A：Animation动画，动画流畅性，帧数测试

I：Idle空闲，让浏览器主线程空闲时间更多，不能让主线程一直繁忙，否则就没有时间处理用户的交互

L：Load加载，资源加载的时间

RAIL评估标准

以下的标准都是谷歌公司长期在用户体验调查出的结果：

响应：事件处理应该在50ms以内完成

动画：每10ms产生一帧（通过一秒60fps计算而来）

空闲：尽可能增加空闲的时间

加载：5秒内完成所有内容的加载并且可以开始交互

VUE优化方案

Vue 应用的性能问题可以分为两个部分，第一部分是运行时性能问题，第二部分是加载性能问题。

Vue 运行时性能优化方案

  • 使用生产环境的模式

    开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的。

  • 提取组件的 CSS 到单独的文件

    当组件内的 CSS 以 标签的方式通过 JavaScript 动态注入，这有一些小小的运行时开销，将所有组件的 CSS 提取到同一个文件可以避免这个问题，也会让 CSS 更好地进行压缩和缓存。

  • 利用Object.freeze()提升性能

    Object.freeze()可以返回一个冻结对象。所以展示类场景可以使用该属性创建data数据。

  • 扁平Store数据结构

    使用Normalizr这样的JSON数据规范化（normalize）工具，将JSON数据转变成使用 id 作为字典的实体表示的对象，以减少遍历成本；

  • 合理使用持久化Store 数据

    如果需要将Store中数据持久化存储，则应注意：持久化Store的频率：多次写入操作合并为一次，只有在必要的时候才写入，比如只有关心的模块的数据发生变化的时候才写入；缓存清除策略：设计旧数据的缓存清除策略。

  • 懒加载Store模块

    import adminModule from './admin.js'
...
mounted () { 
	this.$store.registerModule('admin', adminModule)
},

  • 优化无限列表性能

    采用 窗口化 的技术来优化性能，只需要渲染少部分区域的内容，减少重新渲染组件和创建 dom 节点的时间。

    主要使用到的技术是 DOM 回收、墓碑元素和滚动锚定。Complexities of an Infinite Scroller

    vue-virtual-scroll-list和 vue-virtual-scroller 都是解决这类问题的开源项目。

Vue 加载性能优化方案

其它性能优化方案

  • webpack打包时优化配置

  • http缓存优化

  • 利用CDN

  • 等等

avatar
文章
阅读
粉丝