html页面的渲染And<script>位置的…
2019-10-28 06:23:07来源:博客园 阅读 ()
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里面直接加载并执行
原文链接:https://www.cnblogs.com/gamecc666/p/11751735.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash