HTML5 面试题

1. HTML5的设计目的

        是为了在移动设备上支持多媒体之前网页如果想嵌入视频音频，需要用到 flash ，但是苹果设备是不支持 flash 的，所以为了改变这一现状，html5 应运而生

2. 语义化标签

        ①header：一个区块的头部信息/标题；②footer：一个区块的底部信息；③nav：导航栏区域；④section：一个通用独立章节或者区域。一般来说会包含一个标题。⑤article：一块独立区块，表示一块相对比较独立的内容；；⑥aside：表示一个和主体内容几乎无关的部分，可以被单独的拆分出来而不会使整体受影响。

        为了便于开发，以及更好的阅读的代码，还有SEO优化（就是便于浏览器找到这个网页，增加曝光量和浏览量）

3. 表单标签

        ①email：邮件控件；②url：地址控件；③range：数字范围控件；④date：选取日、月、年⑤month：选取月、年; ⑥week：选取周和年；⑦time：选取时间（小时和分钟））⑨search：搜索控件；⑩color：颜色控件

新增属性

        ①autofocus：自动获取焦点；②required：不能为空；③disabled：禁用；④hidden：隐藏

 4. 媒体标签

      ①video：视频；②audio：音频；③embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF 等。

5. 其他标签

        ①mark：标注；②progress：进度条；•<progress max="100" value="20"></progress>③time：数据标签，给搜索引擎使用；•发布日期 <time datetime="2014-12-25T09:00">9：00</time>•更新日期 <time datetime="2015-01-23T04:00" pubdate>4:00</time>； ④ruby 和 rt：对某一个字进行注释；•<ruby> 汉 <rt>han</rt> 字 <rt>zi</rt> </ruby>⑤canvas：绘图标签；⑥deteils ：展开菜单；⑦datalist：数据列表元素；

6. W3C标准

网页组成

①结构（骨架）：HTML用于描述页面的结构

②表现（皮肤）：CSS用于控制页面中的页面的样式

③行为（交互）：JS用于响应用户操作

对结构的要求

        标签字母要小写，并且要闭合

对行为的要求

        建议使用外链CSS和JS脚本，实现结构与表现分离，结构与行为分离，能提高页面的渲染效率，也能更快的显示网页内容 

7. 浏览器的渲染过程

        浏览器渲染原理

浏览器上的进程

（1）浏览器进程：负责tab页的管理

（2）浏览器渲染进程：负责页面的渲染

（3）GPU进程：用于3D绘制，例如用canvas进行3D绘图

（4）插件进程：插件运行在插件进程中

（5）网络进程：用于网络通信

渲染进程下的线程

（1）主线程：负责js运行，解析html和css

（2）工作线程：用于后台工作，计算处理数据

（3）光栅线程： 把文档结构(DOM)，文档样式(CSSOM)，文档几何信息(Layout)，文档图层                                    信息(Layer)显示到显示器的像素上

（4）合成线程： 把不同的图层按绘制顺序绘制到显示器

（5）定时器线程：负责定时器的处理

（6）事件处理线程：负责回调事件的处理

 

渲染流程（有渲染进程进行操作）

   静态资源 ==》构建DOM树 ==》CSSOM树构建 ==》渲染树构建 ==》页面布局 ==》页面绘制

        产生产物：    DOM树               CSSOM树               CSSOM树             盒模型            界面 

浏览器的渲染引擎模块

①HTML解析器：将HTML文档转换成DOM树

②CSS解析器：用于渲染树的构建

③JS解析器：JavaScript解释器能够解释JavaScript代码，并通过DOM接口和CSSOM接口来修改网页内容、样式规则，从而改变渲染结果

④页面布局：针对渲染树，计算其各个元素的大小、位置等布局信息

⑤页面绘制：将布局计算后的渲染树绘制成可视化的图像结果

一. DOM树构建（HTML 标签的层级关系）

        DOM的作用:

             ①DOM是生成页面的基础数据结构

             ②DOM提供 js 脚本操作的接口，进行改变文档的结构，样式和内容

             ③从安全的方面来看，不安全的内容会在DOM解析阶段会拒之门外

        构建流程

               通过栈的数据结构计算节点的父子结构（类似括号匹配）

                      1. 将文档标签字符拆分成头标签，内容，尾标签

                      2. 遇到头标签入栈

                      3.遇到尾标签出栈

二. CSSOM构建（选择器之间的层级关系）

        cssom的作用：

                ①提供给 js 操作的接口

                ②为渲染树的合成提供基础的样式信息

        css样式来源

                ①通过 link 引用的外部 CSS 样式文件

                ②<style>标签内的CSS样式

                ③style属性内嵌的CSS

三. 渲染树构建

         合成DOM树和CSSOM树，构建渲染树的原因主要是dom树上有一些元素会有display:none这种属性，是不会加到布局中

四. 页面布局

        通过计算渲染树上每个节点的样式，就能得出来每个元素所占空间的大小和位置，这个过程中，浏览器对渲染树进行遍历，将元素间嵌套关系以盒模型的形式写入文档流。

五.页面绘制

        对渲染树进行分层，在合成的操作，光栅线程将页面绘制到页面上

8. 回流（重排）和重绘

        回流是指在元素改变 尺寸，宽高，边框，内容，位置 都会引起重排

        重绘是指外观发生改变，但是没有改变布局

只引起重绘的属性

    ● color、background 相关属性：background-color、background-image 等；
 ● outline 相关属性：outline-color、outline-width 、text-decoration；
 ● border-radius、visibility、box-shadow。

避免回流的方法

        ①操作DOM时，尽量在低层级的DOM节点进行操作

        ②使用 absolute 或者 fixed，使元素脱离文档流，这样他们发生变化就不会影响其他元素

        ③将元素先设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。

        ④将DOM的多个读操作（或者写操作）放在一起，而不是读写操作穿插着写。

        ⑤使用动画

 9. 获取宽高

 ①系统屏幕

        window.screen.height         获取设备显示屏的高度

        window.screen.avaiHeight  获取屏幕的可用高度，指的是 显示屏高度 - 显示屏任务栏高度     

②浏览器

        window.outerHeight            浏览器的高度

        window.outerHeight            浏览器的可用高度，指的是 浏览器高度 - 顶部工具栏

③元素

        element.clientHeight           height+padding

        element.offsetHeight           height+padding+padding

④相对距离和位置

        element.offsetTop                元素到offsetParent顶部的距离

        注意：offsetParent是距离元素最近的一个具有定位的父元素（relative，absolute，fixed），而且元素渲染完成后才会计算offsetTop，会导致值偏小

⑤滚动距离

        获取滚动条到top，left的距离：element.scrollTop，element.scrollLeft