前端面试总结（持续更新... ...）

这是我参与新手入门的第1篇文章

最近大三的学生都已经放假了，为了能够大四进入大厂，很多同学已经开始找前端的实习工作了。这篇文章主要讲一些HTML，css，JavaScript相对基础的面试题，毕竟前端三剑客，而且自己本身水平不高（笑），等技术成长还会再更新

浏览器输入url到页面呈现出来发生了什么？

1. 进行地址解析 解析出字符串地址中的主机，域名，端口号，参数等 

2. 根据解析出的域名 进行DNS解析 （1）.首先在浏览器中查找DNS缓存中是否有对应的ip地址，如果有就直 接使用，没有 机执行第二步 （2）.在操作系统中查找DNS缓存是否有对应的ip地址，如果有就直接使 用，没有就执 行第三步 （3）.向本地DNS服务商发送请求查找时候有DNS对应的ip地址。如果仍 然没有最后向RootServer服务商查询

3. 根据查询到的ip地址寻找目标服务器。（1）与服务器建立连接；（2）进入服务器，寻找对应的请求

4. 浏览器收到响应码开始处理

5. 浏览器开始渲染dom，下载css，图片等一些资源。直到这次请求完成

像这种概念类的题目，同学们不用非要按照我这个或者其他网上的答案来背，这主要是考察同学们对这个概念的掌握，只要能把大概步骤都说出来就可以了。

[,,,].join(", ")运行结果为 ( )

1. ", , , "

2. "undefined, undefined, undefined, undefined"

3.  ", , "

4. “”

JavaScript中使用字面量创建数组时，如果最末尾有一个逗号’,’，会被省略，所以实际上这个数组 只有三个元素（都是empty）： 

console.log([,,,].length);   //3 

而三个元素使用 join方法，只需要添加两次，所以结果为", , "，选3

这种数组我们可以通过array(3)创建，这代表创建一个有3个空元素的数组

关于HTML语义化，以下哪个说法是正确的？（ ）

1. 语义化的HTML有利于机器的阅读，如PDA手持设备、搜索引擎爬虫；但不利于人的阅读

2. Table 属于过时的标签，遇到数据列表时，需尽量使用 div 来模拟表格

3. 语义化是HTML5带来的新概念，此前版本的HTML无法做到语义化

4. header、article、address都属于语义化明确的标签

1，错误在于语义化就是为了利于人的阅读而产生的。2，错误Table标签语义化明确本就是用来做数 据列表的，用div来模拟则不满足标签语义化使用。3，语义化是为了利于人的阅读不管html还是html5或 者是xml都可尽量做到语义化。正确答案是4

将一个整数序列整理为升序，两趟处理后变为10,12,21,9,7,3,4,25，则采用的 排序算法可能是（3）

1. 插入排序
2. 快速排序
3. 选择排序
4. 堆排序

插入排序：基于某序列已经有序排列的情况下，通过一次插入一个元素的方式按照原有排序方式增加元素

快速排序：通过一趟排序算法把所需要排序的序列的元素分割成两大块，其中，一部分的元素都要小于 或等于另外一部分的序列元素，然后仍根据该种方法对划分后的这两块序列的元素分别再次实行快速排 序算法，排序实现的整个过程可以是递归的来进行调用，最终能够实现将所需排序的无序序列元素变为 一个有序的序列

选择排序：第一次从待排序的数据元素，然后放到已排序的序列的末尾。以此类推，直到全部待排序的 数据元素的个数为零。选择排序是不稳定的排序方法

堆排序：指利用堆这种数据结构所设计的一种排序算法。堆是一个近似完全二叉树的结构，并同时满足 堆积的性质索引总是小于（或者大于）它的父节点。堆中的最大值总是位于根节点（在优先队列中使用 堆的话堆中的最小值位于根节点）。

rbga()和 opacity的透明效果有什么不同？

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的 透明度；而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果） 

title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？ 

title用于网站信息标题，突出网站标题或关键字，一个网站可以有多个title，seo权重高于H1；H1概括的是文章主题，一个页面最好只用一个H1，seo权重低于 title

从网站角度而言，title则重于网站信息标题，突出网站标题或关键字用title，一 篇文章，一个页面最好只用一个H1，H1用得太多，会稀释主题；一个网站可以 有多个title，最好一个单页用一个title以便突出网站页面主题信息。

从文章角度而言，H1则概括的是文章主题，突出文章主题，用H1，面对的用 户，要突出其视觉效果。

b为了加粗而加粗，strong为了标明重点而加粗；b这个标签对应 bold，即文本加粗，其目的仅仅是为了加粗显示文本，是一种样式／风格需求；strong这个标签意思是加强字符的语气，表示该文本比较重要，提醒读者／终端 注意。为了达到这个目的，浏览器等终端将其加粗显示

i为了斜体而斜体，em为了标明重点而斜体，且对搜索引擎来说strong 和em比b和i要重视的多

为什么要初始化CSS样式？

(1) 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS初始化往往会出现浏览器之间的页面显示差异。

(2) 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小 的情况下初始化。

最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）

淘宝的样式初始化代码： 

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre,
form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53;
}
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

什么是防抖和节流？有什么区别？

**防抖(debounce)：**触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件 再次被触发，则重新计算时间。

举例：就好像在百度搜索时，每次输入之后都有联想词弹出，这个控制联想词的方法 就不可能是输入框内容一改变就触发的，他一定是当你结束输入一段时间之后才会触发。

**节流(thorttle)：**高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的 执行频率。

举例：预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。就好像 你在淘宝抢购某一件限量热卖商品时，你不断点刷新点购买，可是总有一段时间你点 上是没有效果，这里就用到了节流，就是怕点的太快导致系统出现bug。

**区别：**防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时 间执行。 

暂时先写那么多，最近刚好在面试，有时间还会更新的。还是那句话，同学们不要背答案，一定要有自己的理解！！！很重要！！！理解了根本不需要背！我刚开始不理解的时候就是记不住QAQ

tips：同学们在面试回答问题的时候可以稍微扩展一下，或者加一点自己的理解，还有平时在写demo或者项目中用到的时候出现的问题都可以说一说，不要面试官问啥你就只回答啥。有些表达能力不是很好的同学会因此失去一份心怡的工作！（跟面试官交流的时候获知，有些同学是有能力的，但是面试表达不好被刷了）每个人都有不擅长的地方，非常正常，所以一定查漏补缺，扬长避短。