A-A+

前端页面的性能优化有哪些工作可以做?

2018年09月16日 浏览器 暂无评论

概述

在前端开发过程中,我们不但要关于代码的开发,实现页面的交互功能,在开发过程中,还需要关注前端性能的优化,即如何保证页面打开时有良好的用户体检,这就涉及到页面的优化了。

五大关注点来优化页面渲染性能

如果您想优化自己的应用,则需要关注五个主要方面。这些是您可以控制的区域:

  1. JavaScript  - 在渲染时,我们需要考虑JavaScript代码与DOM元素交互的方式。因为JavaScript可以对DOM进行大量操作,尤其是在SPA中。
  2. 样式计算  - 这是根据匹配选择器确定哪个CSS规则适用于哪个元素的过程。定义规则后,将应用它们并计算每个元素的最终样式。
  3. 布局  - 一旦浏览器知道哪些规则适用于某个元素,它就可以开始计算后者占用的空间大小以及它在浏览器屏幕上的位置。Web的布局模型定义了一个元素可以影响其他元素。例如,宽度<body>可以影响其子节点的宽度等。这一切都意味着布局过程是计算密集型的。绘图在多个层中完成。
  4. 绘制  - 这是填充实际像素的位置。该过程包括绘制文本,颜色,图像,边框,阴影等 - 每个元素的每个视觉部分。
  5. 合成  - 由于页面部分被绘制成可能的多个图层,因此需要以正确的顺序将它们绘制到屏幕上,以便页面正确呈现。这非常重要,特别是对于重叠元素。

优化JavaScript

JavaScript经常触发浏览器中的视觉更改。建立SPA时更是如此。

以下是一些提示,您可以优化JavaScript的哪些部分以改进渲染:

  • 避免使用setTimeoutsetInterval来进行页面的更新。这些将callback在框架中的某个点调用,可能在最后。我们想要做的是在框架开始时触发视图变化。
  • 将长时间运行的JavaScript计算移动到Web Workers 。
  • 使用微任务在几个帧中引入DOM更改。这是因为任务需要访问DOM,Web Workers无法访问它。这基本上意味着你会打破大任务分解成较小的和内部运行它们requestAnimationFrame ,setTimeoutsetInterval这取决于任务的性质。

优化CSS

通过添加和删除元素,更改属性等来修改DOM将使浏览器重新计算元素样式,并且在许多情况下,重新计算整个页面的布局或至少部分布局。

要优化渲染,请考虑以下事项:

  • 降低选择器的复杂性。与构建样式本身的其余工作相比,选择器复杂度可能占用元素样式所需时间的50%以上。
  • 减少必须进行样式计算的元素数量。实质上,直接将样式更改为几个元素,而不是使页面整体无效。

优化布局

浏览器的布局重新计算可能非常繁重。考虑以下优化:

  • 尽可能减少布局数量。更改样式时,浏览器会检查是否有任何更改需要重新计算布局。对诸如宽度,高度,左侧,顶部以及通常与几何相关的属性等属性的更改需要布局。因此,尽量避免更改它们。
  • flexbox尽可能使用较旧的布局模型。它的工作速度更快,可以为您的应用创造巨大的性能优势。
  • 避免强制同步布局。要记住的是,当JavaScript运行时,前一帧中的所有旧布局值都是已知的,可供您查询。如果您访问box.offsetHeight它将不是一个问题。但是,如果您在访问框之前更改了框的样式(例如,通过向元素动态添加一些CSS类),则浏览器必须首先应用样式更改然后运行布局。这可能非常耗时且资源密集,因此请尽可能避免使用它。

优化绘制

这通常是所有任务中运行时间最长的,因此尽可能避免重绘的操作。这是我们可以做的:

  • 更改transforms或opacity以外的任何属性都会触发重绘。谨慎使用它。
  • 如果触发页面重构,则会触发重绘,因为更改几何体会导致元素的视图更改。
  • 通过图层提升和动画编排减少绘画区域。

标签:

给我留言

Copyright © 前端面试题 保留所有权利.   Theme  Ality 桂ICP备17012235号-1

用户登录