无论当前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);

JS的执行和加载(笔记)的更多相关文章

  1. require.js模块化管理和加载js（按需加载）简单实例教学

    一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...

  2. js的执行环境学习笔记

    js执行全局代码或者执行函数代码的时候,首先进行准备,然后再执行.准备阶段,就是创建执行环境的阶段. 1.执行环境 当一段js代码遇到解释器的时候,比如浏览器打开一段js代码时候,第一件事并不是马上执 ...

  3. easyui中tab页中js脚本无法加载的问题及解决方法

    我发现tab页中<script src="xxx.js">方式加载的脚本没有生效,firebug看请求也没有请求相应的脚本文件. 单独在浏览器中打开tab页中的页面js ...

  4. js的并行加载以及顺序执行

    重新温习了下这段内容,发现各个浏览器的兼容性真的是搞大了头,处理起来很是麻烦. 现在现总结下并行加载多个js的方法: 1,对于动态createElement('script')的方式,对所有浏览器都是 ...

  5. 动态加载JS文件，并根据JS文件的加载状态来执行自己的回调函数

    动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...

  6. 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析

    来自   https://blog.csdn.net/u011088260/article/details/79563315   最近在研究HTML页面中JavaScript的执行顺序问题.在Java ...

  7. JS性能优化——加载和执行

    JavaScript 在浏览器中的性能,可以认为是开发者所面临得最严重的可用性问题.这个问题因JavaScript的阻塞特性变得复杂, 也就是说当浏览器在执行JavaScript代码时,不能同时做其他 ...

  8. JS，Javascript加载与函数执行过程

    Js,Javascript加载与函数执行过程 test.html <!DOCTYPE HTML> <html lang="en"> <head> ...

  9. 动态加载js不执行解决办法

    这个问题的产生原因是:我们项目有一个主index文件,在主index文件中需要根据参数来判断是加载pc.html的内容还是加载mobile.html的内容,一开始是使用jquery来做的,没有问题,后 ...

随机推荐

  1. 解决nginx+uWSGI部署Django时遇到的static文件404的问题

    昨天是利用Django自带的runserver部署的服务器,但是由于runserver比较不稳定,因此决定采用uWSGI+nginx进行部署. 昨天已经安装好了uwsgi和nginx,使用该指令打开8 ...

  2. [转帖]SSD的工作原理、GC和TRIM、写入放大以及性能评测

    SSD的工作原理.GC和TRIM.写入放大以及性能评测 https://blog.csdn.net/scaleqiao/article/details/50511279   SSD的物理结构和工作原理 ...

  3. Oracle 11G RAC For Windows 2008 R2部署手册（亲测，成功实施多次）

    总体规划 服务器规划 1.建议使用两台硬件配置一模一样的服务器来作为 RAC 环境的两个物理节点 2.服务器至少需要配置两块物理网卡 3.服务器规划表: 节点 主机名 本地磁盘大小 操作系统 内存大小 ...

  4. Mysql的两种引擎的区别

    Innodb引擎概述 Innodb引擎提供了对数据库ACID事务的支持,并且实现了SQL标准的四种隔离级别.该引擎还提供了行级锁和外键约束,它的设计目标是处理大容量数据库系统,它本身其实就是基于MyS ...

  5. 微信小程序 功能函数 把数字1,2,3,4换成春,夏,秋,冬

    let season =‘1,2,3’; // console.log(season.length) if (season){ if (season.length==1){ seasonChe1=se ...

  6. centos升级内核（rpm方式）

    #rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org 如果失败的话多试几次,感觉网络不是很好#rpm -ivh http://www. ...

  7. 深入理解JAVA虚拟机阅读笔记2——垃圾回收

    线程私有的程序计数器.虚拟机栈和本地方法栈随线程而生,随线程而灭.栈中的栈帧随方法的进入和退出有条不紊的入栈和出栈. 而Java堆和方法区因为需要多大内存.创建多少对象都是不确定的,因此这两个区域是垃 ...

  8. BZOJ5020 THUWC2017在美妙的数学王国中畅游（LCT）

    明摆着的LCT,问题在于如何维护答案.首先注意到给出的泰勒展开式,并且所给函数求导非常方便,肯定要用上这玩意.容易想到展开好多次达到精度要求后忽略余项.因为x∈[0,1]而精度又与|x-x0|有关,当 ...

  9. matplotlib删除地图投影上的等值线及风场

    [前言]最近在编写一个气象应用程序,用来显示某一时刻某一地区的气温等值线和风场,程序主要用到了第三方库matplotlib及Basemap.在编写的过程中发现,如果不进行擦除操作直接绘制新的等值线或风 ...

  10. [LOJ3052] [十二省联考 2019] 春节十二响

    题目链接 LOJ:https://loj.ac/problem/3052 洛谷:https://www.luogu.org/problemnew/show/P5290 BZOJ:https://www ...