js和HTML结合(补充知识:如何防止文件缓存的js代码)

时间:2023-12-14 12:45:56

  来自《javascript高级程序设计 第三版:作者Nicholas C. Zakas》的学习笔记(二)

  使用html标签<script>可以把js嵌入到html页面中,让脚本与标记混合一起;也可以包含外部的js文件。如:

  1. 脚本和标记混合:
    <script type="text/javascript">
    function sayHi(){
    alert("Hi");
    }
    </script>

    在使用<script>嵌入代码时,记住不要在代码中的任何地方出现'<script>'字符串。例如,

    <script text="text/javascript">
    function sayScript(){
    alert("</script>");
    }
    </script>

    浏览器在加载上述代码时将会报错,因为当浏览器遇到字符串</script>时,就会认为那是结束的</script>标签。解决办法如下:

    <script text="text/javascript">
    function sayScript(){
    alert("<\/script>");
    }
    </script>
  2. 外部js文件的链接,例如:
    <script type="text/javascript" src="example.js"></script>

    需要注意的是:带有src属性的<script>元素不应该在其<script></script>标签之间有额外js代码。只会下载并执行外部脚本文件,嵌入的代码会被忽略。src属性还可以包含来自外部域的js文件,如:

    <script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>

    不过随意加载外部域js文件存在潜在危险,需要引起警惕。 

  而我们需要注意的地方有:

  • 在包含外部js文件时,必须将src属性设置为指向相应文件的URL。而这个文件可以与包含它的页面位于同一个服务器上,也可以是其他任何域中的文件(如:)
  • 所有<script>元素都会按照它们在页面中出现的先后顺序依次被解析。在不使用defer和async属性的情况下,只有在解析完前面<script>元素中的代码之后,才会开始解析后面<script>元素中的代码(后面将会补充defer和async的知识,就如你此时脑瓜子里猜测的那样,defer和async就是能够控制解析顺序的。不过还有细节方面的知识,如果您此时已经迫不及待想知道,可以先翻阅到该文章的相应段落,抢先阅读)。
  • 由于浏览器会先解析完不使用defer属性的<script>元素中的代码,然后再解析后面的内容,所以一般应该把<script>元素放在页面最后,即主要内容后面,</body>标签前面。从而可以避免出现js文件下载过慢出现页面无法渲染的情况。
  • 使用defer属性可以让脚本在文档完全呈现之后执行。延迟脚本总是按照指定它们的顺序执行。
  • 使用async属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。
  • 使用<noscript>元素可以指定不支持脚本的浏览器中显示的替代内容。但在启动了脚本的情况下,浏览器不会显示<noscript>元素中的任何内容。

  

  defer和async介绍:

  标签<script>的defer属性的定义(defer只适用于外部脚本),是脚本会被延迟到整个页面都解析完毕后再运行。这个属性的用途表明脚本在执行时不会影响页面的构成。如:

<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>

  需要注意的是,现实生活中,example1.js和example2.js虽然延迟了,但是彼此作为都是延迟脚本并不是example1.js一定会先于example2.js执行,也不一定会在DOMContentLoaded事件触发前执行,因此最好只包含一个延迟脚本。

  同样属性async也只适用于外部脚本,并告诉浏览器立即下载文件,但不妨碍页面中的其它操作,比如下载其它资源或是等待加载其它脚本。标记为async的脚本并不保证按照指定它们的先后顺序执行。所以。确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本执行和下载,从而异步加载页面其它内容。建议异步脚本不要在加载期间修改DOM。

  补充:如何防止浏览器缓存外部js文件,很多时候用于动态验证码等需要多次加载文件的时候。

  原理其实就是通过在固定地址后面,加上一个不同值的日期数值,以达到地址不重复的目的,让浏览器每次都实时加载,不从缓存中读取文件。

<script type="text/javascript">
//防止js文件缓存下来,以后更新时不再需要用户重新删除IE文件等操作。
var now=new Date();
var number = now.getYear().toString()+now.getMonth().toString()+now.getDate().toString()+now.getHours().toString()+now.getMinutes().toString()+now.getSeconds().toString();
document.write('<scr'+'ipt language="javascript" type="text/javascript" src="jb51net.js?"+number+""></scr'+'ipt>');
</script>

  学习笔记。