JavaScript元素实用指引
2016-12-17 本文已影响84人
犯迷糊的小羊
目录
-
<script>元素的解读 - 延迟脚本和异步脚本
-
<noscript>元素
1. <script>元素的解读
向HTML插入JavaScript的方法，主要有两种：引入外部文件和直接在HTML中插入script元素；
同时，HTML4.01为<script>元素定义以下几个主要的属性：
-
src：引入外部文件的路径，允许跨域访问，但在使用外部js文件时，一定要选用值得信赖的提供方，因为你无法控制跨域的js文件； - type：脚本的内容类型，js文件通常以
type="text/javascript"表示，但实际上服务器在传送js文件时使用的MIME通常是application/x-javascript。通常外部js文件带有.js扩展名，但这不是必须的，因为浏览器解析外部js文件时，是根据type="text/javascript"的指定方式去解析文件，而在响应头的表现就是Content-Type:text/javascript
1.1
- defer：改变脚本在执行阶段的处理行为，延迟执行脚本直到DOM被完全解析和渲染；
- async：改变脚本在加载阶段的处理行为，异步加载脚本，即在脚本还未加载完后不影响页面的其他操作；
2. 延迟脚本和异步脚本
讲js的延迟和异步属性之前，先带童鞋们了解一下一个js文件完整引入流程；
- 引入js文件包括加载、解析和执行3个阶段；
- 加载js默认（不加async属性）是同步加载（阻塞加载）；
- 加载完js文件后，根据响应头信息的内容类型
Content-Type:application/x-javascript进行js文件的解析（预处理阶段），js引擎首先会解析所有的脚本，然后进行变量提升（hoisting），此时遇到错误将不报错； - 执行js文件，并按照脚本和代码（未使用时间函数情况下）出现的先后顺序执行，并且遇到错误报错；
详见js的解析和执行
2.1 延迟脚本
<script src= 'demo.js' defer='defer'></scirpt>
上述外部js文件的引入使用了script元素的defer属性，它将会改变script元素引入流程过程中的执行阶段，即延迟执行该脚本，直到页面其他内容解析和渲染完毕；
2.2 异步脚本
<script src='demo.js' async='async'></script>
上述外部js文件的引入使用了script元素的async属性，它将会改变scirpt元素引入流程过程过程中的加载阶段，即异步脚本加载过程中不影响页面其他的操作；
【TIP】
如果你在页面中使用两个以上的异步脚本，那么一定要确保二者不存在依赖，不然可能会导致错误；
3. <noscript>元素
早期浏览器存在一个特殊的问题，即当浏览器不支持JavaScript是如何让页面平稳退化，一个最终的解决方案是创造一个<noscript>元素用以在不支持JavaScript的浏览器中显示替代内容，这个元素内部可以包含<body>元素中任何HTML元素，除了script元素外。
当然现代浏览器基本上都已经完全支持js了，现在<noscript>元素主要用于脚本被禁用的情况；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<noscript>
<p>你的脚本被禁用！！！</p>
</noscript>
</body>
</html>
