• 读高性能JavaScript编程 第一章


    草草的看完第一章,虽然看的是译文也是感觉涨姿势了,

    我来总结一下:

      由于 大多数浏览器都是 single process 处理 ui updatas and js execute

      于是产生问题: js (script tag) will blocking page processing 

    上图说话:

      于是大家动脑筋想办法

    想到了三个办法

    1、 Parallel downloads, then execute  并行下载,然后执行。

    2、Download times less,Less download file  少次少量 (精缩)

    3、动态添加脚本,注入脚本(使用xmlhttprequest)。

    其他:

    defer  eg:<script type="text/javascript" src="file1.js" defer></script> 

    对应的 JavaScript 文件将在<script>被解析
    时启动下载,但代码不会被执行,直到 DOM 加载完成(在 onload 事件句柄被调用之前)

    把js引用放在 </body>上面(很多人知道但不懂为什么)

     原因:在 head 里 你会看到 阻塞全在白页上了

     在下面阻塞的时候好歹页面上有点东西了 哈哈好简单~  将脚本放在底部是定律

    最后

    果然最爽的还是把别人造好的轮子拿来用:

      1、 YUI3 2、The LazyLoad library 3、The LABjs library 第二和第三个看着很爽的样子 第三个比较推荐。

    而且可以体验一把链式结构的爽快写法。 

    eg:

    <script type="text/javascript" src="lab.js"></script>
    <script type="text/javascript">
     $LAB.script("first-file.js").wait() //这个wait 是保证 js被执行(注意:不是被完全下载,下载是并行的)的先后顺序
    .script("the-rest.js")
    .wait(function(){
    Application.init();
    });
    </script>

  • 相关阅读:
    Docker01 centos系统安装、centos安装docker、docker安装mongoDB
    WebFlux03 SpringBoot WebFlux实现CRUD
    WebFlux02 SpringBoot WebFlux项目骨架搭建
    WebFlux01 webflux概念、异步servlet、WebFlux意义
    ReactiveStream03
    ReactiveStream02
    ReactiveStream01
    Stream03
    python爬虫2
    python爬虫1
  • 原文地址:https://www.cnblogs.com/zhuwansu/p/6114599.html
Copyright © 2020-2023  润新知