3 photolemur 样式下载_前端面试题: （HTML ，css第3期）

每期10个面试题，每天更新一期基础，持续15天后，推送框架类面试题(如：css,vue,node,webpack,less,react,reactNactive,php等)，点击公众号查看其他语言基础

1.CSS 如何阻塞文档解析？

    理论上，既然样式表不改变 DOM 树，也就没有必要停下文档的解析等待它们，然而， 存在一个问题，JavaScript 脚本执行时可能在文档的解析过程中请求样式信息，如果样式还 没有加载和解析，脚本将得到错误的值，显然这将会导致很多问题。 

    所以如果浏览器尚未完成 CSSOM 的下载和构建，而我们却想在此时运行脚本，那么 浏览器将延迟 JavaScript 脚本执行和文档的解析，直至其完成 CSSOM 的下载和构建。也就 是说，在这种情况下，浏览器会先下载和构建 CSSOM，然后再执行 JavaScript，最后再继续 文档的解析。

2. 渲染页面时常见哪些不良现象？

    FOUC：主要指的是样式闪烁的问题，由于浏览器渲染机制(比如 firefox)，在 CSS 加 载之前，先呈现了 HTML，就会导致展示出无样式内容，然后样式突然呈现的现象。会出现 这个问题的原因主要是 css 加载时间过长，或者 css 被放在了文档底部。

    白屏：有些浏览器渲染机制(比如 chrome)要先构建 DOM 树和 CSSOM 树，构建完 成后再进行渲染，如果 CSS 部分放在 HTML 尾部，由于 CSS 未加载完成，浏览器迟迟未渲 染，从而导致白屏；也可能是把 js 文件放在头部，脚本的加载会阻塞后面文档内容的解析， 从而页面迟迟未渲染出来，出现白屏问题。

3. 如何优化关键渲染路径？

    为尽快完成首次渲染，我们需要最大限度减小以下三种可变因素：  

    (1)关键资源的数量。 

    (2)关键路径长度。

    (3)关键字节的数量。

    关键资源是可能阻止网页首次渲染的资源。这些资源越少，浏览器的工作量就越小， 对 CPU 以及其他资源的占用也就越少。

    同样，关键路径长度受所有关键资源与其字节大小之间依赖关系图的影响：某些资源 只能在上一资源处理完毕之后才能开始下载，并且资源越大，下载所需的往返次数就越多。最后，浏览器需要下载的关键字节越少，处理内容并让其出现在屏幕上的速度就越快。要减 少字节数，我们可以减少资源数(将它们删除或设为非关键资源)，此外还要压缩和优化各 项资源，确保最大限度减小传送大小。 

    优化关键渲染路径的常规步骤如下： 

    (1)对关键路径进行分析和特性描述：资源数、字节数、长度。  

    (2)最大限度减少关键资源的数量：删除它们，延迟它们的下载，将它们标记为异步 等。

    (3)优化关键字节数以缩短下载时间(往返次数)。

    (4)优化其余关键资源的加载顺序：您需要尽早下载所有关键资产，以缩短关键路径 长度。

4.什么是重绘和回流？

    重绘: 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而 不会影响布局的操作，比如 background color，我们将这样的操作称为重绘。 

    回流：当渲染树中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变而需要重 新构建的操作，会影响到布局的操作，这样的操作我们称为回流。常见引起回流属性和方法： 

    任何会改变元素几何信息(元素的位置和尺寸大小)的操作，都会触发回流。 

    (1)添加或者删除可见的 DOM 元素；

    (2)元素尺寸改变——边距、填充、边框、宽度和高度 

    (3)内容变化，比如用户在 input 框中输入文字 

    (4)浏览器窗口尺寸改变——resize 事件发生时 

    (5)计算 offsetWidth 和 offsetHeight 属性 

    (6)设置 style 属性的值 

    (7)当你修改网页的默认字体时。回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节 点里的子节点很可能会导致父节点的一系列回流。

5.如何减少浏览器回流？

   (1)使用 transform 替代 top 

   (2)不要把节点的属性值放在一个循环里当成循环里的变量 

   (3)不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局 

   (4)把 DOM 离线后修改。如：使用 documentFragment 对象在内存里操作 DOM

   (5)不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class， 然后修改 DOM 的 className

6.为什么操作 DOM 慢？

一些 DOM 的操作或者属性访问可能会引起页面的回流和重绘，从而引起性能上的消耗。

7.DOMContentLoaded 事件和 Load 事件的区别？

    当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发， 而无需等待样式表、图像和子框架的加载完成。Load 事件是当所有资源加载完成后触发的。 

8.HTML5 有哪些新特性、移除了那些元素?

   HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能 的增加。

    新增的有：绘画 canvas; 用于媒介回放的 video 和 audio 元素; 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失; sessionStorage 的数据在浏览器关闭后自动删除; 语意化更好的内容元素，比如 article、footer、header、nav、section; 表单控件，calendar、date、time、email、url、search; 

 新的技术: webworker, websocket; 新的文档属性 document.visibilityState 

    移除的元素有：纯表现的元素：basefont，big，center，font, s，strike，tt，u; 对可用性产生负面影响的元素：frame，frameset，noframes；

9.如何处理 HTML5 新标签的浏览器兼容问题？

(1) IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一 特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式。 

(2)当然也可以直接使用成熟的框架，

    比如 html5shim `` [if lte IE 9]……[endif] 判断 IE 的版本，限定只有 IE9 以下浏览器版本需要执行的语句。

10.简述一下你对 HTML 语义化的理解？

    (1) 用正确的标签做正确的事情。 

    (2) html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析; 

    (3) 即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的; 

    (4) 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO ;

    (5) 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

    回答：我认为 html 语义化主要指的是我们应该使用合适的标签来划分网页内容的结构。

    html 的本质作用其实就是定义网页文档的结构， 一个语义化的文档，能够使页面的结构更加清晰，易于理解。这样不仅有利于开发者 的维护和理解，同时也能够使机器对文档内容进 行正确的解读。比如说我们常用的 b 标签和 strong 标签，它们在样式上都是文字的 加粗，但是 strong 标签拥有强调的语义。对于一般显示来说，可能我们看上去没有差异，但是对于机器来说，就会有很大的不 同。如果用户使用的是屏幕阅读器来访问网页的话，使用 strong 标签就会有明显的语调上 的变化，而 b 标签则没有。如果是搜索引擎的爬虫对我们网页进行分析的话，那么它会依 赖于 html 标签来确定上下文和各个关键字的权重，一个语义化的文档对爬虫来说是友好的， 是有利于爬虫对文档内容解读的，从而有利于我们网站的 SEO 。从 html5 我们可以看出， 标准是倾向于以语义化的方式来构建网页的，比如新增了 header 、footer 这些语义标签， 删除了 big 、font 这些没有语义的标签。

 

点击上方蓝字，我们一起过圣诞