文档章节

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

2tman
 2tman
发布于 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

© 著作权归作者所有

共有 人打赏支持
2tman
粉丝 12
博文 116
码字总数 31591
作品 0
苏州
Android工程师
JSON,异步加载(学习笔记)

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

Mrs_CoCo
04/23
0
0
精读《高效 javascript》

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

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

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

grootzhang
2016/04/13
0
0
高性能web开发 - 如何加载JS,JS应该放在什么位置?

外部JS的阻塞下载 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。 有人会问:为...

林文安
2012/05/16
0
0
高性能Javascript--脚本的无阻塞加载策略

Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题。 在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 。原因是,事实上,大多数浏览器使用单进程处理UI和更...

Junn
2014/10/10
0
2

没有更多内容

加载失败,请刷新页面

加载更多

spring只

一、IOC(Inversion of Control)或者依赖注入(Dependency Injection) 1、底层实现原理:反射 2、三大核心接口: BeanFactory:简单容器系列,只是实现了容器最基本的功能。 ApplicationC...

狠一点
6分钟前
0
0
缓存架构SpringBoot集成Curator实现zookeeper分布式锁

一、分布式锁简介 1、什么是锁 在单机环境下,当存在多个线程可以同时改变某个共享变量时,就需要同步来实现该功能,使其线程安全。 而同步就是通过锁来实现的。锁保证了同一时刻只有一个线程...

架构师springboot
8分钟前
0
0
11《Java核心技术》之Java提供了哪些IO方式? NIO如何实现多路复用?

一、提出问题 IO 一直是软件开发中的核心部分之一,伴随着海量数据增长和分布式系统的发展,IO 扩展能力愈发重要。幸运的是,Java 平台 IO 机制经过不断完善,虽然在某些方面仍有不足,但已经...

飞鱼说编程
15分钟前
0
0
简单介绍Java 的JAR包、EAR包、WAR包区别

WAR包 WAR(Web Archive file)网络应用程序文件,是与平台无关的文件格式,它允许将许多文件组合成一个压缩文件。War专用于Web方面。大部分的JAVA WEB工程,都是打成WAR包进行发布的。 War是...

linuxprobe16
15分钟前
0
0
55:Mysql用户管理|常用sql语句|mysql数据库备份恢复

1、Mysql用户管理; 场景,为了安全,新建的站点,创建新的用户,或者给已有用户授权,对某个库或者某个表有权限; 语法: grant all on *.* to 'user'@'127.0.0.1' identified by 'password'; g...

芬野de博客
19分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部