Q1：CSS和JS在网页中的放置顺序是怎样的？
- CSS在网页中放置在网页的开头<head>~</head>中；
- js在网页中一般放置在网页结尾，推荐放置在<body>~</body>中，原因是JS脚本会阻塞后面的内容呈现和阻塞其他组件的下载。
Q2：解释白屏和FOUC
- 白屏：当JS放置在网页开头时，js脚本会阻塞后面内容的呈现，其他文档无法加载；只有在JS代码完全下载执行完毕后才能显示完整的文档内容，从而导致白屏问题的出现。
- FOUC：因为浏览器的加载机制是先加载HTML文档，再加载CSS的文档内容，最后再整合重新绘制HTML的文档。若是将样式放到底部，那么页面就会出现FOUS现象。（FOUC：页面首先出现无样式的内容，再CSS加载完成后，突然显示样式内容）
Q3. async和defer的作用是什么？有什么区别
- 再没有async和defer时，浏览器会立即加载并执行指定的脚本。sync和defer的作用就是当脚本放置在<head></head>中让脚本进行异步加载，不会阻止页面的渲染。
- async：在加载和渲染后续文档元素时将和JS脚本的加载和执行并行进行，每一弍拥有async的JS脚本都会在他加载结束之后立即执行，不等待后续的文档，造成的后果是原先拥有次序的脚本，顺序将被打乱。
- defer：在加载后续文档元素的过程将和JS脚本文件的加载并行进行，与async不同的是，其加载时的次序并不会被打乱。
Q4：简述网页的渲染机制
- 解析HTML标签，简历DOM树；
- 解析CSS标签，构建CSSOM树；
- 将DOM树和CSSOM树相结合构成render树；
4.再根据render树进行布局，分别计算每个节点的结构； - 再将每个节点都绘制到屏幕。
网友评论