文档章节

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

鬼风
 鬼风
发布于 2016/12/06 22:45
字数 723
阅读 11
收藏 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压力测试实战
鬼风
粉丝 12
博文 113
码字总数 32371
作品 0
苏州
Android工程师
私信 提问
《高性能javascript》 笔记

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

modernizr
2014/04/03
467
1
JSON,异步加载(学习笔记)

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

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

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

UC国际技术
昨天
0
0
精读《高效 javascript》

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

程序员解决师
08/23
0
0
javascript性能优化:创建javascript无阻塞脚本

  javaScript 在浏览器中的运行性能,在web2.0时代显得尤为重要,成千上万行javaScript代码无疑会成为性能杀手, 在较低版本的浏览器执行JavaScript代码的时候,由于浏览器只使用单一进程来...

grootzhang
2016/04/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

URL访问网站的网络传输全过程

打开浏览器,在地址栏输入URL,回车,出现网站内容。这是我们几乎每天都在做的事,那这个过程中到底是什么原理呢?HTTP、TCP、DNS、IP这些耳熟能详的名词都在什么时候起着什么作用呢?在这里...

MrBoyce
3分钟前
0
0
都9102年了,还不会Docker?10分钟带你从入门操作到实战上手

Docker简述 Docker是一种OS虚拟化技术,是一个开源的应用容器引擎。它可以让开发者将应用打包到一个可移植的容器中,并且该容器可以运行在几乎所有linux系统中(Windows10目前也原生支持,W...

公众号_Zack说码
3分钟前
0
0
day175-2018-12-12-英语流利阅读-待学习

日本报纸修改二战“慰安妇”描述,引发众怒 雪梨 2018-12-12 1.今日导读 第二次世界大战期间,日本肆意侵略其他国家,所到之处,无数妇女沦为日本士兵肆意践踏的对象。半个多世纪过去了,面对...

飞鱼说编程
5分钟前
1
0
TiDB 源码阅读系列文章(二十一)基于规则的优化 II

在 TiDB 源码阅读系列文章(七)基于规则的优化 一文中,我们介绍了几种 TiDB 中的逻辑优化规则,包括列剪裁,最大最小消除,投影消除,谓词下推和构建节点属性,本篇将继续介绍更多的优化规...

TiDB
11分钟前
0
0
mysql 时间格式化

DATE_FORMAT

1713716445
17分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部