前端面试题（不定期更新）

曾经终败给现在 2022-06-06 03:24 231阅读 0赞

本文由我收集总结了一些前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。万不可投机取巧，临时抱佛脚只求面试侥幸混过关是错误的！也是不可能的！不可能的！不可能的  
前端还是一个年轻的行业，新的行业标准， 框架， 库都不断在更新和新增，正如赫门在2015JS大会上的《前端服务化之路》主题演讲中说的一句话：“每18至24个月，前端都会难一倍”，这些变化使前端的能力更加丰富、创造的应用也会更加完美。所以关注各种前端技术，跟上快速变化的节奏，也是身为一个前端程序员必备的技能之一。

1.面试注意  
2.HTML  
    2.1 Doctype作用？标准模式与兼容模式各有什区别？  
    2.2 HTML5 为什么只需要写 !DOCTYPE HTML？  
    2.3 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？  
    2.4 页面导入样式时，使用link和@import有什么区别？  
    2.5 介绍一下你对浏览器内核的理解？  
    2.6 常见的浏览器内核有哪些？  
    2.7 html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？  
    2.8 简述一下你对HTML语义化的理解？  
    2.9 HTML5的离线储存怎么使用，工作原理能不能解释一下？  
    2.10 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？  
    2.11 请描述一下 cookies，sessionStorage 和 localStorage 的区别？  
    2.12 iframe有那些缺点？  
3.CSS  
4.JavaScript

### 面试有几点需注意 ###

1.  面试题目： 根据你的等级和职位的变化，入门级到专家级，广度和深度都会有所增加。
2.  题目类型： 理论知识、算法、项目细节、技术视野、开放性题、工作案例。
3.  细节追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种知识关联是长时期的学习，临时抱佛脚绝对是记不住的。
4.  回答问题再棒，面试官（可能是你面试职位的直接领导），会考虑我要不要这个人做我的同事？所以态度很重要、除了能做事，还要会做人。（感觉更像是相亲）
5.  资深的前端开发能把absolute和relative弄混，这样的人不要也罢，因为团队需要的是：你这个人具有可以依靠的才能（靠谱）。

### 前端开发知识点 ###

*  HTML&CSS：  
    对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、HTML5、CSS3、Flexbox
 *  JavaScript：  
    数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs
 *  其他：  
    移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力

### 作为一名前端工程师，无论工作年头长短都应该掌握的知识点： ###

1.  DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
2.  DOM操作 —— 如何添加、移除、移动、复制、创建和查找节点等。
3.  事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。
4.  XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。
5.  严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。
6.  盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型
7.  块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们
8.  浮动元素 —— 怎么使用它们、它们有什么问题以及怎么解决这些问题。
9.  HTML与XHTML —— 二者有什么区别，你觉得应该使用哪一个并说出理由。
10. JSON —— 作用、用途、设计结构。

<table> 
 <tbody> 
  <tr> 
   <td>2.1 Doctype作用？标准模式与兼容模式各有什区别?</td> 
  </tr> 
 </tbody> 
</table>

1.  声明位于位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
2.  标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

<table> 
 <tbody> 
  <tr> 
   <td>2.2 HTML5 为什么只需要写 !DOCTYPE HTML？</td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td>2.3 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？</td> 
  </tr> 
 </tbody> 
</table>

首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

1.  行内元素有：a b span img input select strong（强调的语气）
2.  块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
3.  常见的空元素：  
    `<br> <hr> <img> <input> <link> <meta>`  
    鲜为人知的是：  
    `<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>`

不同浏览器（版本）、HTML4（5）、CSS2等实际略有差异  
参考: [http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements][http_stackoverflow.com_questions_6867254_browsers-default-css-for-html-elements]

<table> 
 <tbody> 
  <tr> 
   <td>2.4 页面导入样式时，使用link和@import有什么区别？</td> 
  </tr> 
 </tbody> 
</table>

1.  link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS；
2.  页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；
3.  import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

<table> 
 <tbody> 
  <tr> 
   <td>2.5 介绍一下你对浏览器内核的理解？</td> 
  </tr> 
 </tbody> 
</table>

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

*  渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
 *  JS引擎则：解析和执行javascript来实现网页的动态效果。  
    最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

<table> 
 <tbody> 
  <tr> 
   <td>2.6 常见的浏览器内核有哪些？</td> 
  </tr> 
 </tbody> 
</table>

Trident内核：IE，MaxThon，TT，The World，360，搜狗浏览器等。\[又称MSHTML\]  
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等  
Presto内核：Opera7及以上。\[Opera内核原为：Presto，现为：Blink\]  
Webkit内核：Safari，Chrome等。\[ Chrome的：Blink（WebKit的分支）\]  
详细文章：[浏览器内核的解析和对比][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td>2.7 html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？</td> 
  </tr> 
 </tbody> 
</table>

*  HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。  
    绘画 canvas；  
    用于媒介回放的 video 和 audio 元素；  
    本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；  
    sessionStorage 的数据在浏览器关闭后自动删除；  
    语意化更好的内容元素，比如 article、footer、header、nav、section；  
    表单控件，calendar、date、time、email、url、search；  
    新的技术webworker, websocket, Geolocation
 *  移除的元素：  
    纯表现的元素：basefont，big，center，font, s，strike，tt，u；  
    对可用性产生负面影响的元素：frame，frameset，noframes
 *  支持HTML5新标签：  
    IE8/IE7/IE6支持通过document.createElement方法产生的标签，  
    可以利用这一特性让这些浏览器支持HTML5新标签，  
    浏览器支持新标签后，还需要添加标签默认的样式  
    当然也可以直接使用成熟的框架、比如html5shim；

*  如何区分HTML5： DOCTYPE声明/新增的结构元素/功能元素

<table> 
 <tbody> 
  <tr> 
   <td>2.8 简述一下你对HTML语义化的理解？</td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td>2.9 HTML5的离线储存怎么使用，工作原理能不能解释一下？</td> 
  </tr> 
 </tbody> 
</table>

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

如何使用：  
1. 页面头部像下面一样加入一个manifest的属性；  
2. 在cache.manifest文件的编写离线存储的资源；  
CACHE MANIFEST  
\#v0.11  
CACHE:  
js/app.js  
css/style.css  
NETWORK:  
resourse/logo.png  
FALLBACK:  
/ /offline.html  
3. 在离线状态时，操作window.applicationCache进行需求实现。

<table> 
 <tbody> 
  <tr> 
   <td>2.10 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？</td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td>2.11 请描述一下 cookies，sessionStorage 和 localStorage 的区别？</td> 
  </tr> 
 </tbody> 
</table>

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。  
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。  
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：  
cookie数据大小不能超过4k。  
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：  
localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；  
sessionStorage：数据在当前浏览器窗口关闭后自动删除。  
cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

<table> 
 <tbody> 
  <tr> 
   <td>2.12 iframe有那些缺点？</td> 
  </tr> 
 </tbody> 
</table>

*  iframe会阻塞主页面的Onload事件；
 *  搜索引擎的检索程序无法解读这种页面，不利于SEO;
 *  iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript  
动态给iframe添加src属性值，这样可以绕开以上两个问题。

[http_stackoverflow.com_questions_6867254_browsers-default-css-for-html-elements]: http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements
[Link 1]: http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html