JS的相关概念
1. CSS和JS在网页中的放置顺序是怎样的？
-
CSS最好放入header中，即放在网页内容（html标签中包含的文字和图片等）和js脚本之前
<link href="index.css" rel="stylesheet"> -
S最好放在最后，即放在网页内容（html标签中包含的文字和图片等）和js脚本之后
<script src="index.js"></script>
2. 解释白屏和FOUC
- 白屏问题
- 白屏的根本原因是浏览器在渲染的时候没有请求到或请求时间过长造成的。
- 浏览器对于图片和CSS，在加载时会并发加载（比如一个域名下同时加载多个文件），浏览器对于JavaScript，在加载时会禁用并发，并且阻止其后的文件及组件的下载。所以将js放在页面的顶部也可能会导致白屏。
- 不同浏览器的处理CSS和HTML的方式是不同的：
比如，IE、chrome浏览器的渲染机制，采用的是等CSS全部加载解析完后再渲染展示页面。
Firefox则是在CSS未加载前先展示html的内容，等CSS加载后重新对样式进行修改。
由此我们可以推断出的结果是：
白屏的出现情况往往因为CSS样式被置于底部（最后加载）,当新窗口打开,刷新等的时候，页面会出现白屏。
如果使用 @import标签,它引用的文件则会等页面全部下载完毕再被加载，也可能出现白屏。
所以解决的办法是css使用 link 标签将样式表放在顶部，防止白屏问题出现。白屏不是bug，而是由于浏览器的渲染机制。
- FOUC
FOUC (Flash of Unstyled Content) 无样式内容闪烁：
如果把样式放在底部，对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面才突然展现出样式)。对于 Firefox 会一直表现出 FOUC 。 - 脚本会阻塞后面内容的呈现
- 脚本会阻塞其后组件的下载
对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件)。但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载。
所以所以尽量把 JavaScript 放入页面body底部。
3. async和defer的作用是什么？有什么区别
defer和async是script标签的两个属性，用于在不阻塞页面文档解析的前提下，控制脚本的下载和执行。
- 页面的加载和渲染过程：
- 浏览器通过HTTP协议请求服务器，获取HMTL文档并开始从上到下解析，构建DOM；
- 在构建DOM过程中，如果遇到外联的样式声明和脚本声明，则暂停文档解析，创建新的网络连接，并开始下载样式文件和脚本文件；
- 样式文件下载完成后，构建CSSDOM；脚本文件下载完成后，解释并执行，然后继续解析文档构建DOM
- 完成文档解析后，将DOM和CSSDOM进行关联和映射，最后将视图渲染到浏览器窗口，在这个过程中，脚本文件的下载和执行是与文档解析同步进行，也就是说，它会阻塞文档的解析，如果控制得不好，在用户体验上就会造成一定程度的影响。
所以我们需要清楚的了解和使用defer和async来控制外部脚本的执行。
- 作用
defer：用于开启新的线程下载脚本文件，并使脚本在文档解析完成后执行。
async：新增属性，用于异步下载脚本文件，下载完毕立即解释执行代码。
- 区别
-
<script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 -
<script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。 -
<script defer src="myscript.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
4. 浏览器的渲染机制
首先我们要了解几个概念
DOM
Document Object Model,浏览器将HTML解析成树形的数据结构；输出的树，也就是解析树，是由DOM元素及属性节点组成的。DOM是文档对象模型的缩写，它是html文档的对象表示，作为html元素的外部接口供js等调用。
CSSOM
CSS Object Model,浏览器将CSS解析成树形的数据结构
Render Tree
DOM和CSSOM合并后生成Render Tree
Layout
计算出Render Tree每个节点的具体位置
Painting
通过显卡，将Layout后的节点内容分别呈现到屏幕上
具体的流程：
当我们的浏览器获得html文件后，会自上而下的加载，并在加载过程中进行解析和渲染。
加载说的是获取资源文件的过程，如果在加载过程中，遇到外部css文件盒图片，浏览器会另外发出一个请求，来获取css文件盒相应的图片，这个请求是异步的，并不会影响html文件。
遇到JavaScript文件，html文件会刮起渲染的线程，等待JavaScript加载完毕后，html文件再继续渲染。
因为javascript可能会修改DOM，导致后续的html资源白白加载，所以html必须等待javascript文件加载完毕后，再继续渲染。这也就是为什么javascript文件要写在底部body标签前的原因。
html的渲染过程就是将html代码按照深度优先遍历来生成DOM树。
css文件下载完后也会进行渲染，生成相应的CSSOM。
当所有的css文件下载完且所有的CSSOM构建结束后，就会和DOM一起生成Render Tree。
浏览器就会进入Layout环节，将所有的节点位置计算出来。
通过Painting环节将所有的节点内容呈现到屏幕上。
常规流程
- 浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
- 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
- 如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
- 并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。
样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
JS、CSS中如有重定义，后定义函数将覆盖前定义函数。
浏览器的主要组件包括：
-
用户界面－包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
-
浏览器引擎－用来查询及操作渲染引擎的接口。
-
渲染引擎－用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。
-
网络－ 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
-
UI后端－用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
-
JS解释器－用来解释执行JS代码。
-
数据存储－属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database
技术（localstorage），这是一种轻量级完整的客户端存储技术
