前言

当我了解完html在浏览器中的解析渲染流程后，反而又发现了新的困扰自己的问题。

Q:即然html要渲染需要渲染树，而渲染树又需要DOMTree和CSSRuleTree，DOMTree需要解析HTML，但是当解析到JS时需要js下载执行完才能继续执行解析。这样的话，那js放在哪里阻塞解析也只是早晚的问题。那放在前面后面都一样？！但是这又跟开发遇到的情况不一样。

猜想

前面的问题矛盾就在需要完成的DOM树，但是DOM树的构建又会被JS打断。所以我猜想：浏览器的渲染不需要完整的DOM树！

也就是说浏览器不需要等到HTML解析完就开始配合CSSRuleTree开始渲染了。这也就能合理的解析js要放在body的最底部。

试验

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div>welcome to Ahole's test Demo</div>

    <script src="http://www.ahole.cn/play-in-mobile/js/zepto.js"></script>

    <div>我是白老鼠！</div>

</body>

</html>

timeline过程写的很清楚



可以看出浏览器解析遇到js的时候就会停止，但是并不会傻傻等待js的执行，浏览器把构建一半的的DOMTree跟CSSRuleTree 生成渲染树，并渲染．



等下载执行完ｊｓ再去解析html 再渲染．

结论

可以看出浏览器发生了两次渲染，而且这两次渲染中间是js的解析和执行。这说明在解析js之前，html就已经被渲染了。这也就证实了我的猜想。所以啊，为了优化首屏时间，最好还是把js放在body底部吧！

JS 在html中的位置的更多相关文章

  1. 找到你的位置（JS在页面中的位置）最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分

    找到你的位置(JS在页面中的位置) 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分 最常用的方式是在页 ...

  2. js从数组中删除指定值（不是指定位置）的元素

    RT: js从数组中删除指定值的元素,注意是指定值,而不是指定位置. 比如数组{1,2,3,4,5},我要删除其中的元素3,但是这个3的位置我是不知道的,只知道要删除值为3的这一个元素,请问要怎么写? ...

  3. 因为yii2中jquery位置默认在最下方，可将自定义js位置放在下方

    因为yii2中jquery位置默认在最下方,可将自定义js位置放在下方,这样就可以执行当页面加载完触发动作.记录下方式,查找方便 <?php $this->beginBlock('test ...

  4. JS中关于位置和尺寸的api

    HTMLElement.offsetParent 由于offsetTop 和 offsetLeft 都是相对于 offsetParent 内边距边界的,故offsetParent的意义十分重大.off ...

  5. JS对象 Array 数组对象 数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，是从零开始的

    Array 数组对象 数组对象是一个对象的集合,里边的对象可以是不同类型的.数组的每一个成员对象都有一个"下标",用来表示它在数组中的位置,是从零开始的 数组定义的方法: 1. 定 ...

  6. 关于js获取元素在屏幕中的位置的方法

    针对我们获取元素在页面中的位置的问题,我们还是用老师一峰老师的方法来解决吧 下面上HTML代码 <div class="left_footer"> <p data ...

  7. D3.js使用过程中的常见问题(D3版本D3V4)

    目录 一.学习D3我必须要学习好SVG矢量图码? 二.如何理解D3给Dom节点绑定数据时的Update.Enter和Exit模式 三.D3绑定数据时用datum与data有什么不一样? 四.SVG图中 ...

  8. 我的前端工具集（八）获得html元素在页面中的位置

    我的前端工具集(八)获得html元素在页面中的位置   liuyuhang原创,未经允许禁止转载 目录 我的前端工具集 有时候需要用点击等操作,来获取某元素在页面中的位置,然后在该位置添加某些操作 如 ...

  9. jquery获取元素在文档中的位置信息以及滚动条位置（转）

    jquery获取元素在文档中的位置信息以及滚动条位置 http://blog.csdn.net/qq_34095777/article/details/78750886     原文链接 原创 201 ...

随机推荐

  1. MVC 4 结合jquery.uploadify 上传实例

    前言:由于今天公司源代码服务瘫痪,没法编写代码,利用这个有限的时间,做了一个小小的 基于MVC的图片上传demo,貌似近些年来MVC十分火爆,相关的demo也数不胜数,小弟就在这里打着MVC的旗子,狐 ...

  2. oracle 查询表的大小，表空间的使用情况，默认表空间

    oracle 查询表的大小,表空间的使用情况,默认表空间 oracle 查询表的大小,表空间的使用情况,默认表空间 --查看某张表占用磁盘空间大小 ( 表名大写 ) Select Segment_Na ...

  3. Qt for Linux：环境搭建（CentOS 6.5 32位）——完全从零安装

    正文开始前,我们假设,用户可以操作终端 拥有root权限,以下所有操作也均由root完成 可以上网 安装了CentOS 6.5 32位 注:红色部分,每个人可能都不一样 话不多说,列出本章大致流程 1 ...

  4. Android软件版本更新

     转的:适合新手学习,但在实际项目中不可这么做. 以下是我转的内容: ================================================================= ...

  5. poj1547---结构数组

    题意:老师发给每个学生的橡皮泥相同,找出谁抢了谁的橡皮泥 思路:结构数组存储每个学生的橡皮总量,和名字 /* 结构数组存储用户信息--只放名称和体积 while输入循环复用长宽高变量 for循环求所有 ...

  6. Linux一键安装web环境全攻略（阿里云服务器）

    摘自阿里云服务器官网,此处 一键安装包下载: 点此下载 安装须知 1.此安装包可在阿里云所有linux系统上部署安装,此安装包包含的软件及版本为: nginx:1.0.15.1.2.5.1.4.4 a ...

  7. [置顶] How to compile openjdk 7 in RHEL5

    1. 为什么要编译openjdk的code? 因为从Eclipse调试JDK的代码时,方法中的局部变量不能显示,这样是因为编译JDK时,没有编译成debug版本. 2. RHEL5中自带的开发者JDK ...

  8. Selector、shape详解，注意这两种图像资源都以XML方式存放在drawable不带分辨率的文件夹中

    Selector.shape详解(一) Selector的结构描述: <?xml version="1.0" encoding="utf-8"?> ...

  9. oracle传输表空间功能测试（含详细过程）

    最近做数据迁移,之前有一篇迁移思路思考的文章,这里继续做具体的测试,主题问表空间传输. 一.源服务器上导出表空间 源服务器:   10.1.122.55 目标服务器:10.1.122.54 0.设置字 ...

  10. sql server group by having 之复习篇

    where 与 having 之间的差别在于where 是分组前的过滤,而having是分组后的过滤 Group By中Select指定的字段限制 示例3 select 类别, sum(数量) as ...