网页渲染性能优化 —— 性能优化下-低调大师

网页渲染性能优化 —— 性能优化下

2020-11-17 512

关注公众号前端开发博客，回复“加群”

加入我们一起学习，天天进步

作者：晨风明悟

链接：https://zhuanlan.zhihu.com/p/39880024

第一篇：网页渲染性能优化 —— 渲染原理

第二篇：你需要知道的网页渲染性能优化方法（上）

这是第三篇，以下为正文

Composite 的优化

终于，我们到了像素管道的末尾。对于这一部分的优化策略，我们可以从为什么需要 Composited Layer（Graphics Layer）来入手。这个问题我们在构建 Graphics Layer Tree 的时候，已经说明过，现在简单回顾一下：

避免不必要的重绘。
利用硬件加速高效实现某些 UI 特性。

根据 Composited Layer 的这两个特点，可以总结出以下几点优化措施。

使用 transform 和 opacity 属性来实现动画

上文我们说过像素管道的 Layout 和 Paint 部分是可以略过，只进行 Composite 的。实现这种渲染方式的方法很简单，就是使用只会触发 Composite 的 CSS 属性；目前，满足这个条件的 CSS 属性，只有 transform 和 opacity。

使用 transform 和 opacity 需要注意的是：元素必须是 Composited Layer；如果不是，Paint 还是会照常触发（Layout 要看情况，一般 transform 会触发）。来看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
    .div {
      width: 100px;
      height: 100px;
      background-color: #f00;
      /* will-change: transform; */
    }
  </style>
  <title>性能优化</title>
</head>

<body>
  <div class="div"></div>
  <script>
    const div = document.querySelector(".div");
    const run = () => {
      div.style.transform = "translate(0, 100px)";
    };
    setTimeout(run, 2000);
  </script>
</body>
</html>

我们将使用 transform 来向下位移，开始我们先不把 div 节点提升为 Composited Layer；通过下图可以看到：还是会触发 Layout 和 Paint 的。

这时，把 div 节点提升为 Composited Layer，我们发现 Layout 和 Paint 已经被略过了，符合我们的预期。

减少绘制的区域

如果不能避免绘制，我们就应该尽可能减少需要重绘的区域。例如，页面顶部有一块固定区域，当页面某个其他区域需要重绘的时候，很可能整块屏幕都要重绘，这时，固定区域也会被波及到。像这种情况，我们就可以把需要重绘或者受到影响的区域提升为 Composited Layer，避免不必要的绘制。

提升成 Composited Layer 的最佳方式是使用 CSS 的 will-change 属性，它的详细说明可以查看 MDN 的文档。

.element {
  will-change: transform;
}

对于不支持的浏览器，最简单的 hack 方法，莫过于使用 3D 变形来提升为 Composited Layer 了。

.element {
  transform: translateZ(0);
}

根据上文所讲的例子，我们尝试使用 will-change 属性来让固定区域避免重绘。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
    .div {
      width: 100px;
      height: 100px;
      background-color: #f00;
    }
    .header {
      position: fixed;
      z-index: 9999;
      width: 100%;
      height: 50px;
      background-color: #ff0;
      /* will-change: transform; */
    }
  </style>
  <title>性能优化</title>
</head>

<body>
  <header class="header">固定区域</header>
  <div class="div">变动区域</div>
  <script>
    const div = document.querySelector(".div");
    const run = () => {
      div.style.opacity = 0.5;
    };
    setTimeout(run, 2000);
  </script>
</body>
</html>

首先，我们来看下没有经过优化的情况；顺带说明查看浏览器一帧绘制详情的过程。

打开控制台的 Performance 界面。
点击设置（标记 1），开启绘制分析仪（标记 2）。
启动 Record（标记 3），获取到想要的信息后，点击 Stop（标记 4），停止 Record。
点击这一帧的 Paint（标记 5）查看绘制详情。
切换到 Paint Profiler 选项卡（标记 6），查看绘制的步骤。

通过上面的图片（标记 7 和标记 8）可以看到，固定区域的确被波及到，并且触发重绘了。我们再对比使用 will-change 属性优化过的情况，发现固定区域没有触发重绘。

并且，我们也可以通过一帧（标记 1）的布局详情（标记 2），查看固定区域（标记 3）是不是提升成 Composited Layer（标记 4），才避免的不必要绘制。

合理管理 Composited Layer

