JS的执行和加载(笔记)
2024-08-25 05:51:01
无论当前JS代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。JS执行过程耗时越久,浏览器等待响应用户输入的时间就越长。当浏览器遇到内嵌的JS代码时会停止处理页面,先执行JS代码,然后再继续解析和渲染页面。同样的情况也发生在外链的JS文件中,浏览器必须先花时间下载外链文件中的代码,然后解析并执行它,在这个过程中,页面的渲染和用户互交完全被阻塞。从IE8、Firefox3.5、Safari4和Chrome2开始都允许并行下载JS文件,因此<script>标签在下载外部资源时不会阻塞其他的<script>标签。遗憾的是JS下载过程仍然会阻塞其他资源的下载(优化:①由于脚本阻塞页面其他资源的下载,因此推荐将所有<script>标签尽可能放到<body>标签底部,以尽量减少对整个页面下载的影响)。由于每个<script>标签初始下载时都会阻塞页面渲染,并且外链JS文件还要考虑HTTP请求会带来额外的性能开销,所以(优化:②减少页面包含的<script>标签数量有助于改善这一情况,下载单个100KB的JS文件比下载5个20KB的JS文件更快)。
使用XHR(XMLHttpRequest)对象下载JS代码并注入页面中可以做到无阻塞的下载JS脚本:首先创建一个XHR对象,然后下载JS文件,接着用一个动态<script>元素将JS代码注入页面。这个方法的主要优点是,你可以下载不立即执行的JS代码,由于代码返回在<script>标签之外,所以下载后不会自动执行,而且所有现代浏览器中都不会引发异常。最主要的限制是(JS文件必须与页面放置在同一个域内,不能从CDN下载)。
//此代码向服务器发送一个获取script1.js文件的GET请求。
//Onreadystatechange事件处理函数检查readyState是不是4,然后检查HTTP状态码是不是有效,如果有效,那么创建一个新的<script>元素,
//将它的文本属性设置为从服务器接收到的responseText字符串,这样做实际上会创建一个带有内联代码的<script>元素。一旦新<script>元素被添加到文档,代码将被执行并准备使用。
var xhr = new XMLHttpRequest();
xhr.open("get", "script1.js", true);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
var script = document.createElement ("script");
script.type = "text/javascript";
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
};
xhr.send(null);
最新文章
- 一些常用的方法(1)--去除DataTable中的重复数据
- Qt之QSequentialAnimationGroup
- MyBatis之五:动态sql语句
- Spring HTTP invoker 入门
- oracle行号排序问题
- JS页面赋值
- android和Vitamio使用比较
- HDU 5868 Different Circle Permutation(burnside 引理)
- 【.net 深呼吸】项目中是否有必要删去多余的引用
- 面试被问烂的 Spring IOC(求求你别再问了)
- Flask Web中文教程
- centos 7创建ss服务(方式一)
- TypeError: __init__() got an unexpected keyword argument &#39;t_command&#39;
- ASP.NET Web Forms - 网站导航(Sitemap 文件)
- vue组件库(五):icon管理
- L246‘’
- opengl库学习
- 使用代码查看Nutch爬取的网站后生成的SequenceFile信息
- ASP.NET站点Windows身份验证集成AD域,非LDAP
- 201621123023《Java程序设计》第10周学习总结