Performance面板看js加载
概述
前几天研究了一个下开发者工具的performance面板,挺有意思的。文件的加载顺序又对页面性能有着至关重要的影响。所以我用performance面板研究了以下几种配置的加载顺序,把过程和结果记录下来,供以后开发时参考,相信对其他人也有用。
- js放在body最后的加载。
- js放在body前面的加载。
- async,defer的加载。
- setTimeout的加载。
- onload事件的加载。
- DOMContentLoaded事件的加载。
- onreadystatechange事件的加载。
- 加入jquery的加载。
performance面板。
利用开发者工具的performance面板可以查看首屏时间和加载情况。方法是:
- 打开chrome开发者工具的performance面板。
- 点击左上角实心小圆点右边的刷新图标。(快捷键:Ctrl + Shift + E)
js放在body最后
代码如下:
//haha.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="haha.css">
</head>
<body>
<div id="haha"></div>
<script type="text/javascript" src="haha.js"></script>
</body>
</html>
//haha.css
div {
width: 800px;
height: 800px;
background-color: green;
font-size: 300px;
}
//haha.js
var a = 1;
while(a < 1000000000) {
a++;
}
performance面板部分截图如下:
图一表示一直到2800ms才开始渲染首屏;图二表示css先加载,js后加载,他们是同时加载的,并且虽然js先加载完,但是并没有执行,而是等到css加载完并执行之后再执行的,这也符合了谁写在前面谁先执行的规范。
从第一张图可以得出,js的运行阻塞了首屏的渲染,一直到2800ms才开始渲染首屏。这表示js的运行阻塞了渲染。
从第二张图可以得出,css的下载没有阻塞js的下载,并且谁写在前面谁先执行。
js放在body前面
代码如下:
//haha.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="haha.js"></script>
<link rel="stylesheet" type="text/css" href="haha.css">
</head>
<body>
<div id="haha"></div>
</body>
</html>
//haha.css
div {
width: 800px;
height: 800px;
background-color: green;
font-size: 300px;
}
//haha.js
var a = 1;
while(a < 1000000000) {
a++;
}
performance面板部分截图如下:
图一表示一直到2800ms才开始渲染首屏;图二表示css先加载,js后加载,他们是同时加载的,并且虽然js先加载完,但是并没有执行,而是等到css加载完并执行之后再执行的,这也符合了谁写在前面谁先执行的规范。
从第一张图可以得出,js的运行阻塞了首屏的渲染,一直到2800ms才开始渲染首屏。这符合我们的预期。
从第二张图可以得出,js的下载并没有阻塞css的下载,当js在下载的时候也会下载css。但为什么css的下载这么慢???因为js在下载完毕之后开始执行,在js执行的时候阻塞了css的下载!所以css的下载暂停了,一直等到js执行完毕之后再继续下载。
所以从上面2个实例可以得出:
- js在下载的时候不会阻塞页面的下载和渲染(可能会阻塞渲染?)。
- js在执行的时候会阻塞页面的下载和渲染。
另外,css的执行和下载不会阻塞任何事情。还有一点需要注意的是,js在执行的时候可能不会阻塞图片等资源的下载,而且根据浏览器的优化,js在执行的时候究竟会不会阻塞资源下载还是要看浏览器的处理,但是可以肯定的是会阻塞页面的渲染。
那么如何让js不阻塞页面的渲染,提高首屏时间呢?我们继续进行实例。
defer
我们给script标签加上defer。代码如下:
//haha.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script defer type="text/javascript" src="haha.js"></script>
<link rel="stylesheet" type="text/css" href="haha.css">
</head>
<body>
<div id="haha"></div>
</body>
</html>
//haha.css
div {
width: 800px;
height: 800px;
background-color: green;
font-size: 300px;
}
//haha.js
var a = 1;
while(a < 1000000000) {
a++;
}
performance面板部分截图如下:
从第一张图中可以看出,首屏时间并没有变化。
从第二张图中可以看出,js并没有在加载完成之后立刻运行,而且css下载完成之后都没有运行,而是等到css执行完毕之后才运行。这和js放在body最下面的效果完全一样。
async
我们给script标签加上async。代码如下:
//haha.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script async type="text/javascript" src="haha.js"></script>
<script async type="text/javascript" src="haha2.js"></script>
<link rel="stylesheet" type="text/css" href="haha.css">
</head>
<body>
<div id="haha"></div>
</body>
</html>
//haha.css
div {
width: 800px;
height: 800px;
background-color: green;
font-size: 300px;
}
//haha.js
var a = 1;
while(a < 1000000000) {
a++;
}
//haha2.js
var a = 1;
while(a < 1000000000) {
a++;
}
performance面板部分截图如下:
从第一张图中可以看出,首屏时间并没有变化。
从第二张图中可以看出,虽然haha2.js后加载,但是haha2.js先执行,并且都没有阻塞css的下载和执行,这代表都是在css下载和执行完毕之后才执行的。
setTimeout
我们给haha.js加上setTimeout。代码如下:
//haha.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="haha.css">
</head>
<body>
<div id="haha"></div>
<script type="text/javascript" src="haha.js"></script>
</body>
</html>
//haha.css
div {
width: 800px;
height: 800px;
background-color: green;
font-size: 300px;
}
//haha.js
setTimeout(function() {
var a = 1;
while(a < 1000000000) {
a++;
}
}, 2000);
performance面板部分截图如下:
可以看到,首屏时间得到极大优化,大约100ms就出现首屏,并且直到2000ms才开始执行js。
所以有很多人利用setTimeout进行延迟加载,延迟几秒后再通过js插入script标签进行加载js。但是这样有一个确定,就是我们精确地确定这个延迟时间。
onload
我们给haha.js加上onload。代码如下:
//haha.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="haha.css">
</head>
<body>
<div id="haha"></div>
<script type="text/javascript" src="haha.js"></script>
</body>
</html>
//haha.css
div {
width: 800px;
height: 800px;
background-color: green;
font-size: 300px;
}
//haha.js
window.onload = function () {
var a = 1;
while(a < 1000000000) {
a++;
}
}
performance面板部分截图如下:
可以看到,不仅首屏时间得到优化,而且js很早就开始执行了,大约从55ms就开始加载js。
DOMContentLoaded
那给haha.js加上DOMContentLoaded事件呢?。代码如下:
//haha.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="haha.css">
</head>
<body>
<div id="haha"></div>
<script type="text/javascript" src="haha.js"></script>
</body>
</html>
//haha.css
div {
width: 800px;
height: 800px;
background-color: green;
font-size: 300px;
}
//haha.js
document.addEventListener("DOMContentLoaded", function(event) {
var a = 1;
while(a < 1000000000) {
a++;
}
});
performance面板部分截图如下:
可以看到,虽然在DOMContentLoaded事件之后(大约51.5ms)立即执行js,但是这个时候DOMContentLoaded事件并没有结束,直到js执行完成之后才结束,然后才进行页面渲染。大大延迟了首屏时间。
onreadystatechange
那给haha.js加上onreadystatechange事件呢?。代码如下:
//haha.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="haha.css">
</head>
<body>
<div id="haha"></div>
<script type="text/javascript" src="haha.js"></script>
</body>
</html>
//haha.css
div {
width: 800px;
height: 800px;
background-color: green;
font-size: 300px;
}
//haha.js
document.onreadystatechange = function () {
if(document.readyState === "complete") {
var a = 1;
while(a < 1000000000) {
a++;
}
}
}
performance面板部分截图如下:
可以看到,首屏时间得到优化,而且在readyState为complete之后(大约48ms)立即执行js,但是这个时候并不能判断DOM是否已经加载完成。
加入jquery
我先引入jquery再引入haha.js。代码如下:
//haha.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="haha.css">
</head>
<body>
<div id="haha"></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="haha.js"></script>
</body>
</html>
//haha.css
div {
width: 800px;
height: 800px;
background-color: green;
font-size: 300px;
}
//haha.js
var a = 1;
while(a < 1000000000) {
a++;
}
performance面板部分截图如下:
可以看到,首屏时间奇迹般的得到了优化。就算我们并没有使用ready方法,但是也得到了优化。可能jquery里面进行了某些优化处理吧。
而且,经过试验,当haha.js里面用DOMContentLoaded事件时,首屏时间也奇迹般的得到了优化。所以我猜测,jquery对DOMContentLoaded事件进行了处理,让他提前结束???
总结
- 谁先加载谁先执行,除非async。
- defer没卵用。
- 有jquery用jquery,没jquery用onload,千万别单独使用DOMContentLoaded。(其中的机制可要好好琢磨了。)
Performance面板看js加载的更多相关文章
- Arcgis for js加载百度地图
看转:https://blog.csdn.net/qq_41046162/article/details/80248281 通过学习了一段时间的arcgis for js,让我来讲一下如何在arcgi ...
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...
- (转)JS加载顺序
原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)——第一篇 Javascrip ...
- 使用js加载图像和setDataXML()加载数据
使用js加载图像和setDataXML()加载数据 前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<E ...
- 记录一个bootstrap因js加载顺序导致的问题(tstrap-table-mobile.min.js:7 Uncaught TypeError: Cannot read property 'defaults' of undefined)
问题描述: 网上找了会没看到答案,然后看了下源码,发现也没有问题,想到js加载的顺序,改了下,发现问题没了. 正确的顺序: 我之前把 <script src="/js/plugins/ ...
- javascript不依赖JS加载顺序事件对象实现
背景: 在现在WEB开发中,稍复杂一点的页面,都会涉及到多个模块,尤其是类似seajs.LABjs.requireJS等模块工具出来后,前端开发者分模块开发已经慢慢变成一种习惯了,但是多个模块间的常常 ...
- (转) Arcgis for js加载百度地图
http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...
- 组件推荐Forloop.HtmlHelpers 用来实现MVC的js加载顺序
最近在开发的时候遇到js加载顺序的问题,layui在底部声明了js,但是我想在页面其他地方使用分布视图,分布视图内有自己的js逻辑,发现不能执行,一看就发现,这里的js应该加在layui后面执行才能有 ...
- 初踩坑JS加载与audio接口:点击头像开始/暂停背景音乐
背景 封楼期间难得空闲,也静不下心学习,空闲之余萌生了重做引导单页的想法.因为之前都是扒站(某大公司游戏官网)+小改,一来虽然很炫酷,但本人水平有限,仍有很大一部分JS无从下手,甚至是看不懂|-_-| ...
随机推荐
- spring mvc返回json格式和json字符串
首先有必要说一下,json和json字符串是不一样的,后者是一个字符串.而json是一个对象 当然如果调用位置是后台程序这几乎没有区别,因为在后台,无论什么格式数据,都是从响应流中读取字符串. 但是在 ...
- 最新ceph集群常用命令梳理
结合网络.官网.手动查询等多方渠道,整理ceph维护管理常用命令,并且梳理常规命令在使用过程中的逻辑顺序.另外整理期间发现ceph 集群的命令体系有点乱,详细情况各自体验. 一:ceph集群启动.重启 ...
- python虚拟环境的搭建
使用python虚拟环境作用是项目与项目之间相互隔离,互相不受影响,比如当需要同时部署A.B两个项目时,A项目依赖C库的1.0版本,B项目依赖C库的2.0版本,假如不使用虚拟环境隔离A项目和B项目就很 ...
- 数组中的逆序对(python)
题目描述 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P.并将P对1000000007取模的结果输出. 即输出P%1000 ...
- HDU-4725.TheShortestPathinNyaGraph(最短路 + 建图)
本题思路:主要是建图比较麻烦,因为结点可以在层与层之间走动,也可以在边上进行走动,所以主要就是需要找到一个将结点和层统一化处理的方法. 所以我们就可以对于存在边的结点建边,层与层之间如果层数相差一也建 ...
- 微擎开发------day01
微擎的数据常量 $_GPC -- 全局请求变量 类型: array 说明: 合并请求参数, 包括 $_GET, $_POST, $_COOKIE的内容. 相同键名覆盖规则为 $_COOKIE 覆盖 ...
- RobotFramework 模拟http接口登录自动化脚本
RobotFramework 模拟自动化登录脚本思路: 先获取页面cookie值,然后根据cookie值加上请求体提交登录: 一.获取cookie: 以下脚本获取cookie值,并把改脚本封装为关键字 ...
- centos平台基于snort、barnyard2以及base的IDS(入侵检测系统)的搭建与测试及所遇问题汇总
centos平台基于snort.barnyard2以及base的IDS(入侵检测系统)的搭建与测试及所遇问题汇总 原创 2016年12月19日 01:20:03 标签: centos / snort ...
- RNA-seq数据综合分析教程 AKAP95
https://blog.csdn.net/l_yivs?t=1 RNA-seq数据综合分析教程 2 4,055 A+ 所属分类:Transcriptomics 收 藏 2 RNA-se ...
- SVN忘记登陆用户
C:\Users\Yaolz\AppData\Roaming\Subversion\auth 删除里面所有文件