提升成 Composited Layer 的确会优化性能；但是，要知道创建一个新的 Composited Layer 必须要额外的内存和管理，这是非常昂贵的代价。所以，在内存资源有限的设备上，Composited Layer 带来的性能提升，很可能远远抵不上创建多个 Composited Layer 的代价。同时，由于每一个 Composited Layer 的位图都需要上传到 GPU；所以，不免需要考虑 CPU 和 GPU 之间的带宽以及用多大内存处理 GPU 纹理的问题。

我们通过 1000 个 div 节点，来对比普通图层与提升成 Composited Layer 之后的内存使用情况。可以发现差距还是比较明显的。

最小化提升

通过上文的说明，我们知道 Composited Layer 并不是越多越好。尤其是，千万不要通过下面的代码提升页面的所有元素，这样的资源消耗将是异常恐怖的。

* {
  /* or transform: translateZ(0) */
  will-change: transform;
}

最小化提升，就是要尽量降低页面 Composited Layer 的数量。为了做到这一点，我们可以不把像 will-change 这样能够提升节点为 Composited Layer 的属性写在默认状态中。至于这样做的原因，我会在下面讲解。

看这个例子，我们先把 will-change 属性写在默认状态里；然后，再对比去掉这个属性后渲染的情况。

.box {
  width: 100ox;
  height: 100px;
  background-color: #f00;
  will-change: transform;
  transition: transform 0.3s;
}
.box:hover {
  transform: scale(1.5);
}

使用 will-change 属性提升的 Composited Layer：

普通图层：

我们发现区别仅在于，动画的开始和结束，会触发重绘；而动画运行的时候，删除或使用 will-change 是没有任何分别的。

我们在构建 Graphics Layer Tree 的时候讲到过这样一条理由：

对 opacity、transform、fliter、backdropfilter 应用了 animation 或者 transition（需要是 active 的 animation 或者 transition，当 animation 或者 transition 效果未开始或结束后，提升的 Composited Layer 会恢复成普通图层）。

这条理由赐予了我们动态提升 Composited Layer 的权利；因此我们应该多利用这一点，来减少不必要的 Composited Layer 的数量。

防止层爆炸

我们在 Graphics Layer Tree 中介绍过层爆炸，它指的是由于重叠而导致的大量额外 Composited Layer 的问题。浏览器的层压缩可以在很大程度上解决这个问题，但是，有很多特殊的情况，会导致 Composited Layer 无法被压缩；这就很可能产生一些不在我们预期中的 Composited Layer，也就是说还是会出现大量额外的 Composited Layer。

在层压缩这一节，我们已经给出了使用层压缩优化的例子，这里就不再重复了。下面再通过解决一个无法被层压缩的例子，来更为深入的了解如何防止层爆炸。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
    .animating {
      width: 300px;
      height: 30px;
      line-height: 30px;
      background-color: #ff0;
      will-change: transform;
      transition: transform 3s;
    }

    .animating:hover {
      transform: translateX(100px);
    }

    ul {
      padding: 0;
      border: 1px solid #000;
    }

    .box {
      position: relative;
      display: block;
      width: auto;
      background-color: #00f;
      color: #fff;
      margin: 5px;
      overflow: hidden;
    }

    .inner {
      position: relative;
      margin: 5px;
    }
  </style>
  <title>性能优化</title>
</head>

<body>
  <div class="animating">动画</div>
  <ul>
    <li class="box">
      <p class="inner">提升成合成层</p>
    </li>
    <li class="box">
      <p class="inner">提升成合成层</p>
    </li>
    <li class="box">
      <p class="inner">提升成合成层</p>
    </li>
    <li class="box">
      <p class="inner">提升成合成层</p>
    </li>
    <li class="box">
      <p class="inner">提升成合成层</p>
    </li>
  </ul>
</body>
</html>

当我们的鼠标移入 .animating 元素的时候，通过查看 Layers 面板，可以很清晰的看到出现的大量 Composited Layer。

这个例子虽然表面上看起来没有发生重叠；但是，因为在运行动画的时候，很可能与其他元素造成重叠，所以 .animating 元素会假设兄弟元素在一个 Composited Layer 之上。这时，又因为 .box 元素设置了 overflow: hidden; 导致自己与 .animating 元素有了不同的裁剪容器（Clipping Container），所以就出现了层爆炸的现象。

解决这个问题的办法也很简单，就是让 .animating 元素的 z-index 比其他兄弟元素高。因为 Composited Layer 在普通元素之上，所以也就没有必要提升普通元素，修正渲染顺序了。这里我在顺便多说一句，默认情况下 Composited Layer 渲染顺序的优先级是比普通元素高的；但是在普通元素设置 position: relative; 之后，因为层叠上下文，并且在文档流后面的原因，所以会比 Composited Layer 的优先级高。

.animating {
  position: relative;
  z-index: 1;
  ...
}

当然，如果兄弟元素一定要覆盖在 Composited Layer 之上，那我们也可以把 overflow: hidden; 或者 position: relative; 去掉，来优化 Composited Layer 创建的数量或者直接就不创建 Composited Layer。

参考资料

无线性能优化：Composite
坚持仅合成器的属性和管理层计数
简化绘制的复杂度、减小绘制区域
CSS Animation性能优化
使用CSS3 will-change提高页面滚动、动画等渲染性能
CSS3硬件加速也有坑
深入理解CSS中的层叠上下文和层叠顺序

总结

本文首先讲了渲染需要构建的一些树，然后通过这些树与像管道各部分的紧密联系，整理了一些优化措施。例如，我们对合成所进行的优化措施，就是通过 Graphics Layer Tree 来入手的。

优化也不能盲目去做，例如，提升普通图层为 Composite Layer 来说，使用不当，反而会造成非常严重的内存消耗。应当善加利用 Google 浏览器的调试控制台，帮助我们更加详尽的了解网页各方面的情况；从而有针对性的优化网页。

文章参考了很多资料，这些资料都在每一节的末尾给出。它们具有非常大的价值，有一些细节，本文可能并没有整理，可以通过查看它们来更为深入的了解。

推荐

关注公众号：前端开发博客，后台回复以下关键字：

回复「1024」领取前端进阶资料
回复「电子书」领取海量面试和JS资料
回复「资料」领取前端群分享及培训机构的资料
回复「Vue」获取 Vue 精选文章
回复「面试」获取面试精选文章
回复「JS」获取 JavaScript 精选文
回复「CSS」获取 CSS 精选文章

 
    “在看”吗？在看就点一下吧

本文分享自微信公众号 - 前端开发博客（caibaojian_com）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

微信关注我们

原文链接：https://my.oschina.net/frontendblog/blog/4722853

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

我是这样给阿里面试官吹 ConcurrentHashMap的

因为上篇文章HashMap已经讲解的很详细了，因此此篇文章会简单介绍思路，再学习并发HashMap就简单很多了，上一篇文章中我们最终知道HashMap是线程不安全的，因此在老版本JDK中提供了HashTable来实现多线程级别的，改变之处重要有以下几点。 ❝ HashTable的 put, get, remove等方法是通过 synchronized来修饰保证其线程安全性的。 HashTable是不允许key跟value为null的。问题是 synchronized是个关键字级别的重量锁，在get数据的时候任何写入操作都不允许。相对来说性能不好。因此目前主要用的 ConcurrentHashMap来保证线程安全性。 ❞ ConcurrentHashMap主要分为JDK<=7跟JDK>=8的两个版本，ConcurrentHashMap的空间利用率更低一般只有10%～20%，接下来分别介绍。 JDK7 先宏观说下JDK7中的大致组成，ConcurrentHashMap由Segment数组结构和HashEntry数组组成。Segment是一种可重入锁，是一种数组和链表的结构，...

2020-11-18

571

trans_service模块依赖于系统OS提供的网络socket服务，向认证模块提供认证通道管理和认证数据的收发；向业务模块提供session管理和基于session的数据收发功能，并且通过GCM模块的加密功能提供收发报文的加解密保护。初始化的时机在分布式软总线的设计中，trans_service模块是在authmanager模块中被初始化的，而authmanager模块又被discovery模块初始化，因此设备在向外发布本设备信息的过程中，即完成了这三个相互关联模块的初始化动作。 authmanager模块中存在StartBus()函数，其中，StartListener()函数负责为认证模块提供通道完成初始化，StartSession()函数负责初始化业务的session管理：认证通信与业务session的实现原理类似，本文中我们以简单一些的认证通信代码为例子，说明典型的处理流程。初始化入口 – StartListener StartListener()函数的底层存在对应不同版本平台的适配函数，这印证了鸿蒙OS各部分解耦的模块化设计思想，针对不同的硬件设备，组合成最...

2020-11-18

687

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。