在构建页面时，我们会在html中载入一个或多个css和js文件。或许大家都已经习惯了“最佳实践”中，css文件应该放在<head>标签中引入，而js文件则是放在</body>关闭标签前引入的原则，但其中的原因，很多人可能像我之前一样，不是了解得很清楚。在查阅了书籍和资料后，稍微了解的其中的原由。

让我们先看一看浏览器中的渲染流程：

主流程：

详细流程：

当浏览器获得一个html文件时，会“自上而下”加载，并在加载过程中进行解析渲染。

         步骤：

  1. 浏览器将HTML解析成一个DOM Tree，DOM  Tree的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
  2. 将CSS解析成 CSS Rule Tree 。
  3. 根据DOM树和CSSOM合并构造 Render Tree（渲染树）。
  4. （注意：Render Tree 并不等同于 DOM 树，一些像 <head> 或 display:none 的元素不会放进渲染树）
  5. Layout，即布局阶段，顾名思义就是计算出每个节点在屏幕中的位置。因为有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。
  6. 最后是绘制，浏览器遍历Render Tree，使用UI后端层绘制Render Tree节点到屏幕。最终，我们就可以在屏幕上看到文档的内容。

整个浏览器渲染页面的流程就是这样，可以说正是因为这个渲染的过程，决定了我们html文档中css文件和js文件的引入位置。

在html中，css文件一般是由href加载，而js用src加载，这两者有什么不同呢？

href：是hypertext reference的缩写，表示超文本引用，用来建立当前元素和文档间的链接。常用的有link，a。

src：是source的缩写，表示资源，src指向的内容会嵌入到文档中当前标签的位置。常用的有img, script, iframe。

当css使用href引用时，当浏览器解析到该元素时，css文件会并行下载，不会阻塞DOM树的解析

当js使用src引用时，当浏览器解析到该元素时，会阻塞对文档和解析和渲染以及资源的下载，等待js文件的下载、解析和执行。直到脚本全部执行完毕，浏览器才会继续解析和渲染文档

为什么脚本会阻塞文档的解析和渲染？

因为脚本有直接操作DOM节点和样式的能力，例如 document.write，这意味着，在JS执行完成前，所有的资源加载解析可能是没有必要的

OK，了解了以上原因，现在应该可以理解为什么要将css放在头部而js放在底部引入了：

css在头部引入：在生成DOM Tree的同时，就可以同时对DOM Tree进行渲染，使页面更快的呈现在屏幕上。如果css放在底部引入，那么在DOM Tree已经生成完毕之后，还需要等待css文件的下载和解析，之后才能进行渲染并绘制，这样会导致页面长时间白屏。

js在底部引入：不会阻塞文件的加载和解析，在页面渲染完毕时才加载执行，不影响用户的浏览

读书笔记（一）—— 浅析浏览器渲染过程和html中的文件加载的更多相关文章

  1. 通过源码浅析Java中的资源加载

    前提 最近在做一个基础组件项目刚好需要用到JDK中的资源加载,这里说到的资源包括类文件和其他静态资源,刚好需要重新补充一下类加载器和资源加载的相关知识,整理成一篇文章. 理解类的工作原理 这一节主要分 ...

  2. JVM系列【3】Class文件加载过程

    JVM系列笔记目录 虚拟机的基础概念 class文件结构 class文件加载过程 jvm内存模型 JVM常用指令 GC与调优 Class文件加载过程 JVM加载Class文件主要分3个过程:Loadi ...

  3. 浅析dex文件加载机制

    我们可以利用DexClassLoader来实现动态加载dex文件,而很多资料也只是对于DexClassLoader的使用进行了介绍,没有深入讲解dex的动态加载机制,我们就借助于Android4.4的 ...

  4. Flutter学习笔记（25）--ListView实现上拉刷新下拉加载

    如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...

  5. web.xml被文件加载过程，各节点加载顺序总结

    web.xml被文件加载过程,各节点加载顺序总结 博客分类: J2EE WebXMLSpringServletBean  今天2010-3-11日,上班无事,想来将web.xml项目描述文件的加载过程 ...

  6. 读书笔记 - javascript 高级程序设计 - 第二章 在Html中使用JavaScript

    1 <script>的6个属性 async  立即下载当前script标签的外部脚本 但不能影响别的 charset 没用了 defer  文档显示之后再执行脚本,只对外部脚本有效 lan ...

  7. 浏览器中Javascript的加载和执行

    在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏 ...

  8. Ogre中Mesh的加载过程详述

    转自:http://blog.csdn.net/yanonsoftware/article/details/1031891 如果新开始写一个3D渲染引擎,Mesh应该是一个很好的切入点.当一个看似简单 ...

  9. spring加载过程中jar包加载不了，解决方法

    当我们在开发spring项目时,一般会将jar包放到webInf/lib下,这样是myeclipse自动将jar包加载到tomcat中webapps下,但是当我们新建一个lib文件夹的情况下,我们ad ...

