周末加班敲代码的时用到了<script>标签，突然想到了一个问题：别的自测项目里面<script>我把他放在了不同位置，这里应该会对代码的执行与渲染后影响吧？于是今天专门进行了查询，趁机总结以下：

html 文档的解释方式&顺序：

预备知识：（需要简单理解同步/异步的区别）

同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，在相应用户，用户体验不好。

异步，不用等所有操作等做完，就相应用户请求。即先相应用户请求，然后慢慢去写数据库，用户体验较好。

  1. html文档的执行，从上到下解释
  2. 解释过程中遇到 <link>,<img> 标签就会异步进行加载/下载，然后继续向下进行代码的解释
  3. 遇到<script> 标签时情况相反，此时会开始同步请求JS文件，然后逐句执行JS文件中的代码，知道所有代码执行完再继续进行html剩余代码的解释

<script>标签引起的问题And位置的影响：

  • 解决<script>同步执行导致html脚本解释的阻塞问题：
  1. 方法一 => 将<script>放在<body>的最后一部分
  2. 给<script>标签添加 defer 属性；用法： 
    <script type="text/javascript" defer="defer">
    defer 作用：属性规定是否对脚本执行进行延迟，直到页面加载为止。（注意：局限于IE浏览器;详细请参考=>请点击这里）
    当然也有缺点：就是如果多个JS脚本的时候没法确定脚本的执行先后顺序
  • <script>位置的影响：
          预备知识：（浏览器的工作流程）
          解析html文档成DOM树 => 解析CSS生成CSSDOM树 => CSSDOM树和DOM树结合形成Rending Tree => Layout => 渲染

    • 将<script>放在<head></head>之间，使其在主页和其他代码之前预先装载，可以实现例如：*.js 文件的提前调用
    • 将<script>放在<body></body>之间，则页面加载后运行（注意放在<body></body>中的位置，这里推荐放在最后）

小结：

    1. 在head里面，所有的function函数只加载不执行，执行的话是在某件事触发之后（如果有变量的初始化，会导致报错）
    2. 在body里面直接加载并执行

html页面的渲染And<script>位置的影响的更多相关文章

  1. 当vue页面异步加载的数据想在页面上渲染怎么办

    <template> <div class="test"> <div v-for="(item, index) in arr" : ...

  2. easyui $.parser.parse 页面重新渲染

    一些dom元素是动态拼接上的easui的样式,由于页面已经渲染过了,所以需要手动执行渲染某个部件或者整个页面 $.parser.parse(); // parse all the page $.par ...

  3. Vue下路由History mode导致页面无法渲染的原因

    用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件( ...

  4. vue.js数据可以在页面上渲染成功却总是警告提示某个字段“undefined”未定义

    最近在开发公司的一个后端管理系统,用的是比较流行的vue框架.在开发过程中,总是出现各种各样的报错问题,有警告的,有接口不通的,有自己马虎造成的低级错误的等等,这些错误在一些老司机面前分分钟解决,但今 ...

  5. SpringBoot入门篇--使用Thymeleaf模板引擎进行页面的渲染

    在做WEB开发的时候,我们不可避免的就是在前端页面之间进行跳转,中间进行数据的查询等等操作.我们在使用SpringBoot之前包括我在内其实大部分都是用的是JSP页面,可以说使用的已经很熟悉.但是我们 ...

  6. scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置

    scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...

  7. 微信小程序：优化页面要渲染的属性

    问题:页面中只用到四个属性:goods_name,goods_price,goods_introduce,pics,但是整个对象中有22个属性,小程序中建议:data中只存放标签中要使用的数据,而现在 ...

  8. vue+vuex 修复数据更新页面没有渲染问题

    不解: 为什么在关闭开关后,已经将data里的属性和vuex属性初始化后,页面就是不响应??? 问题: 由于切换路由后,获取到vuex的数据在created中赋值到data相对应的属性中,在关闭开关后 ...

  9. 网页页面NULL值对浏览器兼容性的影响

    网页页面NULL值对浏览器兼容性的影响       近期做项目中一个页面中的input radio出现浏览器兼容性问题. 主要问题: 在谷歌浏览器,360急速模式和搜狗急速模式中给radio初始动态赋 ...

随机推荐

  1. Python实现MQTT接收订阅数据

    一.背景 目前MQTT的标准组织官网:http://www.mqtt.org,里面列出了很多支持的软件相关资源. 一个轻量级的MQTT服务器是:http://www.mosquitto.org,可以运 ...

  2. springcloud学习之路: (四) springcloud集成Hystrix服务保护

    Hystrix是一套完善的服务保护组件, 可以实现服务降级, 服务熔断, 服务隔离等保护措施 使用它可以合理的应对高并发的情况 做到保护服务的效果 1. 导入依赖 <dependency> ...

  3. ping脚本--无网不利

    一.本文主要涉及的内容 二.预备知识 1.打印网络接口列表 2.提取IP地址的小套路 3.更改网卡的MAC地址 4.高速的ping工具:fping 三.套路连招 1.通过一个for循环和ping列出所 ...

  4. Linux安装docker（ubuntu16.04和centos7.4）

    ubuntu16.04版本 1.安装依赖 sudo apt-get install apt-transport-https ca-certificates software-properties-co ...

  5. 洛谷P1706 全排列问题

    题目描述 输出自然数1到n所有不重复的排列,即n的全排列,要求所产生的任一数字序列中不允许出现重复的数字. 输入输出格式 输入格式: n(1≤n≤9) 输出格式: 由1-n组成的所有不重复的数字序列, ...

  6. c# 笔试面试题01

    一.抽象与接口的区别: ,抽象(abstract): ()抽象类中可以有抽象方法,也可没有: ()抽象方法包含实现,也可以由子类实现: ()抽象类不能被sealed修饰,只能使用abstract关键字 ...

  7. Linux文件系统与日志

    1.inode 包含文件的元信息(1)inode 内容:文件的字节数.拥有者的 UID.GID.文件的读写执行权限.时间戳等,但不包含文件名.文件名是储存在目录的目录项中.(2)查看文件的 inode ...

  8. Linux进程和计划任务管理

    1.笔记: 去掉头部:ps -aux - - no -heade 默认信号:15 强制:9 在命令前些一个nohup不再占用终端 date -s:修改时间 ntpdate pool.ntp.org:同 ...

  9. Linux性能优化实战学习笔记：第十八讲

    一.内存的分配和回收 1.管理内存的过程中,也很容易发生各种各样的“事故”, 对应用程序来说,动态内存的分配和回收,是既核心又复杂的一的一个逻辑功能模块.管理内存的过程中,也很容易发生各种各样的“事故 ...

  10. 【灵魂拷问】你为什么要来学习Node.js呢？

    [灵魂拷问]你为什么要来学习Node.js呢? 学习node.js适合的人群: 需要必备一些HTML,CSS,JavaScript及编程有一定程度了解的读者阅读,一些简单的命令行操作,具备服务端开发经 ...