第2章 两种调用JS的方法——在HTML中使用JavaScript
Posted 葡萄美酒夜光杯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第2章 两种调用JS的方法——在HTML中使用JavaScript相关的知识，希望对你有一定的参考价值。
一. <script>标记
第一种方法是把 <sript></script>直接放到head和script两个标记之间（title下面，</head>上面）
<head>...
<title>demo</title>
<script type=”text/java script”>
/*type属性常被忽略掉。脚本默认是js，所以<script type=”text/java script”>可直接简写做<script>*/
...
</scipt>
</head>
内嵌js时，可能会涉及一些与html冲突的判断。比如<>之类的操作符。可以通过html实体来替代。如>为>，<为<。
二．引用外链
写好js文件，然后引用，在js文件中，不需要加入<script>标记。
<script type=”text/java script” src=”xxx.js”></script>
//内部的js代码将被忽略。
推荐使用第二种方法。具有方便维护，可缓存，标准化等优点。
三. 那么问题来了
script标记的加载方式是由上到下进行的。在解析器<script>元素对所有js代码求值结束之前，页面中其余的内容都不会被显示。如何改善性能？
1.defer属性延迟加载
一个方法是利用script元素的defer属性。表面脚本在不影响页面构造时才会执行（在html内容加载完之后才执行）。如在<head>元素内加入：
<script defer=”defer” arc=”xxx*.js”></script>
两个defer存在时，理论上是按顺序执行。
2.异步加载
script的另一个属性async与defer相似。要求在不影响页面构造时，立即下载js文件。
<script defer=”defer” async arc=”xxx*.js”></script>
但是当存在两个async时，即便理论上也不能保证二者是顺序加载。
3.最好的方式
把<script>放到html页面内容最后（</body>之前），再外链引用之——这样可以更好快地加载文件。
4.又一个问题
当浏览器不支持脚本；或者浏览器js脚本被禁用后，如何让页面平稳退化？
在body元素内最后部分加上noscript代码（这段代码在js正常时不会显示）：
<noscript>
<p>本页面需要浏览器支持（启用）javascript脚本。</p>
</nosript>
【补充】
历史上，js可以被写在html注释中。可以认为是js的“行间形式”。<!--js代码//-->，现在已废弃。
以上是关于第2章 两种调用JS的方法——在HTML中使用JavaScript的主要内容，如果未能解决你的问题，请参考以下文章