The Cost of JavaScript --------引用
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 --------引用的更多相关文章
- JavaScript引用是如何工作的
原文链接:https://www.sitepoint.com/how-javascript-references-work/ 摘要:JavaScript中没有指针,并且JavaScript中的引用与我 ...
- [译]the cost of javascript in 2018(1)
前言 为了构建交互性网站,我们需要发送js给我们的用户,但很多情况下,我们使用了太多js. 在移动端,经常看到只加载了个点击链接或者滚动不了的情况. 实话说,js仍然是移动端最昂贵的资源,因为其在很大 ...
- JavaScript引用方法说明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 我所犯的JavaScript引用错误
近期在w3cschool学习JavaScript和php--学完后,开始帮一哥们友情写网站.但是在使用ajax和Jquery的时候发现,我自己写的脚本不能运行.捣鼓了半天,没有发现任何语句错误.调试器 ...
- JavaScript 引用数据类型
目录 1. 问题描述 2. 原因分析 3. React 中的引用数据类型 4. 业务场景 5. 参考资料 1. 问题描述 今天在写一个代码题时候, 有一个BUG 导致自己停滞好久, 该BUG 可以描述 ...
- 前端优化分析 之 javascript引用位置优化
在很多优化法则中都提到,尽量将javascript放到页面底部,这是为什么呢 我通过firebug进行了下简单的分析 看下图 本页面首尾都存在javascript代码 我们分析得出 1.整个页面文档 ...
- JavaScript 引用【转】
从一个例子说起: var m ={a:’a’, b:’b’}; var n=m; n.c=’c’; 那么在这个时候 , m.c 也会变成 ’c’! 这个问题在我最开始学习 JS 语言时个人一直处于概念 ...
- javascript引用"bug"带来的"继承"
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JavaScript 引用错误
在学习vue时 出现无法实现效果原始设置 <script src="js/lib/vue2.min.js"/><script src="js/lib/v ...
随机推荐
- SQLite进阶-9.别名
我们可以暂时给表或者列重命名为另一个名字,称为别名,重命名只是临时运行时改变,不会改变数据库中的实际的名字. -- 语法 SELECT column_name AS column_alias_name ...
- Mysql中多表删除
1.从MySQL数据表A中把那些id值在数据表B里有匹配的记录全删除掉 DELETE t2 FROM A t1,B t2 WHERE t1.id = t2.id DELETE FROM t2 USIN ...
- Arthas查看Spring配置
在开发过程经常有同学问:"我这个配置更新提交了,怎么样知道项目中是否已经更新使用新值?" 常用的方法是添加日志打印该值判断是否更新.今天我们用Arthas来实现项目中配置值实时读取 ...
- python 安装PostgreSQL 模块:psycopg2
官方资料:http://www.psycopg.org/psycopg/docs/ 安装: yum -y install python-psycopg2 (安装的版本可能是2.0) pip insta ...
- Codeforces 1239A. Ivan the Fool and the Probability Theory
传送门 注意到连续两个格子如果有相同颜色那么一路过去的都可以确定 比如一开始染了这两个位置: 然后发现后面整片过去都可以确定: 对于横着的情况也是一样,然后就会发现不可能出现横着两个和竖着两个同时都有 ...
- Wannafly挑战赛24
A. 石子游戏 Alice和Bob在玩游戏,他们面前有n堆石子,对于这些石子他们可以轮流进行一些操作,不能进行下去的人则输掉这局游戏.可以进行两种操作:1. 把石子数为奇数的一堆石子分为两堆正整数个石 ...
- flume收集日志直接sink到oracle数据库
因为项目需求,需要保存项目日志.项目的并发量不大,所以这里直接通过flume保存到oracle 源码地址:https://github.com/jaxlove/fks/tree/master/src/ ...
- MapReduces计数实验
实验内容 现有某电商网站用户对商品的收藏数据,记录了用户收藏的商品id以及收藏日期,名为buyer_favorite1. buyer_favorite1包含:买家id,商品id,收藏日期这三个字段,数 ...
- java中成员变量和局部变量在内存中的分配
对于成员变量和局部变量:成员变量就是方法外部,类的内部定义的变量:局部变量就是方法或语句块内部定义的变量.局部变量必须初始化. 形式参数是局部变量,局部变量中基础数据类型的引用和值都存储在栈中,对象引 ...
- 09 Python之IO多路复用
四种常见IO模型 阻塞IO(blocking IO).非阻塞IO(nonblocking IO).IO多路复用(IOmultiplexing).异步IO(asynchronous IO) IO发生时涉 ...