文档章节

js的引入与优化

jiejiegao
 jiejiegao
发布于 2016/04/23 22:58
字数 468
阅读 13
收藏 0

1、下图是《javascript高级程序设计》书中提到的,将js外引放到body的最后。

     这样解析DOM不会有停顿感觉。但是建议将js放在body标签外和</html>之前;

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里放内容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>

2、启用延迟属性defer(defer="defer")。

     这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后再运行。因此,在<script>元素中设置defer 属性,相当于告诉浏览器立即下载,但延迟执行。。在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoaded 事件触发前执行,因此最好只包含一个延迟脚本。

       请注意,defer属性只适用于外引的js文件。并且在HTML5中,defer属性是默认的,可以不写。

3、使用async(异步脚本,async=“async”)属性。

      使用async 属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行,第二个脚本文件可能会在第一个脚本文件之前执行。因此,确保两者之间互不依赖非常重要。指定async 属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。为此,建议异步脚本不要在加载期间修改DOM。

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>


本文转载自:《javascript高级程序设计》

jiejiegao
粉丝 0
博文 9
码字总数 2321
作品 0
昌平
私信 提问
记一次 React 项目的优化(webpack4 插件的使用)

这里记录了自己在开发一个 React 项目时使用 Webpack 优化项目的过程,欢迎大家围观点赞或吐槽。 学习 React 时候,写了个个人博客站点。使用 webpack 作为打包工具,在这之前学习 webpack ...

a独家记忆
2018/06/30
0
0
RequireJS与SeaJS模块化加载示例

web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有Package的Javascript语言变得难以管理,于是出现CommonJS项目...

nosand
2014/05/04
4.2K
10
将webpack打包优化到极致_20180619

背景: 项目上线前是专门针对 webpack 打包做了优化的,但是在之后做网络优化的时候通过这个插件发现一些公共的js文件重复打包进了业务代码的js中。这些代码体积虽然很小,但是为了将优化做到...

zhiqiang21
06/20
0
0
Cesium中级教程10 - CesiumJS and webpack

Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/webpack是打包JavaScript模块流行且强大的工具。它允许开发人员以直观的方式构造代码和assets,并使用简单...

Cesium中文网
06/02
47
0
prototype,Mootools,jQuery如何在一个页面里面共存啊?

请教一个页面中同时使用了prototype,Mootools,jQuery三种框架如何解决冲突问题啊? 问题背景描述: 我现在的项目里面有一个页面,早先因为某些原因使用了prototype+QIndex,所以引入了js 后来...

赵开锦
2011/08/16
3.4K
7

没有更多内容

加载失败,请刷新页面

加载更多

《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
4
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
6
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
4
0
OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
993
11
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
40
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部