文档章节

[高性能javascript笔记]1-加载和执行

小树coding
 小树coding
发布于 2016/12/06 22:45
字数 723
阅读 13
收藏 2

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

  1. 无论是外链还是内链,<script>标签每次出现都霸道地让页面等待脚本的解析和执行。这是页面生存周期的必要环节,因为脚本执行过程中可能会修改页面内容。
     
  2. 在<header>标签中加载多个javascript文件,由于脚本会阻塞页面渲染,直到它们全部下载并执行完成后,页面的渲染才会继续。浏览器在解析到<body>标签之前,不会渲染页面的任何部分。把脚本房东啊页面顶部将会导致明显的延迟,通常表现为显示空白页面,用户无法浏览内容,也无法与页面进行交互。
     
  3. 现在的浏览器基本都允许并行下载javascript文件,<script>标签在下载外部资源时不会阻塞其它<script>标签,遗憾的是,javascript下载过程仍然会阻塞其它资源的下载,比如图片。
     
  4. 脚本位置:推荐将所有的<script>标签尽可能放到<body>标签的底部,以尽量减少对整个页面下载的影响。
     
  5. 组织脚本:减少页面包含的<script>标签数量有助于 改善下载阻塞页面渲染,不要把内嵌脚本紧跟在<link>标签之后,不然会导致页面阻塞去等待样式表的下载。下载单个100kb的文件将比下载4个25kb的文件更快。
     
  6. 无阻塞的脚本:尽管下载单个较大的js文件只产生一次http请求,却会锁死浏览器一大段时间。为避免这种情况,你需要向页面中逐步加载js文件,这样做在某种程度上来说不会阻塞浏览器。

    “无阻塞脚本的秘诀在于,在页面加载完成之后才加载js代码,这意味着在window对象的load事件触发后再加载脚本。”
     
  7. 延迟的脚本:<script>的扩展属性defer.
    defer属性指明本元素所含的脚本不会修改dom,因此代码能安全地延迟执行。(但是跨浏览器不是个理想的方案,其它浏览器会被忽略)

    不过现在主流兰奇都已经支持defer.

    html5引入了async属性,用于异步加载脚本。与defer的相同点都是采用并行下载,在下载过程中不会产生阻塞。
    区别在于,async是加载完成后自动执行,而defer需要等待页面完成后执行。

    defer属性仅当src属性声明时才生效。
  8. 动态脚本元素:
     
    function loadScript(url, callback) {
                var script = document.createElement("script");
                script.type = "text/javascript";
    
                if(script.readyState){//ie
                    script.onreadystatechange = function () {
                        if(script.readyState == "loaded" || script.readyState=="complete"){
                            script.onreadystatechange = null;
                            callback();
                        }
                    };
    
                }else {
                    //其它浏览器
                    script.onload = function () {
                        callback();
                    };
                }
                script.src = url;
                document.getElementsByTagName("head")[0].appendChild(script);
            }

     
  9. 推荐的无阻塞模式:
    https://github.com/rgrove/lazyload
    https://github.com/getify/LABjs

© 著作权归作者所有

上一篇: MySQL - 学习入门
下一篇: adb压力测试实战
小树coding
粉丝 13
博文 120
码字总数 33884
作品 0
苏州
Android工程师
私信 提问
加载中

评论(0)

《高性能javascript》 笔记

第一部分:关于script 当把js脚本通过script标签放在head中的时候,早期浏览器在遇到script的时候会阻止浏览器加载和渲染html。知道javascript脚本被下载并执行完,且这些javascript是依次下载和...

modernizr
2014/04/03
515
1
精读《高效 javascript》

前言 本期我来给大家推荐的书是《高性能JavaScript》,在这本书中我们能够了解 javascript 开发过程中的性能瓶颈,如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。同样...

程序员解决师
2018/08/23
0
0
除了HTML、CSS与JS 现在WASM也是标准Web语言

大家应该知道,万维网联盟 W3C 认证的 Web 语言有 HTML、CSS 与 JavaScript,而近日联盟正式宣布 WebAssembly 核心规范(WebAssembly Core Specification)成为官方 Web 标准,这意味着 WebA...

开源中国
2019/12/06
0
0
JSON,异步加载(学习笔记)

JSON是一种传输数据的格式(以对象为样板,本质上就是对象,但用途有区别,对象就是本地用的,json是用来数据传输的,前端与后端的数据通信) JSON是静态类(不需要构造),类似于Math,内部...

Mrs_CoCo
2018/04/23
105
0
JavaScript 极致性能追求:TC39 二进制 AST 提案

原文作者:Dylan Schiemann 译者:UC 国际研发 Jothy 写在最前:欢迎你来到“UC国际技术”公众号,我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章,不限于...

UC国际技术
2018/12/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

apache服务器 --Internal Server Error(内部服务错误)

问题显现: 首先,我先展示一下错误提示代码: Internal Server ErrorThe server encountered an internal error or misconfiguration and was unable to complete your request. Ple......

二营长意大利炮
31分钟前
15
0
唱作俱佳,腾讯AI艾灵领唱中国新儿歌

唱作俱佳,腾讯AI艾灵领唱中国新儿歌 今年六一儿童节,腾讯联合北京荷风艺术基金会发起“腾讯荷风艺术行动”,给孩子们送上两份礼物,为音乐美学中国素质教育的发展做出贡献。 其中一份就是由...

腾讯技术资讯
33分钟前
39
0
BeetlSQL3.0 难搞

最近想支持一下nosql,难搞,每个nosql server,都很难一天掌握安装和基础用法,所以先决定选用clickhouse ,apache drill (操作文件),Cassandra,这三个下手 hadoop系列也挺好的,但确实没时...

闲大赋
33分钟前
18
0
生产计划体系学习

生产计划的内容: 1、生产的最终产品与零部件数量 2、生产的批量和产出时间 3、产品产出的日程计划 生产计划编制思路,按照分层次来进行的 1、主生产计划(MPS) 2、零部件生产计划(MRP) ...

旺仔没馒头
34分钟前
19
0
如何使用Maven创建具有依赖项的可执行JAR? - How can I create an executable JAR with dependencies using Maven?

问题: I want to package my project in a single executable JAR for distribution. 我想将我的项目打包在一个可执行的JAR中进行分发。 How can I make a Maven project package all depen......

javail
37分钟前
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部