• 加载模式


    1.同步加载

    默认的是同步加载,又称阻塞加载,加载的时候会阻止浏览器的后续处理,停止后续文件的解析和执行,如图像的渲染等等。采用同步加载是因为加载的Js文件中有对DOM的操作,重定向,输出DOM等行为,此时同步加载时安全的。把js文件放在body标签结束之前,是Js在页面最后加载,就是为了尽量减少页面阻塞,优先显示页面结构。

    2.异步加载

    异步加载是非阻塞加载,浏览器在加载Js的同时,还会进行后续页面的处理。通过查询资料,大概整理了异步加载有以下几种实现方式。

    (1)script标签的async属性

    <script src=""  async></script>

    async属性表示后续文档的加载和渲染与js脚本的加载和执行是并行的,但是async只适用于外部脚本(有src属性是使用),是html5中的新属性

    (2)script标签的defer属性

    <script src="" defer></script>

    defer属性表示加载文档的过程和js脚本的加载时并行执行的,但是js脚本的执行是在文档所有元素解析完成之后,defer规定的是js脚本执行的异步,只有IE浏览器支持

    (3)动态创建script标签插入DOM结构

    <script>
    (function(){
        var s = document.createElement('script');
        s.type = '';
        s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
        var tmp = document.getElementsByTagName('script')[0];
         tmp.parentNode.insertBefore(s, tmp);
    })();
    </script>
    

    (4)ajax请求:通过XMLHttpRequest来获取js,然后创建一个script元素插入DOM,ajax请求成功后设置script.text为请求成功返回的responseText。

    var getXmlHttp=function(){
            var obj;
            if(window.XMLHttpRequest){
                obj=new XMLHttpRequest();
            }else{
                obj=new ActiveXObject("Microsoft.XMLHTTP");
            }
            return obj;
    }
    var xmlHttp=getXmlHttp();
    //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
    xmlHttp.open('GET','http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js'.true);
    xmlHttp.send();
    xmlHttp.onreadystatechange=function(){
        if(xmlHttp.readyState==4 && xmlHttp.status==200){
            var script=document.createElement("script");
            script.text=xmlHttp.responseText;
            document.getElementsByTagName("head")[0].appendChild(script);
        }
    }

    3.延迟加载

    延迟加载是将js切分成许多模块,页面初始化的时候只加载需要立即执行的Js,然后其他的延迟到第一次需要使用的时候再加载,类似于图片的延迟加载

    4.预加载 

    预加载是一种浏览器机制,使用浏览器空闲时间预先加载/下载用户接下来可能会访问的页面或者资源 放在缓存中,用户访问时直接从缓存中提存

    -----------------目前了解的就这些,待补充

  • 相关阅读:
    [转] Vue + Webpack 组件式开发(练习环境)
    [转] 从零构建 vue2 + vue-router + vuex 开发环境到入门,实现基本的登录退出功能
    [转] Redux入门教程(快速上手)
    [转] 前端数据驱动的价值
    [转] React风格的企业前端技术
    [转] 对Array.prototype.slice.call()方法的理解
    [转] webpack之plugin内部运行机制
    [转] 静态资源的分布对网站加载速度的影响/浏览器对同一域名下并发加载资源数量
    Mysql 版本号、存储引擎、索引查询
    linux 查看CPU、内存、磁盘信息命令
  • 原文地址:https://www.cnblogs.com/walk-on-the-way/p/6509750.html
Copyright © 2020-2023  润新知