美文网首页
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(页面加载和延迟脚本)

  • js延迟加载的六种方式

    js实现延迟加载的几种方法,js的延迟加载有助与提高页面的加载速度 JS延迟加载,也就是等页面加载完成之后再加载 ...

  • JavaScript补充

    01-延迟和异步加载JS 如何延迟加载JS:defer defer:js脚本可以延迟到文档完全被解析后执行 如何异...

  • JS延迟加载的几种方式

    JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件。 JS延迟加载有助于提高页面加载速度。 ...

  • 系统学习 JavaScript 的笔记【1】

    JavaScript 在HTML中的标签位置 延迟脚本与异步脚本的区别 延迟脚本 脚本的加载不会影响页面布局,,可...

  • js 实现图片懒加载

    一、懒加载 懒加载也叫延迟加载,Js中图片的延迟加载,延迟图片需要符合某些条件时才加载;对于图片过多的页面,为了加...

  • defer与async差别

    1.页面遇到会停止Dom渲染去加载js 2.当DOMContentLoaded之后再去执行外部脚本,但是加载是和渲...

  • Script标签中 defer 和 async

    defer延迟脚本 js的引入 被放在body的结束符之前,这主要是为了让页面的所有节点被加载完了之后在执行js...

  • 《Web前端开发最佳实践》笔记

    第一部分 P14 提高页面加载性能: 1 将部分不影响首页展示的JS文件延迟到页面加载后加载; 2 删除页面中初始...

  • 前端性能优化

    1.尽量减少http请求次数 合并js 合并css 小图标使用精灵图 2.延迟加载页面内容 图片、数据 懒加载 功...

网友评论

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

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