随机推荐

  1. java——国际化详解

    深入理解Java国际化 假设我们正在开发一个支持多国语言的Web应用程序,要求系统能够根据客户端的系统的语言类型返回对应的界面:英文的操作系统返回英文界面,而中文的操作系统则返回中文界面--这便是典型 ...

  2. 微信支付之统一下单--JAVA版

    都说微信支付有些坑,都抱怨微信支付的文档太烂,一会APPId,一会商户id,还有appsecret,支付API秘钥让你傻傻分不清楚,还有这里大写那里小写,几种标准,让你眼花缭乱.没错,这就是很多技术团 ...

  3. workday1

    前天是实习的第一天,现在补下感想 总的来说还是不错的,师兄很nice,师妹很羞涩,我很尴尬,我的交际能力还是有待提高(主要是普通话不标准~~~~(>_<)~~~~) 早上由华工C12穿梭到 ...

  4. python命令行神器Click

    原文: http://www.lengirl.com/code/python-click.html Click 是用Python写的一个第三方模块,用于快速创建命令行.我们知道,Python内置了一个 ...

  5. vijos1196题解

    Matrix67和Shadow正在做一个小游戏. 桌子上放着两堆糖果,Matrix67和Shadow轮流对这些糖果进行操作.在每一次操作中,操作者需要吃掉其中一堆糖果,并且把另一堆糖果分成两堆(可以不 ...

  6. 一颗简单的hibernate栗子

    Hibernate是一个开源的ORM框架,顾名思义,它的核心思想即ORM(Object Relational Mapping,对象关系映射),可以通过对象来操作数据库中的信息,据说开发者一开始是不太熟 ...

  7. CJOJ 1943 【重庆八中模拟赛】寻找代表元（二分图最大匹配）

    CJOJ 1943 [重庆八中模拟赛]寻找代表元(二分图最大匹配) Description 八中一共有n个社团,分别用1到n编号. 八中一共有m个人,分别用1到m编号.每个人可以参加一个或多个社团,也 ...

  8. 细说Handler

    今天来说说Android一个重要类吧:Handler (我写的博客风格不适合新手,因为我讨厌新手教学,我都是直奔主题,不交代前因后果) 大家都知道Handler的用法一般是线程间的通讯,当然,一个线程 ...

  9. JDBC&&c3p0、事务、批处理、多线程 于一体的经典秘方QueryRunner

    目录: 基础篇_功能各自回顾 JDBC基础代码回顾(使用JdbcUtils工具简化) c3p0数据库连接池的使用(使用JdbcUtils工具简化) 大数据的插入(使用c3p0+JdbcUtils工具简 ...

  10. jenkins，SVN构建总是clean目录，回归失败

    近期发现配置的jenkins任务打包时间极长,经过定位为svn版本的问题,不同的svn版本.svn的信息存在不一致. 解决: 升级服务器svn版本. 调整jenkins系统设置: 测试通过(回滚成功) ...