一、脚本的位置

        我们知道，一个<script>标签可以放在 HTML 文档的<head>或<body>标签中，但是浏览器是怎么加载和执行这些javascript呢？通常来说，浏览器对于Javascript的运行有两大特性：1）载入后马上执行，2）执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载）。因为javascript可能会来操作HTML文档的DOM树，所以，浏览器一般都不会像并行下载css文件并行下载js文件， JavaScript 的下载仍然要阻塞其他资源的下载过程，例如图片。即使脚本之间的下载过程互不阻塞，页面仍旧要等待所有 JavaScript代码下载并执行完成之后才能继续。脚本阻塞其他页面资源的下载过程， 所以你可以 将所有<script>标签放在尽可能接近<body>标签底部的位置，尽量减少对整个页面下载的影响。另外，你也可以通过监听document.ready、window.onload等事件对js的加载进行处理。
二、脚本的个数
        当我们在页面加载多个js文件时，一个 JavaScript 文件开始下载，会阻塞了其他文件的下载过程。进一步，在 file1.js下载完之后和 file2.js开始下载之前还有一个延时，这是 file1.js完全运行所需的时间。每个文件必须等待前一个文件下载完成并运行完之后，才能开始自己的下载过程。
下载一个 100KB 的文件比下载四个 25KB的文件要快。总之，减少引用外部脚本文件的数量，你可以将这些文件整合成一个文件，只需要一个<script>标签引用，就可以减少性能损失。此外，非阻塞 JavaScript 加载库LABjs等的运用也能减少加载多个js文件的性能损失。

高性能javascript学习总结（1）--加载与运行的更多相关文章

  1. 高性能JavaScript笔记一（加载和执行、数据访问、DOM编程）

    写在前面 好的书,可能你第一遍并不能领会里面的精魂,当再次细细品评的时候,发现领悟的又是一层新的含义 (这段时间,工作上也不会像从前一样做起来毫不费力,开始有了新的挑战,现在的老大让我既佩服又嫉妒,但 ...

  2. JavaScript判断图片是否加载完成的三种方式

    JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 1 2 3 4 5 6 7 8 9 10 ...

  3. 基于javascript实现图片懒加载（亲测有效）

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

  4. 高性能javascript 学习笔记（1）

    加载和运行 管理浏览器中的javascript代码是个棘手的问题,因为代码运行阻塞了其他浏览器处理过程,诸如用户绘制,每次遇到<script>标签,页面必须停下来等待代码下载(如果是外部的 ...

  5. Javascript兑现图片预加载【回调函数，多张图片】 (转载)

    Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...

  6. HTML里的哪一部分Javascript 会在页面加载的时候被执行？

    最近遇到一个问题:HTML里的哪一部分Javascript 会在页面加载的时候被执行()A : 文件头部 B : 文件尾 C : <head>标签部分 D : <body>标签 ...

  7. 深入java虚拟机学习 -- 类的加载机制(续)

    昨晚写 深入java虚拟机学习 -- 类的加载机制 都到1点半了,由于第二天还要工作,没有将上篇文章中的demo讲解写出来,今天抽时间补上昨晚的例子讲解. 这里我先把昨天的两份代码贴过来,重新看下: ...

  8. 【Hight Performance Javascript】——脚本加载和运行

    脚本加载和运行 当浏览器遇到一个<script>标签时,无法预知javascript是否在<p>标签中添加内容.因此,浏览器停下来,运行javascript代码,然后继续解析. ...

  9. javascript脚本的延时加载

    javascript脚本的延时加载 向HTML页面中插入js代码的主要方法是使用<script>标签,在实际的开发中多采用外部文件的方式,主要考虑到外部js代码的可维护性及可缓存性等优点. ...

  10. 【Java Web开发学习】Spring加载外部properties配置文件

    [Java Web开发学习]Spring加载外部properties配置文件 转载:https://www.cnblogs.com/yangchongxing/p/9136505.html 1.声明属 ...

随机推荐

  1. spring aop中的propagation（传播属性）的7种配置的意思

      1.前言. 在声明式的事务处理中,要配置一个切面,即一组方法,如 <tx:advice id="txAdvice" transaction-manager="t ...

  2. 基于SpringMVC+Ext.js的权限管理系统（无权限框架）

    代码地址如下:http://www.demodashi.com/demo/12811.html 0.准备工作 注意!!! 本案例数据库相关请下载例子包,内有数据库脚本.EXCEL数据表和详细的设计文档 ...

  3. linux pptp 服务端安装并正常上网

    linux 下 PPTP VPN 1.安装相关软件32位版:yum -y install ppprpm -Uvh http://poptop.sourceforge.net/yum/stable/rh ...

  4. SecureCRT 设置字体跟颜色

    SecureCRT 绝佳配色方案, 保护你的眼睛 分类: Linux 软件使用2013-05-17 08:45 24038人阅读 评论(11) 收藏 举报 SecureCRT 绝佳配色方案, 保护你的 ...

  5. java实体类如果不重写toString方法，会如何？

    先认识一下Object Object 类的 toString 方法 返回一个字符串,该字符串由类名(对象是该类的一个实例).at 标记符“@”和此对象哈希码的无符号十六进制表示组成.换句话说,该方法返 ...

  6. iOS中 HTTP/Socket/TCP/IP通信协议具体解释 韩俊强的博客

    简介: // OSI(开放式系统互联), 由ISO(国际化标准组织)制定 // 1. 应用层 // 2. 表示层 // 3. 会话层 // 4. 传输层 // 5. 网络层 // 6. 数据链接层 / ...

  7. js关于事件的一些总结（系列一）

    今天小弟在这里说一下 js 关于事件的一些总结  在这里直接上代码 省去啰嗦的步骤以免看烦了  总结的不好希望大家见谅 一.事件的默认事件 事件的默认事件是什么? 就是a标签有一个链接事件  inpu ...

  8. javascript中区分鼠标单击和拖动事件

    在javascript中,一般的DOM元素如div,都有onmousedown.onmousemove.onmouseup这3个鼠标事件. <div id="div1" on ...

  9. solr6.5的分词

    1.配置solr6.5自带中文分词.复制/usr/local/solr/contrib/analysis-extras/lucene-libs/lucene-analyzers-smartcn-6.5 ...

  10. uiwebview 屏幕自适应 -- 根据 内容适应或者 webview适应

    #import <UIKit/UIKit.h> @interface ViewController : UIViewController<UIWebViewDelegate,UISe ...