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

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事件触发前执行,因此最好包含一个延迟脚本.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏jianhuicode

使用node-inspector调试nodejs程序<nodejs>

1.npm install -g node-inspector  // -g 导入安装路径到环境变量 一般是c盘下AppData目录下 2.node-inspe...

2057
来自专栏网站源码

博客复制弹窗提示版权

CSS与JS文件配套下载:https://www.lanzous.com/i1j8ppi

2324
来自专栏finleyMa

使用苹果系统的开发人员必装的iterm和zsh

Zsh支持目录的快速跳转,我们可以使用 d 这个命令,列出最近访问过的各个目录,然后选择目录前面的数字进行快速跳转:

1202
来自专栏python3

python导入模块--import--1

    python前面写的程序,后面就可以将它当成一个模块导入,取其精华舍弃不用的随意使用,最理想的情况是任何一个功能,只要写一次,以后所有人都可以任意调用,...

942
来自专栏用户2442861的专栏

WebStrom快捷键

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/haluoluo211/article/details...

1841
来自专栏每日一篇技术文章

weex-22-picker模块

1721
来自专栏奔跑的蛙牛技术博客

Angular路由

1. reload方法用于刷新当前文档,不从缓存中读取,走一遍服务器。使用reload页面内的表单可能会重新提交

2135
来自专栏磨磨谈

Luminous监控界面中文语言包

之前有各种ceph的管理平台,在部署方面大部分都比较麻烦,现在在luminous版本当中有一个原生的dashboard,虽然目前这个只能看,但是从界面上面,从接...

1542
来自专栏Python疯子

Selenium和PhantomJS 终极最全使用总结

1. 加载页面[image.png]PhantomJS 截取的是网页的完整页面,包括下拉进度条的内容

6623
来自专栏王二麻子IT技术交流园地

九、VueJs 填坑日记之在项目中使用jQuery

很多人学习 js 都是从 jQuery 开始的,我也不例外。有时候进行一些操作的时候,还是感觉 jQuery 比较好用,那么,我们如何在项目中使用 jQuery...

37010

扫码关注云+社区

领取腾讯云代金券