性能优化

    • 原文地址: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进行动画的计算
    • 缓动:最普通的动画就是匀速的动画,每次增加固定的值。缓动就是用来修改每次增加的值,让其按照不规律的方式增加,实现动画的
  • 简介

    模块源代码位置 github\base-component\packages\monitor

    日志服务器地址: http://120.92.113.173:5601/app/kibana#/discover?_g=()&_a=(columns:!(_source),index:'front-*',interval:auto,query:(match_all:()),sort:!('@timestamp',desc))

    该前端监控模块适用于WPS客户端内的前端项目,且需保证能正常进行双向信号桥通信,模块依赖的接口是:

    • getAppInfo 获取客户端信息
    • getTimeStamp
  • 原文地址

    衡量网站的性能的指标有很多,其中有项重要的指标就是网站的首屏时间,为此前端工程师们都是绞尽脑汁想尽办法进行优化自己的应用,诸如像服务端渲染,懒加载,CDN 加速,ServiceWorker 等等方法,今天介绍的 preload/prefetch 是一种简单,但却事半功倍的优化手段。

    基本用法

    在网络请求中,我们在使用到某些资源比如:图片,JS,CSS 等等,在执行之前总需要等待资源的下载,如果我们能做到预先加载资源,那在资源执行的时候就不必等待网络的开销,这时候就轮到 preload 大显身手的时候了。

    preload 提前加载

    preload 顾名思义就是一种预加载的方式,它通过声

  • 初学者对React可能满怀期待,觉得React可能完爆其它一切框架,甚至不切实际地认为React可能连原生的渲染都能完爆——对框架的狂热确实会出现这样的不切实际的期待。让我们来看看React的官方是怎么说的。React官方文档在Advanced Performanec这一节,这样写道:

    One of the first questions people ask when considering React for a project is whether their application will be as fast and responsive as an equivalent non