前端面试总结-HTML篇

212 阅读5分钟

1. 对标签语义化的理解

(1) 用正确的标签做正确的事情。
(2) html 语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
(3) 即使在没有样式 CSS 情况下也以一种文档格式显示,并且是容易阅读的;
(4) 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重,利于 SEO ;

2. 行内元素和块级元素的区别

行内元素有line-height,不能通过width和height来设置行内元素的宽和高,设置margin和padding不会对其他元素产生影响,不会独占一行
块级元素会重启一行,可以设置宽高。

3. 常见的行内元素和块级元素

行内标签:span,a,img,表单元素
块级标签:div,h1-h6,ul,ol,li,dl,dt,dd,p

4. 使用@import和link嵌入样式的区别

1.@import只能导入样式表,link可以加载CSS文件,定义RSS,rel的连接属性
2.页面加载的同时,link引入的CSS同时被加载,@import则是页面加载完成后再加载
3.@import兼容性差一些,只有在IE5+能被识别,link不存在兼容性问题
4.JS操作DOM插入link标签改变样式,@import则不行
从四个方面考虑此问题:1,作用2,加载顺序3,兼容性4,DOM操作的部分

5. 对浏览器,及浏览器内核的理解

为用户将请求的web资源呈现出来,从服务器请求资源,将其显示在浏览器的界面,用户通常用URI来指定请求资源的位置
渲染引擎和 JS 引擎:
渲染引擎的职责就是渲染,即在浏览器窗口中显示所请求的内容。默认情况下,渲染引擎可以显示 html、xml 文档及图片,它也可以借助插件显示其他类型数据,例如 PDF
JS 引擎:解析和执行 javascript 来实现网页的动态效果

7. 常见的浏览器和浏览器内核

IE Trident
Trident 内核和 W3C 标准脱节,内核有的大量 Bug,安全问题没有得到解决
firefox Gecko
功能强大、丰富,但是要消耗很多的资源
Safari Webkit
优点就是网页浏览速度较快,缺点是对于网页代码的容错性不高
Chrome Blink
Blink 引擎就是 Webkit 的一个分支

6. 浏览器的渲染原理

解析收到的文档,根据文档定义构建一棵 DOM 树。
然后对 CSS 进行解析,生成 CSSOM 规则树。
根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象,渲染对象是一个包含有颜色和大小等属性的矩形
渲染对象被创建并添加到树中,它们并没有位置和大小,所以当浏览器生成渲染树以后,就会根据渲染树来进行布局(也可以叫做回流)。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
布局阶段结束后是绘制阶段,遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上 JavaScript 的加载、解析与执行会阻塞文档的解析,也就是说,在构建 DOM 时,HTML 解析器若遇到了 JavaScript,那么它会暂停文档的解析,将控制权移交给 JavaScript 引擎,等 JavaScript 引擎运行完毕,浏览器再从中断的地方恢复继续解析文档。
也就是说,如果你想首屏渲染的越快,就越不应该在首屏就加载 JS 文件,这也是都建议将 script 标签放在 body 标签底部的原因,或者可以给 script 标签添加 defer 或者 async 属性。
大概过程:DOM树->CSSOM规则树->渲染树->自动重排->绘制->JS引擎执行JS代码

7. HTML5的新增元素有哪些

语意化更好的内容元素,比如 article、footer、header、nav、section;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除;
绘画 canvas;
表单控件calendar、date、time、email、url、search;
新的技术 webworker, websocket;
大概总结:1,语义化标签2,多媒体标签3,新的表单控件4,canvas5,存储6,webworker和websocket

8. 什么是重绘和回流

重绘: 更新属性只是影响元素的外观、风格,而不会影响布局的操作,比如 background-color
回流:会影响到布局的操作
任何会改变元素几何信息(元素的位置和尺寸大小)的操作,都会触发回流。

(1)添加或者删除可见的 DOM 元素;
(2)元素尺寸改变——边距、填充、边框、宽度和高度
(3)内容变化,比如用户在 input 框中输入文字
(4)浏览器窗口尺寸改变——resize事件发生时
(5)计算 offsetWidth 和 offsetHeight 属性
(6)设置 style 属性的值
(7)当你修改网页的默认字体时。

回流必定会发生重绘,重绘不一定会引发回流。回流所需的成本比重绘高的多,改变父节点里的子节点很可能会导致父节点的一系列回流。

9. DOMcontentload事件和Load事件的区别

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