正文
html页面的渲染And<script>位置的影响
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
周末加班敲代码的时用到了<script>标签，突然想到了一个问题：别的自测项目里面<script>我把他放在了不同位置，这里应该会对代码的执行与渲染后影响吧？于是今天专门进行了查询，趁机总结以下：
html 文档的解释方式&顺序：
预备知识：（需要简单理解同步/异步的区别）
同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，在相应用户，用户体验不好。
异步，不用等所有操作等做完，就相应用户请求。即先相应用户请求，然后慢慢去写数据库，用户体验较好。
- html文档的执行，从上到下解释
- 解释过程中遇到 <link>,<img> 标签就会异步进行加载/下载，然后继续向下进行代码的解释
- 遇到<script> 标签时情况相反，此时会开始同步请求JS文件，然后逐句执行JS文件中的代码，知道所有代码执行完再继续进行html剩余代码的解释
<script>标签引起的问题And位置的影响：
- 解决<script>同步执行导致html脚本解释的阻塞问题：
- 方法一 => 将<script>放在<body>的最后一部分
- 给<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>中的位置，这里推荐放在最后）
小结：
- 在head里面，所有的function函数只加载不执行，执行的话是在某件事触发之后（如果有变量的初始化，会导致报错）
- 在body里面直接加载并执行
html页面的渲染And<script>位置的影响的更多相关文章- 当vue页面异步加载的数据想在页面上渲染怎么办
<template> <div class="test"> <div v-for="(item, index) in arr" : ...
- easyui $.parser.parse 页面重新渲染
一些dom元素是动态拼接上的easui的样式,由于页面已经渲染过了,所以需要手动执行渲染某个部件或者整个页面 $.parser.parse(); // parse all the page $.par ...
- Vue下路由History mode导致页面无法渲染的原因
用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件( ...
- vue.js数据可以在页面上渲染成功却总是警告提示某个字段“undefined”未定义
最近在开发公司的一个后端管理系统,用的是比较流行的vue框架.在开发过程中,总是出现各种各样的报错问题,有警告的,有接口不通的,有自己马虎造成的低级错误的等等,这些错误在一些老司机面前分分钟解决,但今 ...
- SpringBoot入门篇--使用Thymeleaf模板引擎进行页面的渲染
在做WEB开发的时候,我们不可避免的就是在前端页面之间进行跳转,中间进行数据的查询等等操作.我们在使用SpringBoot之前包括我在内其实大部分都是用的是JSP页面,可以说使用的已经很熟悉.但是我们 ...
- scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置
scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...
- 微信小程序：优化页面要渲染的属性
问题:页面中只用到四个属性:goods_name,goods_price,goods_introduce,pics,但是整个对象中有22个属性,小程序中建议:data中只存放标签中要使用的数据,而现在 ...
- vue+vuex 修复数据更新页面没有渲染问题
不解: 为什么在关闭开关后,已经将data里的属性和vuex属性初始化后,页面就是不响应??? 问题: 由于切换路由后,获取到vuex的数据在created中赋值到data相对应的属性中,在关闭开关后 ...
- 网页页面NULL值对浏览器兼容性的影响
网页页面NULL值对浏览器兼容性的影响 近期做项目中一个页面中的input radio出现浏览器兼容性问题. 主要问题: 在谷歌浏览器,360急速模式和搜狗急速模式中给radio初始动态赋 ...
随机推荐- spring mvc（1）：基础入门
依赖 pom.xml ( maven ) <properties> <spring.version>3.0.5.RELEASE</spring.version> ...
- Nagios学习笔记一：基本安装和配置
()解决安装Nagios的依赖关系: Nagios基本组件的运行依赖于httpd.gcc和gd.可以通过以下命令来检查nagios所依赖的rpm包是否已经完全安装: # yum -y install ...
- 对无返回值、使用Action或Func作为参数、多重载的方法进行单元测试
VS2012 Unit Test(Void, Action, Func) —— 对无返回值.使用Action或Func作为参数.多重载的方法进行单元测试 [提示] 1. 阅读文本前希望您具备如下知识: ...
- Shiro配置URL过滤
常用过滤器: anon 不需要认证 authc 需要认证 user 验证通过或RememberMe登录的都可以 URL说明: /admin?=authc 表示 ...
- 【转】vue项目打包部署——nginx代理访问
我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...
- Aspose.Words二 基础
1.目录样式 doc.Styles[Aspose.Words.StyleIdentifier.Toc1].Font.Size = 14; doc.Styles[Aspose.Words.StyleId ...
- 用JS制作《飞机大作战》游戏_第2讲（四大界面之间的跳转与玩家飞机的移动）-陈远波
一.通过点击按钮事件,实现四大界面之间的跳转: (一)跳转的思路: 1.打开软件,只显示登录界面(隐藏游戏界面.暂停界面.玩家死亡界面) 2.点击微信登录(QQ登录)跳转到游戏界面,隐藏登录界面 3. ...
- 8 并发编程-(线程)-多线程与多进程的区别&;Thread对象的其他属性或方法
1.开启速度 在主进程下开启线程比 开启子进程快 # 1 在 主进程下开启线程 from threading import Thread def work(): print('hello') if ...
- LeetCode题解 #155 Min Stack
写一个栈,支持push pop top getMin 难就难在在要在常量时间内返回最小的元素. 一开始乱想了很多东西,想到了HashMap,treeMap,堆什么的,都被自己一一否决了. 后来想到其实 ...
- git for mac
Git 使用 1.下载完成后打开终端,使用git --version或者which git命令查看安装版本,有就是安装成功了. 2.创建一个全球用户名.全球邮箱 git config --global ...
<template> <div class="test"> <div v-for="(item, index) in arr" : ...
一些dom元素是动态拼接上的easui的样式,由于页面已经渲染过了,所以需要手动执行渲染某个部件或者整个页面 $.parser.parse(); // parse all the page $.par ...
用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件( ...
最近在开发公司的一个后端管理系统,用的是比较流行的vue框架.在开发过程中,总是出现各种各样的报错问题,有警告的,有接口不通的,有自己马虎造成的低级错误的等等,这些错误在一些老司机面前分分钟解决,但今 ...
在做WEB开发的时候,我们不可避免的就是在前端页面之间进行跳转,中间进行数据的查询等等操作.我们在使用SpringBoot之前包括我在内其实大部分都是用的是JSP页面,可以说使用的已经很熟悉.但是我们 ...
scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...
问题:页面中只用到四个属性:goods_name,goods_price,goods_introduce,pics,但是整个对象中有22个属性,小程序中建议:data中只存放标签中要使用的数据,而现在 ...
不解: 为什么在关闭开关后,已经将data里的属性和vuex属性初始化后,页面就是不响应??? 问题: 由于切换路由后,获取到vuex的数据在created中赋值到data相对应的属性中,在关闭开关后 ...
网页页面NULL值对浏览器兼容性的影响 近期做项目中一个页面中的input radio出现浏览器兼容性问题. 主要问题: 在谷歌浏览器,360急速模式和搜狗急速模式中给radio初始动态赋 ...
- spring mvc（1）：基础入门
依赖 pom.xml ( maven ) <properties> <spring.version>3.0.5.RELEASE</spring.version> ...
- Nagios学习笔记一：基本安装和配置
()解决安装Nagios的依赖关系: Nagios基本组件的运行依赖于httpd.gcc和gd.可以通过以下命令来检查nagios所依赖的rpm包是否已经完全安装: # yum -y install ...
- 对无返回值、使用Action或Func作为参数、多重载的方法进行单元测试
VS2012 Unit Test(Void, Action, Func) —— 对无返回值.使用Action或Func作为参数.多重载的方法进行单元测试 [提示] 1. 阅读文本前希望您具备如下知识: ...
- Shiro配置URL过滤
常用过滤器: anon 不需要认证 authc 需要认证 user 验证通过或RememberMe登录的都可以 URL说明: /admin?=authc 表示 ...
- 【转】vue项目打包部署——nginx代理访问
我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...
- Aspose.Words二 基础
1.目录样式 doc.Styles[Aspose.Words.StyleIdentifier.Toc1].Font.Size = 14; doc.Styles[Aspose.Words.StyleId ...
- 用JS制作《飞机大作战》游戏_第2讲（四大界面之间的跳转与玩家飞机的移动）-陈远波
一.通过点击按钮事件,实现四大界面之间的跳转: (一)跳转的思路: 1.打开软件,只显示登录界面(隐藏游戏界面.暂停界面.玩家死亡界面) 2.点击微信登录(QQ登录)跳转到游戏界面,隐藏登录界面 3. ...
- 8 并发编程-(线程)-多线程与多进程的区别&;Thread对象的其他属性或方法
1.开启速度 在主进程下开启线程比 开启子进程快 # 1 在 主进程下开启线程 from threading import Thread def work(): print('hello') if ...
- LeetCode题解 #155 Min Stack
写一个栈,支持push pop top getMin 难就难在在要在常量时间内返回最小的元素. 一开始乱想了很多东西,想到了HashMap,treeMap,堆什么的,都被自己一一否决了. 后来想到其实 ...
- git for mac
Git 使用 1.下载完成后打开终端,使用git --version或者which git命令查看安装版本,有就是安装成功了. 2.创建一个全球用户名.全球邮箱 git config --global ...
