前端面试宝典（整理ing）

蔚落 2022-07-17 03:58 599阅读 0赞

1、Doctype作用？标准模式与兼容模式各有什么区别？

（1）<!DOCTYPE>声明位于HTML文档中的第一行，处于html标签前面，告知浏览器的解析器需要用什么**文档标准解析**这个文档。Doctype不存在或格式不正确会导致文档**以兼容模式呈现**。

（2）标准模式的排版和JS运作模式都是以浏览器支持的最高标准允许。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老浏览器的行为以防止站点无法工作。

2、HTML5为什么只需要写<!DOCTYPE HTML>?

HTML5**不基于SGML**，因此不需要对DTD进行引用，但是需要Doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML，所以需要DTD进行引用，才能告知浏览器文档所使用的文档类型。

3、页面导入样式时，使用link和@import有什么区别？

（1）link属于XHTML标签，除了加载css外，还能定义RSS，定义rel连接属性等作用；而@import是**css提供的，只能用于加载css**；

（2）页面被加载时候，link会同时被加载，而@inport引用的css会**等到页面被加载完再加载**；

（3）import是css2.1提出的，只有在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

4、介绍一下你对浏览器内核的理解，常见的浏览器内核？

主要分为两部分：渲染引擎（layout engineer或Rendering Engine）和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等）、整理讯息（加入css等），以及计算网页的显示方式，然后输出至显示器。浏览器内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。

JS引擎：解析和执行JavaScript来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

常见的内核：**Trident内核**：IE，MaxTom，腾讯TT，The World，360，搜狗浏览器等；---**Gecko内核**：Netscape6及以上版本，FF，等；---**Presto内核**：Opera7及其以上；---**Webkit内核**：safari，Chrome等。Blink内核是Webkit内核的分支。

5、html5有哪些新特性、移除了哪些元素？

HTML5已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。绘制canvas；用于媒介回放的video和audio元素；本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除；语义化更好的内容元素，比如article、footer、header、nav、section；表单控件，calender、date、time、email、url、search；新的技术webworker，websocket、Geolocation；

删除的元素：纯表现的元素：basefont、big、center、font、s、strike、tt、u；对可用性产生影响的元素：frame、frameset、noframes；

6、简述一下对HTML语义化的理解？

用正确的标签做正确的事。html语义化让页面的内容结构化，结构更清晰，便于对浏览器、**搜索引擎解析**；即使在没有样式css情况下也以一种文档格式显示，并且**容易阅读**；搜索引擎的爬虫也依赖于HTML标记来确定上下文各个关键字的权重，**利于SEO**；使阅读源代码的人更容易将网站分块，便于**阅读维护理解**。

7、HTML5离线存储怎么使用，原理？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。原理：HTML5的离线存储是基于一个新建的appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储下来。之后当网络在处于离线状态下，浏览器会通过被离线存储的数据进行页面展示。

8、浏览器是怎么对HTML5的离线存储资源进行管理和加载的呢？

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源存储页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生变化，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源进行离线存储。离线的话，浏览器就会直接使用离线存储的资源。

9、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用的hack的技巧？

（1）png24位的图片在IE6浏览器上出现背景，解决办法----做成PNG8

（2）IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。----浮动IE产生的双倍距离 \#box\{ float: left;width: 10px; margin: 0 0 0 100px;\}，这种情况下，会产生20px的距离，解决办法是在float的标签样式控制中加入 \_display:inline；将其转化为行内属性。

（3）chrome中文界面下默认将小于12px的文本强制按照12px显示；------可通过加入css属性 -webkit-text-size-adjust：none；

10、对BFC规范（块级格式化上下文）的理解？

具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性，例如可以包含浮动元素。

满足下面任一条件的元素，会触发为 BFC ：

浮动元素，float 除 none 以外的值；

绝对定位元素，position（absolute，fixed）；

display 为以下其中之一的值 inline-blocks，table-cells，table-captions；

overflow 除了 visible 以外的值（hidden，auto，scroll）。

11、如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60HZ，即1s刷新60次，所以理论上最小间隔是1/60\*1000ms=16.7ms.

12、JS基本数据类型？

Undefined、Null、Boolean、Number、String