性能

  • 李小龙说过:"天下武功,无坚不摧,唯快不破".(真的说过吗?)
    我想说的是:"世间网站,完美体验,唯快不破".(这个我承认我说过.)

    俗话说,时间就是生命,时间就是金钱,时间就是一切,人人都不想把时间白白浪费,一个网站,最重要的就是体验,而网站好不好最直观的感受就是这个网站打开速度快不快,卡不卡.

    当打开一个购物网站卡出翔,慢的要死,是不是如同心塞一样的感受,蓝瘦香菇,想买个心爱的宝贝都不能买,心里想这尼玛什么玩意.

    那么如何让我们的网站给用户最佳的体验呢?大环境我们不说,什么网络啊,浏览器性能啊,这些我们无法改变,我们能改变的就是我们码农能创造的,那就是代码的性能.代码精简,执行速度快,

  • 这篇文章主要关注的是资源加载之后的性能,因为大多数用户关注的不是应用如何加载而是具体的使用。所以要快速响应用户,尤其是无线端,我们有必要了解浏览器渲染性能。

    RAIL 性能模型

    首先一个需要思考的问题,怎样的网站是顺畅的?我们可能可以给一个大概的感觉,如:秒级响应等。其实,也可以给出一个很讨巧的答案:用户觉得顺畅的网站它就是顺畅的。因为几乎所有网站都希望将用户留在页面上,当然以用户为中心建立性能模型是必要的。下面是 Google 提出的一个以用户为中心的性能模型,里面的数据不是 Google 首创,有一些论文做类似研究(如:100ms 响应用户是一个很合适的时间等)。

    上图是 RAIL 的具

  • 不同于传统的 PC Web 或者是移动 WEB,在客厅盒子端,接大屏显示器下,许多能流畅运行于 PC 端、移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意。

    基于此,对于 Web 动画的性能问题,仅仅停留在感觉已经优化的OK之上,是不够的,想要在盒子端跑出高性能接近 60 FPS 的流畅动画,就必须要刨根问底,深挖每一处可以提升的方法。

    流畅动画的标准

    理论上说,FPS 越高,动画会越流畅,目前大多数设备的屏幕刷新率为 60 次/秒,所以通常来讲 FPS 为 60frame/s 时动画效果最好,也就是每帧的消耗时间为 16.67ms。

    直观感受,不同帧率的体验

    • 帧率能够
  • 前言

    本文核心分为两部分,第一部分讲述普通浏览器中能干的事情,第二部分则讲述在自建容器的背景下更能干的事情。

    文章内容会比较粗略,如果你对具体实现感兴趣,欢迎留言。

    一、止步于浏览器

    1.1 DNS Prefetch

    通常情况下,一个 html bundle 里面一般会有 script 等标签去加载其他的资源。浏览器在加载完 html 之后,就会去加载 script 等标签里面的内容,大多情况下,这种标签里 uri 的 host 和当前页面的往往是不相同的,那就会涉及到 DNS 解析的问题,会有一定程度的损耗。

    在 HTML 里面加入 DNS Prefetch 则会让浏览器提前进行 DNS

  • 本技巧来自这篇文章 -- How to animate box-shadow with silky smooth performance

    本文不是直译,因为觉得这个技巧很有意思很有用,遂起一文。

    box-shadow 在我们的工作中使用以及越来越多,伴随阴影的动画或多或少都有一点。假设,我们有下面这样一个盒子:

    div {
        width: 100px;
        height: 100px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    希望 hover 的时候,盒阴影从 box-shadow: 0 2px 4px rgba(0, 0, 0