JS相关概念
2017-03-15 本文已影响0人
LINPENGISTHEONE
CSS和JS在网页中的放置顺序是怎样的？
-
首先要区分css和js的执行顺序
html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。
-
其次是一般情况的放置顺序
css样式放在head中。js放置在body标签内的最后，script标签内。外链用<script src=""></script>，内部的用<script></script>。
-
最后分析实际的放置顺序
1.一般将script脚本放在<body>之后，那样dom的生成就不会因为长时间执行script脚本而延迟阻塞，加快了页面的加载速度。
2.但是又不能将所有的script放在body之后，因为有一些页面的效果的实现，是需要预先动态的加载一些js脚本。所以这些脚本应该放在<body>之前。
3.不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效。
解释白屏和FOUC
白屏
- 如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现。
- 如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。
- 因为脚本会阻塞后面内容的呈现和其后组件的下载
对于图片和CSS，在加载时会并发加载（如一个域名下同时加载两个文件）。但在加载JavaScript 时，会禁用并发，并且阻止其他内容的下载。所以把JavaScript放入页面顶部也会导致白屏现象。
FOUC（Flash of Unstyled Content）无样式内容闪烁
- 对于IE浏览器，在某些场景下（点击链接，输入URL,使用书签进入等），会出现FOUC（Flash of Unstyled Content）无样式内容闪烁现象（逐步加载无样式的内容，等CSS加载后页面突然展现样式）。
- 对于Firefox会一直表现出FOUC。
async和defer的作用是什么？有什么区别
<script src="script.js"></script>
没有defer或async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
- async
<script async src="script.js"></script>
加载和渲染后续文档元素的过程将和 该script的加载与执行并行进行（异步）。脚本延迟到文档解析和显示后执行，有顺序。
- defer
<script defer src="script.js"></script>
加载后续文档元素的过程将和 该script的加载并行进行（异步），但该script的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。不保证顺序。
简述网页的渲染机制
- 解析 HTML 标签, 构建 DOM 树
- 解析 CSS 标签, 构建 CSSOM 树
- 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
- 在渲染树的基础上进行布局, 计算每个节点的几何结构
- 把每个节点绘制到屏幕上 (painting)
先了解几个基本概念
- DOM
Document Object Model,浏览器将HTML解析成树形的数据结构；输出的树，也就是解析树，是由DOM元素及属性节点组成的。DOM是文档对象模型的缩写，它是html文档的对象表示，作为html元素的外部接口供js等调用。 - CSSOM
CSS Object Model,浏览器将CSS解析成树形的数据结构。 - DOM和CSSOM合并后生成Render Tree。
4857510-426f6b0b1226a8a2.png
- Layout
计算出Render Tree每个节点的具体位置 - Painting
通过显卡，将Layout后的节点内容分别呈现到屏幕上。 - 具体的流程：
1.当我们的浏览器获得html文件后，会自上而下的加载，并在加载过程中进行解析和渲染。
2.加载说的是获取资源文件的过程，如果在加载过程中，遇到外部css文件盒图片，浏览器会另外发出一个请求，来获取css文件盒相应的图片，这个请求是异步的，并不会影响html文件。
3.遇到JavaScript文件，html文件会刮起渲染的线程，等待JavaScript加载完毕后，html文件再继续渲染。
4.因为javascript可能会修改DOM，导致后续的html资源白白加载，所以html必须等待javascript文件加载完毕后，再继续渲染。这也就是为什么javascript文件要写在底部body标签前的原因。
5.html的渲染过程就是将html代码按照深度优先遍历来生成DOM树。
6.css文件下载完后也会进行渲染，生成相应的CSSOM。
7.当所有的css文件下载完且所有的CSSOM构建结束后，就会和DOM一起生成Render Tree。
8.浏览器就会进入Layout环节，将所有的节点位置计算出来。通过Painting环节将所有的节点内容呈现到屏幕上。
