html页面的渲染And<script>位置的影响

时间：2019-10-28 14:44:50 阅读：141 评论：0 收藏：0 [点我收藏+]

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

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

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

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

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

给<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>中的位置，这里推荐放在最后）

小结：

原文地址：https://www.cnblogs.com/gamecc666/p/11751735.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行