美文网首页
js基础_2(页面加载和延迟脚本)

js基础_2(页面加载和延迟脚本)

作者: 奶瓶SAMA | 来源:发表于2017-09-10 22:08 被阅读0次
    js标签的位置:
               通常都是把关于标签<script>放在<header>元素中
      目的:把所有外部文件css文件和javascript文件件的引用都放在相同的地方,但是 <header>中包含js文件,只有js代码全部
           下载完成后才会载入页面,但这无疑是延迟呈现页面,在延迟期间页面空白
      解决:把js代码放在<body>元素中(页面内容的后面),这样就把加载空白页面的时间缩短了.
    
    defer属性:立即下载,但会延迟进行. 只对外部脚本文件有效
    asyns属性:与defer属性相似,都可以改变处理脚本行为,但标记asyns的脚步并不能保证它们的先后执行顺序.
              目的:不让页面等待两个脚本下载和执行, 会在load事件前执行,但会在DomcontentLoaded事
                           件触发之前或之后执行, 支持的浏览器(Firefox 3.6,safar和 Chrome)
    src属性:表示包含要执行代码的外部文件.
    (无论如何包含代码,只要不存在defer和asyns属性,浏览器都会按照<script>元素在页面中的出现的先后顺序对他们一次进行
    解析.简单来说就是第一个<script>元素包含的代码解析完成后,第二个<script>包含的代码才会被解析.然后才是第三个,第四
    个……)
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>延迟脚本</title>
            <script type="text/javascript" defer="defer" src="js/bootstrap.min.js"> </script>
        </head>
        <body>
            <!--内容-->
        </body>
    </html>
     在这个例子里为<script>标签定义了defer属性,这样脚本会被延迟到整个页面都解析完毕后在运行,因此在<script>设置了
    deferi属性,相当于告诉浏览器立即下载,但延迟进行,虽然我们把<script>放在<header>中但其中包含的延迟脚本讲遇到浏览
    器</html>标签再进行. HTML5规范要求脚本按照他们出现的先后顺序再进行,因此第一个延迟脚本会先于第二个延迟脚本进行,
    而这两个脚本会先于DOMcontentLoaded事件触发前执行,但在现实当中,延迟脚本不应定会按照顺序执行,也不定在DOMconte
    ntLoaded事件触发前执行,因此最好包含一个延迟脚本.
    

    相关文章

      网友评论

          本文标题:js基础_2(页面加载和延迟脚本)

          本文链接:https://www.haomeiwen.com/subject/maitsxtx.html