tl;dr:

想要保持页面的快速运行,你需要仅加载当前页面所需的 JavaScript 代码。优先考虑用户所需,之后运用代码分离懒加载其他内容。

Is it happening - 在这个时期,你可以开始往屏幕上分发内容(页面是否开始跳转?服务端是否开始响应?)。

Is it useful - 在这个时期,你已经完成了文本或内容的绘制,并允许用户从其中获取价值与有用信息。

Is it usable - 在这个时期,用户可以与页面进行实际操作,并能产生一些有意义的交互。

页面交互性解释与建议

JavaScript 的实际成本所在,则不得不说说的浏览器的线程。当浏览器在处理你在 JavaScript 中定义的各种事件时,它可能同时在该线程上还在处理用户的输入,而这就是我们所说的主线程。

通过 WebPageTest 和 Lighthouse (源)测得到移动端 Google News 的 Time-to-Interactive 数据显示,不同机型在完成交互性上存在巨大差异,高端机型需花费7秒才能让页面具备交互性,而针对同一场景低端机型则需要55秒之久。我们都希望页面的可交互性可以越快越好,但怎样为交互性定义一个好的目标呢?

当我们在浏览器中输入一串 URL,实际都发生了些什么?

当一个请求发送给了服务端,它会返回一些标记文件。之后,浏览器则解析这些标记(通常是 HTML),并从中找到必要的 CSS,JavaScript 与图片资源引用,然后向服务端再次获取这些额外资源并处理。

橙色代表的是解析 JavaScript 所用的时间,黄色代表的是编译耗时。两者加到一起占了大部分页面 JavaScript 执行的30%的时间。

并不是所有网站都需要在2G网络或者低端机型上表现良好,这取决于你的实际用户群,这也是当下大家一直都在说的“用数据说话”。但请记住,即便高端机型用户也可能会遇到弱网环境,所以 JavaScript 下载时间至关重要,请善用压缩技术

// 优化前
import OtherComponent from './OtherComponent';
const MyComponent = () => (
 <OtherComponent/>
);
// 优化后
import Loadable from 'react-loadable';
const LoadableOtherComponent = Loadable({
 loader: () => import('./OtherComponent'),
 loading: () => <div>Loading...</div>,
});
const MyComponent = () => (
 <LoadableOtherComponent/>
);

PRPL 即推送,渲染,预缓存和懒加载。结合 service worker 使用更加。例如这周给师兄完善 PWA Demo 的一个小功能时,就用到了 React 在服务端渲染时采用的 renderToString 方法,在这个过程中,就是利用 HTML 在未加载 JavaScript 等资源的情况 下使用 App Shell 优化页面首次访问时的白屏体验。还挺有意思,有时间可以细说一下这个事。

监控
  • Long Tasks — 利用这个 API 你可以收集那些耗时超过50毫秒、可能会阻塞主线程的任务(及其脚本),并将其数据记录用于后续分析

  • First Input Delay (FID) 是一个度量标准,用于衡量用户首次与你的网站互动(即点击按钮时)到浏览器实际能够响应该互动的时间。虽然它还是一个新标准,但已经有 polyfill 实现。

