Where should I put <script> tags in HTML markup?
Where should I put <script> tags in HTML markup?
When embedding JavaScript in an HTML document, where is the proper place to put the <script>
tags and included JavaScript?
I seem to recall that you are not supposed to place these in the <head>
section, but placing at the beginning of the <body>
section is bad, too, since the JavaScript will have to be parsed before the page is rendered completely (or something like that). This seems to leave the end of the <body>
section as a logical place for <script>
tags.
So, where is the right place to put the <script>
tags?
(This question references this question, in which it was suggested that JavaScript function calls should be moved from <a>
tags to <script>
tags. I'm specifically using jQuery, but more general answers are also appropriate.)
解答
Here's what happens when a browser loads a website with a <script>
tag on it:
- Fetch the HTML page (e.g. index.html)
- Begin parsing the HTML
- The parser encounters a
<script>
tag referencing an external script file. - The browser requests the script file. Meanwhile, the parser blocks and stops parsing the other HTML on your page.
- After some time the script is downloaded and subsequently executed.
- The parser continues parsing the rest of the HTML document.
Step #4 causes a bad user experience. Your website basically stops loading until you've downloaded all scripts. If there's one thing that users hate it's waiting for a website to load.
Why does this even happen?
Any script can insert its own HTML via document.write()
or other DOM manipulations. This implies that the parser has to wait until the script has been downloaded & executed before it can safely parse the rest of the document. After all, the script could have inserted its own HTML in the document.
However, most JavaScript developers no longer manipulate the DOM while the document is loading. Instead, they wait until the document has been loaded before modifying it. For example:
<!-- index.html -->
<html>
<head>
<title>My Page</title>
<script type="text/javascript" src="my-script.js"></script>
</head>
<body>
<div id="user-greeting">Welcome back, user</div>
</body>
</html>
JavaScript
// my-script.js
document.addEventListener("DOMContentLoaded", function() {
// this function runs when the DOM is ready, i.e. when the document has been parsed
document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});
Because your browser does not know my-script.js isn't going to modify the document until it has been downloaded & executed, the parser stops parsing.
Antiquated recommendation 过时的做法
The old approach to solving this problem was to put <script>
tags at the bottom of your <body>
, because this ensures the parser isn't blocked until the very end.
This approach has its own problem: the browser cannot start downloading the scripts until the entire document is parsed. For larger websites with large scripts & stylesheets, being able to download the script as soon as possible is very important for performance. If your website doesn't load within 2 seconds, people will go to another website.
In an optimal solution, the browser would start downloading your scripts as soon as possible, while at the same time parsing the rest of your document.
The modern approach
Today, browsers support the async
and defer
attributes on scripts. These attributes tell the browser it's safe to continue parsing while the scripts are being downloaded.
async
<script type="text/javascript" src="path/to/script1.js" async></script>
<script type="text/javascript" src="path/to/script2.js" async></script>
Scripts with the async attribute are executed asynchronously. This means the script is executed as soon as it's downloaded, without blocking the browser in the meantime.
This implies that it's possible that script 2 is downloaded & executed before script 1.
According to http://caniuse.com/#feat=script-async, 94.57% of all browsers support this.
defer
<script type="text/javascript" src="path/to/script1.js" defer></script>
<script type="text/javascript" src="path/to/script2.js" defer></script>
Scripts with the defer attribute are executed in order (i.e. first script 1, then script 2). This also does not block the browser.
Unlike async scripts, defer scripts are only executed after the entire document has been loaded.
According to http://caniuse.com/#feat=script-defer, 94.59% of all browsers support this. 94.92% support it at least partially.
An important note on browser compatibility: in some circumstances IE <= 9 may execute deferred scripts out of order. If you need to support those browsers, please read this first!
Conclusion
The current state-of-the-art is to put scripts in the <head>
tag and use the async
or defer
attributes. This allows your scripts to be downloaded asap without blocking your browser.
The good thing is that your website should still load correctly on the 6% of browsers that do not support these attributes while speeding up the other 94%.
解答2
Non-blocking script tags can be placed just about anywhere:
<script src="script.js" async></script>
<script src="script.js" defer></script>
<script src="script.js" async defer></script>
async
script will be executed asynchronously as soon as it is availabledefer
script is executed when the document has finished parsingasync defer
script falls back to the defer behavior if async is not supported
Such scripts will be executed asynchronously/after document ready, which means you cannot do this:
Where should I put <script> tags in HTML markup?的更多相关文章
- JavaScript Madness: Dynamic Script Loading
Introduction I've developed some pretty seriously Javascript intensive sites, where the sheer quanti ...
- [Javascript]2. Improve you speed! Script Execution
Let's take a closer look at how a browser retrieves and acts on scripts.modern browser can parallel ...
- how to use coffee script
TABLE OF CONTENTS TRY COFFEESCRIPT ANNOTATED SOURCE CoffeeScript is a little language that compiles ...
- Java Script 学习笔记 -- Ajax
AJAX 一 AJAX预备知识:json进阶 1.1 什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javas ...
- Building Applications with Force.com and VisualForce (DEV401) (二十):Visualforce Pages: Visualforce Componets (Tags)
Dev401-021:Visualforce Pages: Visualforce Componets (Tags) Module Agenda1.Tag Basics2.Tag Bindings T ...
- Building Applications with Force.com and VisualForce(Dev401)(十九):Visualforce Pages: Visualforce Componets (Tags)
Dev401-020:Visualforce Pages: Visualforce Componets (Tags) Module Agenda1.Tag Basics2.Tag Bindings T ...
- Ajax及跨域
概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...
- jQuery-1.9.1源码分析系列(十六)ajax——jsonp原理
json jsonp 类型 "json": 把响应的结果当作 JSON 执行,并返回一个JavaScript对象.如果指定的是json,响应结果作为一个对象,在传递给成功处理函数 ...
- jQuery的$.ajax
在介绍JSONP之前,先简单的介绍一些JSON.JSON是JavaScript Object Notation的缩写,是一种轻量的.可读的基于文本的数据交换开放标准.源于JavsScript编程语言中 ...
随机推荐
- 所有硬币组合问题——动态规划hdu2069
Problem Description Suppose there are 5 types of coins: 50-cent, 25-cent, 10-cent, 5-cent, and 1-cen ...
- APT攻防整理-攻击方法/工具
攻击步骤 一般步骤 社工 武器制造 武器投递 漏洞利用 安装后门 后渗透 这5个阶段攻击非常隐蔽,可绕过传统安全设备检测 潜伏控制 传统通信方式不会使用,如cc/socket/http(可采用安全隧道 ...
- System.Web.Script.Serialization的引用
解决方案: 找到C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.0 ==>System.Web.Extensions.d ...
- BZOJ 3262(Treap+树状数组)
题面 传送门 分析 分三维考虑 对第一维,直接排序 对第二维和第三维,我们这样考虑 朴素的方法是建k棵Treap,第i棵Treap里存第二维值为k的第三维数值 每次查询一组(a,b,c),只要在1~b ...
- JavaScript 各种遍历方式详解及总结
JavaScript 各种遍历方式详解 在$.each中想要终止循环,但是它没有continue或者break这样的终止方式,所以尝试使用return来进行终止,但是发现并没有跳出循环.为了搞清楚js ...
- MapReduce工作流程及Shuffle原理概述
引言: 虽然MapReduce计算框架简化了分布式程序设计,将所有的并行程序均需要关注的设计细节抽象成公共模块并交由系统实现,用户只需关注自己的应用程序的逻辑实现,提高了开发效率,但是开发如果对Map ...
- 全文搜索引擎 elasticsearch.net
原文:https://www.cnblogs.com/lonelyxmas/p/10767436.html
- JVM(12)之 可视化分析工具
开发十年,就只剩下这套架构体系了! >>> 经过前几篇博文对堆内存以及垃圾收集机制的学习,相信小伙伴们已经建立了一套比较完整的理论体系!本篇博客就根据已有的理论知识,通过可视化工 ...
- C语言如何打印出%
1. 敲ASCII码,但系我记不住呀! 2. 两个%%: #include <stdio.h> int main() { printf("%%\n"); printf( ...
- Solr的学习使用之(三)IKAnalyzer中文分词器的配置
1.为什么要配置? 1.我们知道要使用Solr进行搜索,肯定要对词语进行分词,但是由于Solr的analysis包并没有带支持中文的包或者对中文的分词效果不好,需要自己添加中文分词器:目前呼声较高的是 ...