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 ...
随机推荐
- vue 动态添加对象属性
昨天使用vue发现直接给对象添加属性,并不能触发响应更新,后来看文档发现要通过this.$set 函数动态添加才可用,eg: this.$set( obj, key, data)
- nodejs+gulp+webpack基础知识
nodejs+gulp+webpack基础知识 2019年08月22日 11:49:40 天府云创 阅读数 22 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...
- 使用python操作kafka
使用python操作kafka目前比较常用的库是kafka-python库 安装kafka-python pip3 install kafka-python 生产者 producer_test.py ...
- 你不知道的css各类布局(四)之响应式布局
响应式布局 概念 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局 布局特点 响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC.手机.手表.冰箱的Web浏览器等等)都能显示出令人满意的效 ...
- Oracle连接字符串总结(转)
Oracle XE 标准连接 Oracle XE(或者"Oracle Database 10g Express Edition")是一个简单免费发布的版本. 以下是语法格式: Dr ...
- ObjectMapper用于将java对象转换为json格式数据以及JSONObject对象解析json格式数据
ObjectMapper objectMapper = new ObjectMapper(); //反序列化的时候如果多了其他属性,不抛出异常 objectMapper.configure(Deser ...
- js点击发送验证码 xx秒后重新发送
用于一些注册类的场景,点击发送验证码,xx秒后重新发送. 利用 setTimeout 方法,xx秒后执行指定的方法,修改button的属性值,disabled为true时为灰色,不可点击. <! ...
- macbook打印出现乱码解决方案
系统偏好设置 --> 打印机与扫描仪 --> + (左下角的加号) --> IP --> 输入打印机的ip地址,然后最下面的 “使用选择” 中选中 普通PCL 打印机,(默认的 ...
- Java高并发程序设计学习笔记(十):并发调试和JDK8新特性
转自:https://blog.csdn.net/dataiyangu/article/details/87631574 多线程调试的方法使用Eclipse进行多线程调试线程dump及分析分析死锁案例 ...
- Windows 系统自动登录配置
1. open regedit 2. HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Winlogon 3.在打开的项右 ...