前端面试题之HTML - 张拓的天空

发表评论
647 次浏览

A+

所属分类：Web前端

摘要

HTML语义化就是使用正确的标签做正确的事；比如段落就用p标签，页眉就用header标签，页脚用footer标签，导航用nav标签，文章就用article标签，视频用video标签等等。

便宜好用的国外VPS推荐

如何理解HTML语义化

语义化HTML的好处有：

易于用户阅读：在没有CSS情况下，页面也能够更好的呈现内容结构与代码结构；
便于团队的开发和维护：更具有可读性，让代码更好的维护；
有利于SEO：搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重；
利于其他设备的解析：如屏幕阅读器、盲人阅读器，提高可访问性。

meta viewport是做什么用的，怎么写

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

参数	含义
width	设置layout viewport 的宽度，为一个正整数，或字符串"device-width"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport 的高度，这个属性对我们并不重要（很少使用）
user-scalable	是否允许用户进行缩放

你用过哪些HTML5标签

答：HTML5标签详细见参考链接

HTML5有哪些新特性？废除了哪些元素？如何让低版本的IE支持 HTML5新标签？

新特性

语义：新增加了<section>、<article>、<nav>、<header>、<footer>等标签。
连通性：增加Web Sockets、Server-sent events特性，帮助我们实现服务器将数据推送到客户端的功能。
离线 & 存储：对本地离线存储的更好的支持；localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除。
多媒体：<audio>和<video>元素嵌入并支持新的多媒体内容的操作。
2D/3D 绘图 & 效果：增加用于绘制图像的canvas，SVG矢量图像格式。
性能 & 集成：HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。
设备访问 Device Access：能够处理各种输入和输出设备。

废除的元素

表现元素：basefont、big、center、font、s、strike、tt、u。
部分浏览器支持的元素：applet、bgsound、blink、marquee。
对可用性产生负面影响的元素：frameset、frame、noframes,在html5中不支持frame框架，只支持iframe框架。

让低版本的IE支持HTML5新标签

使用html5shiv可以解决IE低版本不兼容的问题，只需要在head中加入当版本低于IE9时，浏览器会加载html5.js脚本，使得支持HTML5的新功能，也可以将脚本文件下载到本地。

<head>   <!--[if lt IE 9]>   <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'>   </script>   <![endif]--> </head>

H5是什么

首先H5 != HTML5
H5是指在手机这类无法播放Flash的移动端上呈现的，可以达到Flash效果的网页，也可称移动端PPT。

@import与link的区别

@import是CSS提供的语法规则，只有导入样式表的作用；link是HTML的标签，不仅可以加载CSS，还可以定义RSS、rel连接属性等。
页面被加载时，@import引入的CSS将在页面加载完毕后被加载；link标签引入的CSS被同时加载。
@import在IE5+才能被识别；link不存在兼容问题。
@import不支持使用JS控制DOM改变样式；而link支持。

常见的浏览器内核

浏览器的内核分成两部分：渲染引擎和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。
JS引擎：解析JavaScript语言，执行JavaScript语言来实现网页的动态效果。
常见的浏览器内核如下：

Trident内核（又称MSHTML）：IE、猎豹安全浏览器、360安全浏览器、搜狗浏览器、百度浏览器、UC浏览器等等；
Gecko内核：Netscape6及以上版本、FireFox等；
Webkit内核：Chrome、Safari等；
Presto内核（现为Blink）：Opera7及以上。

什么是重绘和重排（回流）

浏览器的渲染过程

构建DOM树：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括JS生成的标签），构建DOM树；
构建CSSOM树：解析对应的CSS样式文件（包括JS生成的样式和外部CSS样式），构建CSSOM树；
构建渲染树：CSSOM树构建结束后，和DOM树一起生成渲染树（Render Tree）。渲染树中每个node都有自己的style，而且渲染树不包含隐藏的节点（比如display:none;），因为这些节点不会用于呈现；
布局渲染树（Layout/reflow）：有了Render Tree后，从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标；
绘制渲染树（Painting/repaint）：遍历渲染树，将各个节点绘制在屏幕上。

前端面试题之HTML

重绘和重排

当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为重排。

在网页生成的时候，至少会渲染一次。在用户访问过程中，还会不断的进行渲染。

下面三个清空会导致网页重新渲染：

修改DOM
修改样式表
用户事件

重新进行渲染就需要重新生成布局并重新绘制，前者就叫做重排（回流），后者叫做重绘。

注意：重绘不一定会引发重排，但重排必定会引发重绘！

触发条件

触发重绘的条件：改变元素外观属性。例如：color、background-color等等。

触发重排的条件：

页面渲染初始化(这是无法避免的)
浏览器窗口尺寸改变（resize事件发生时）
元素位置的改变，使用动画
元素尺寸的改变：大小，外边距，边框
设置style属性
激活CSS伪类（例如：:hover）
添加或删除可见的DOM元素
填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变
查询或调用某些元素属性，比如：
- offsetTop/offsetLeft/offsetWidth/offsetHeight
- scrollTop/scrollLeft/scrollWidth/scrollHeight
- clientTop/clientLeft/clientWidth/clientHeight
- width/height
- getComputedStyle()
- currentStyle(IE)

注意：table元素的重排和重绘成本要高于div元素，因为table元素及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等的其他元素要花很多时间，这就是尽量避免使用table布局页面的原因之一。

提高性能的技巧

由于浏览器会尽量把所有的变动都集中在一起，排成一个队列，然后一次性执行，尽量避免多次重新渲染。因此，在DOM的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。
如果某个样式是通过重排得到的，那么最好缓存结果，避免下一次用到的时候，浏览器又要重排。
不要一条条地改变样式，而要通过改变class，或者csstext属性，一次性地改变样式。
先将元素设为display: none（需要1次重排和重绘），然后对这个节点进行100次操作，最后再恢复显示（需要1次重排和重绘）。这样就只用两次重新渲染。
position属性为absolute或fixed的元素，重排的开销会比较小，元素脱离了文档流，它的变化不会影响到其他元素；
尽量使用离线DOM，而不是真实的网面DOM，来改变元素样式。比如，操作Document Fragment对象，完成后再把这个对象加入DOM。再比如，使用 cloneNode() 方法，在克隆的节点上进行操作，然后再用克隆的节点替换原始节点。
只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，visibility : hidden的元素只对重绘有影响，不影响重排。
使用window.requestAnimationFrame()、window.requestIdleCallback()这两个方法调节重新渲染。