性能优化

    • 原文地址:React Performance Fixes on Airbnb Listing Pages
    • 原文作者:Joe Lencioni
    • 译文出自:掘金翻译计划
    • 本文永久链接:https://github.com/xitu/gold-miner/blob/master/TODO/recent-web-performance-fixes-on-airbnb-listing-pages.md
    • 译者:木羽 zwwill
    • 校对者:tvChan, atuooo(史金炜)

    针对 Airbnb 清单页的 React 性能优化

    简要:可能在某些领域存在一些触手可及的性能优化点,虽不常见但依然很重要

  • 动画相关概念

    • 帧:动画过程中每一个静止的状态,每一张静止的图片
    • 帧率:刷新频率,每秒钟播放的帧数,FPS(frame per second),单位是Hz
    • 帧时长:每一帧停留的时间,如60FPS的动画帧时长约为16.7ms,意味着浏览器必须在16.7ms内绘制完这一帧
    • 硬件加速:硬件有三个处理器:CPU、GPU和APU(声音处理器)。他们通过PCI/AGP/PCIE总线交换数据。GPU在浮点运算、并行计算等部分计算方面,明显高于CPU的性能。硬件加速即利用GPU进行动画的计算
    • 缓动:最普通的动画就是匀速的动画,每次增加固定的值。缓动就是用来修改每次增加的值,让其按照不规律的方式增加,实现动画的
  • 原文地址:http://javascript.info/onload-ondomcontentloaded

    HTML页面的生命周期有以下三个重要事件:

    • DOMContentLoaded —— 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是像是 <img> 和样式表等外部资源可能并没有下载完毕。
    • load —— 浏览器已经加载了所有的资源(图像,样式表等)。
    • beforeunload/unload —— 当用户离开页面的时候触发。

    每个事件都有特定的用途

    • DOMContentLoaded —— DOM 加载完毕,所以 JS 可以访问所有 DOM 节点,初始化
  • 问题

    先来看一下 FOIT(Flash of Invisible Text) 的表现(GitHub 只会播放一次 GIF,拖到一个新窗口刷新可重放):

    1615b236f18d9e87

    简单来说 FOIT 就是文字使用了自定义的 font-face,所以导致在自定义的字体加载完毕在之前,对应的文字会显示一片空白。
    在老版本的浏览器中,会优先显示 font-family 中已经可以显示的候选字体,然后当 font-face 的字体加载完毕后,再变成 font-face 的字体,这被称作 FOUT(Flash of Unstyled Text)

    下面是对 FOUT 和 FOIT 的一段英文解释,比较全面:

    Remember F

  • 前言

    本文整理自:Google Developers 及 高性能 JavaScript,再加上了一些个人对其中提到的知识点的理解与补充。前端性能优化涉及很多方面,本文仅针对高性能渲染进行分析。

    单个帧的渲染流程 —— 像素管道

    目前,大多数设备的刷新率都是 60 FPS,如果浏览器在交互的过程中能够时刻保持在 60FPS 左右,用户就不会感到卡顿,否则,就会影响用户的体验。

    下图为浏览器运行的单个帧的渲染流水线,称为像素管道,如果其中的一个或多个环节执行时间过长就会导致卡顿。像素管道是作为开发者能够掌握的对帧性能有影响的部分,其他部分由浏览器掌握,我们无法控制。我们的目标就是就是尽快完成这些环