The Cost of JavaScript --------引用的更多相关文章

  1. JavaScript引用是如何工作的

    原文链接:https://www.sitepoint.com/how-javascript-references-work/ 摘要:JavaScript中没有指针,并且JavaScript中的引用与我 ...

  2. [译]the cost of javascript in 2018(1)

    前言 为了构建交互性网站,我们需要发送js给我们的用户,但很多情况下,我们使用了太多js. 在移动端,经常看到只加载了个点击链接或者滚动不了的情况. 实话说,js仍然是移动端最昂贵的资源,因为其在很大 ...

  3. JavaScript引用方法说明

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 我所犯的JavaScript引用错误

    近期在w3cschool学习JavaScript和php--学完后,开始帮一哥们友情写网站.但是在使用ajax和Jquery的时候发现,我自己写的脚本不能运行.捣鼓了半天,没有发现任何语句错误.调试器 ...

  5. JavaScript 引用数据类型

    目录 1. 问题描述 2. 原因分析 3. React 中的引用数据类型 4. 业务场景 5. 参考资料 1. 问题描述 今天在写一个代码题时候, 有一个BUG 导致自己停滞好久, 该BUG 可以描述 ...

  6. 前端优化分析 之 javascript引用位置优化

    在很多优化法则中都提到,尽量将javascript放到页面底部,这是为什么呢 我通过firebug进行了下简单的分析 看下图  本页面首尾都存在javascript代码 我们分析得出 1.整个页面文档 ...

  7. JavaScript 引用【转】

    从一个例子说起: var m ={a:’a’, b:’b’}; var n=m; n.c=’c’; 那么在这个时候 , m.c 也会变成 ’c’! 这个问题在我最开始学习 JS 语言时个人一直处于概念 ...

  8. javascript引用"bug"带来的"继承"

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. JavaScript 引用错误

    在学习vue时 出现无法实现效果原始设置 <script src="js/lib/vue2.min.js"/><script src="js/lib/v ...

随机推荐

  1. Oracle系统权限与对象权限

    oracle权限分为: 系统权限: 允许用户执行特定的数据库动作,如创建表.创建索引.连接实例等. 对象权限: 允许用户操纵一些特定的对象,如读取视图,可更新某些列.执行存储过程等. 系统权限 超过一 ...

  2. spark-初阶①(介绍+RDD)

    spark-初阶①(介绍+RDD) Spark是什么? Apache Spark 是一个快速的, 多用途的集群计算系统, 相对于 Hadoop MapReduce 将中间结果保存在磁盘中, Spark ...

  3. vue 事件中的 .native

    vue组件添加事件@click.native native是什么? .native - 监听组件根元素的原生事件. 主要是给自定义的组件添加原生事件. 官网的解释: 你可能想在某个组件的根元素上监听一 ...

  4. hdu 4471 区间条件统计 区间 不超过 x 的元素的个数

    题目传送门//res tp hdu 目的 对长度为n的区间,m次询问,每次提供一个区间两端点与一个值x,求区间内不超过x的元素个数 n 1e5 m 1e5 ai [1,1e9] (i∈[1,n]) 多 ...

  5. PHP生成中文验证码并检测对错实例

    PHP生成中文验证码并检测对错实例,中文验证码的例子还是比较少的,今天给大家分享一下,支持自定义中文.字体.背景色等 生成验证码,注意font字体路径要对,否则显示图片不存在 session_star ...

  6. django时区与时间差的问题

    时区的正确配置方式: # 这里还可以配置成中文 一般用不到 LANGUAGE_CODE = 'en-us' # TIME_ZONE = 'UTC' TIME_ZONE = 'Asia/Shanghai ...

  7. luffy前台配置

    目录 axios前后台交互 cokies操作 element-ui页面组件框架 bootstrap页面组件框架 前端主页 图片准备 页头组件:components/Header.vue 轮播图组件:c ...

  8. 《深入理解 Java 虚拟机》学习 -- 垃圾收集器

    <深入理解 Java 虚拟机>学习 -- 垃圾收集器 1. Serial 收集器(新生代) 含义: 单线程收集器. 缺点: 进行垃圾收集时,必须暂停其他所有的工作线程. 优点: 简单而高效 ...

  9. [js]$.ajax标准写法

    $.ajax({     url:"http://www.microsoft.com",    //请求的url地址     dataType:"json",  ...

  10. 关于spring中AOP的几件小事

    0.AOP简介 AOP(Aspect-Oriented Programming,面向切面编程):是一种新的方法论,是穿透OOP的补充. AOP的主要编程对象是切面(aspect),而切面模块化横切关注 ...