×

时间角度优化:减少耗时

提问者:Terry2023.07.16浏览:797

我们知道浏览器在页面加载过程中,会进行以下的步骤:

  • 网络请求相关(发起 HTTP 请求从服务端获取页面资源,包括 HTML/CSS/JS/图片资源等)

  • 浏览器解析 HTML 和渲染页面

  • 加载 Javascript 代码时会暂停页面渲染(包括解析到外部资源,会发起 HTTP 请求获取并加载)

在浏览器的首次加载和渲染完成之后,不代表用户就可以马上交互和操作。根据业务代码加载过程,页面还会分别进入页面开始渲染、渲染完成、用户可交互等阶段。除此之外,页面交互过程中,会根据业务逻辑进行逻辑运算、页面更新。

题外话:为什么我们常常说要理解原理呢?性能优化便是个很好的例子,如果你不知道这个过程具体发生了什么,就很难找到地方下手去进行优化。

根据这个过程,我们可以从四个方面进行耗时优化:

  1. 网络请求优化。

  2. 首屏加载优化。

  3. 渲染过程优化。

  4. 计算/逻辑运行提速。

在前端性能优化实践中,网络请求优化和首屏加载优化方案使用频率最高,因为不管项目规模如何、各个模块和逻辑是否复杂,这两个方向的耗时优化方案都是比较通用的。相比之下,对于页面内容较多、交互逻辑/运算逻辑复杂的项目,才需要针对性地进行渲染过程优化和计算/逻辑运行提速。


您的支持是我们创作的动力!

网友回答文明上网理性发言已有0人参与

发表评论: