前端周报第 23 期

2019-06-23 | 前端周报

# 教程

# 动画性能(一):浏览器渲染原理

作者介绍了浏览器的渲染原理,渲染包括计算、布局、绘制和合成四个阶段。如果某元素的 CSS 属性变化只触发合成(Composite)的话,那这个元素将被单独提取为一个层,将会利用到 GPU 硬件加速的优势。另外使用 will-change 也可以直接将一个元素提取为一个单独的层。

浏览器线程的工作流程

浏览器线程的工作流程

# 动画性能(二):优化 JavaScript

我们无法避免地会使用 JS 去操作动画,采取措施可以优化性能:使用 requestAnimationFrame,避免先写后读(会导致强制同步渲染),使用新的 Web API(Web Animation API & IntersectionObserver API)实现功能。

# 动画性能(三):使用开发者工具测试评估

作者介绍了使用 Chrome Dev Tools 来测试动画性能,比较了优化前后的测试结果。

# JavaScript 的 Longtask 会延迟 TTI 吗?

Longtask 对用户的交互体验不友好,使用 Chrome 的 Performance 面板可以找到耗时的任务,作者介绍了一些方法优化它们。

# 工具&资源

# JSVerbalExpressions

一个构建正则表达式的 JS 库,代码实例如下:

import VerEx from 'verbal-expressions';

// Create an example of how to test for correctly formed URLs
const tester = VerEx()
    .startOfLine()
    .then('http')
    .maybe('s')
    .then('://')
    .maybe('www.')
    .anythingBut(' ')
    .endOfLine();

// Create an example URL
const testMe = 'https://www.google.com';

// Use RegExp object's native test() function
if (tester.test(testMe)) {
    alert('We have a correct URL'); // This output will fire
} else {
    alert('The URL is incorrect');
}

console.log(tester); // Outputs the actual expression used: /^(http)(s)?(\:\/\/)(www\.)?([^\ ]*)$/

# eventemitter3

一个兼容 Node 标准的事件触发库。

# freezeframe.js

一个可以停止/开始 .gif 图片的库。