回到顶部 目录

[](

)什么是异步(Asynchronous)加载？

异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理

  • 代码执行时间：当整个网页解析完，执行代码（在网页而加载完之前）

[](

)主要有三种方式：

  1. Script DOM Element（<async>属性是HTML5中新增的异步支持）浏览器部分不支持

    <script async></script>

    
(function(){

    var scriptEle = document.createElement('script');

    scriptEle.type = "text/javascript"

    scriptEle.async = true;

    scriptEle.src = "xxx.js";

    var head = document.getElementsByTagName("head")[0];

    head.insertBefore(scriptEle, head.firstChild); 

})();

    • 加载完就执行，只能加载外部脚本 W3C的标准

    • 该加载方式执行完之前会阻止onload事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作，所以还是会阻塞部分页面的初始化处理

    • 如果有多个声明了async的脚本，其下载和执行也是异步的，不能确保彼此的先后顺序

    • async会在load事件之前执行，但并不能确保与DOMContentLoaded的执行先后顺序

  2. IE专用（IE9以下） (defer)

    <script defer></script>

    
(function(){

    var scriptEle = document.createElement('script');

    scriptEle.type = "text/javascript"

    scriptEle.defer = true;

    scriptEle.src = "xxx.js";

    var head = document.getElementsByTagName("head")[0];

    head.insertBefore(scriptEle, head.firstChild); 

})();

    • defer适用于外联脚本，如果script标签没有指定src属性，只是内联脚本，尽量不要使用defer （虽然IE4-IE7还支持对嵌入脚本的defer属性，但在IE8及之后的版本就只支持外部脚本，对不支持的会直接忽略defer属性）

    • 如果有多个声明了defer的脚本，则会按顺序下载和执行

    • defer脚本会在DOMContentLoaded和load事件之前执行

    • 使浏览器延迟脚本的执行，直到浏览器解析和渲染完页面

  3. 自己写一个把<script>标签插入到网页的最后面

    
// 异步载入并执行脚本

function loadasync(url){

    // 找到head标签

    var head = document.getElementsByTagName('head')[0];

    // 创建一个script元素

    var s = document.createElement('script');

    // 设置引入地址

    s.src = url;

    // 插入到head标签中

    head.appendChild(s);

}
    • 注意这个loadasync()函数会动态的载入脚本–脚本载入到文档中，成为正在执行的JavaScript程序的一部分，既不是通过web页面内联包含，也不是来自web页面的静态引用

[](

)解决异步加载的带来的影响方法

  1. 利用定时器的延时

    
// 异步的过程

var script = document.createElement("script");

script.src = "test.js";

document.head.appendChild(script);

setTimeout("test()", 1000);
    • 弊端就是不知道准确时间

  2. 加载事件onload

    
window.onload =  function(){

    test();

}
    • 低版本的IE可能不支持，并且效率太慢

  3. 咱自己写一个

    

// url: 地址

// callback: 回调函数

function loadScript(url, callback){

    var scriptEle = document.createElement('script');

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

JavaScript异步加载和网页渲染过程，CSS字体样式的使用

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

JavaScript异步加载和网页渲染过程，CSS字体样式的使用

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

JavaScript异步加载和网页渲染过程，CSS字体样式的使用