90%的前端面试题都在这了

春招接近尾声，HR姐姐们也在抓紧推进面试进度，鉴于有些前端方向的小伙伴们正头疼于前端杂乱的知识而不知如何面试，内推羊这里给大家总结了一些常见的前端面试题，供大家需要时查阅，往下看吧，结尾有福利噢！

HTML&CSS

1.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

2.请描述一下cookies，sessionStorage和localStorage的区别？

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie, getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

3.谈谈以前端角度出发做好SEO需要考虑什么？

了解搜索引擎如何抓取网页和如何索引网页，你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。

4.简述一下src与href的区别。

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

5.你如何理解HTML结构的语义化？

去掉或样式丢失的时候能让页面呈现清晰的结构。

6.CSS都有哪些选择器？

派生选择器（用HTML标签申明）标签选择器；

id选择器（用DOM的ID申明）

类选择器（用一个样式类名申明）

属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）

除了前3种基本选择器，还有一些扩展选择器，包括

后代选择器（利用空格间隔，比如div .a{ }）

子代选择器：（div > p选择div下的第一个子元素p标签）

群组选择器（利用逗号间隔，比如p,div,a{ }）

7.BFC是什么?

BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题

BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

8.CSS的盒子模型？

（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了 border 和 pading;

（2）盒模型：内容(content)、填充(padding)、边界(margin)、 边框(border).

9.哪些css属性可以继承？

可继承：font-size font-family color, ul li dl dd dt，

不可继承 ：border padding margin width height 。

10.css优先级算法如何计算？

!important > id > class > 标签

!important 比 内联优先级高

* 优先级就近原则，样式定义最近者为准;

* 以最后载入的样式为准;

JS

1.javascript的typeof返回哪些数据类型?

alert(typeof[1,2]);//object

alert(typeof'leipeng');//string

vari=true;

alert(typeofi);//boolean

alert(typeof1);//number

vara;

alert(typeofa);//undefined

functiona(){;};

alert(typeofa)//function

2.split() 、join() 的区别？

前者是切割成数组的形式，后者是将数组转换成字符串。

3.”==”和“===”的不同？

前者会自动转换类型，只是比较数值，不比较数据类型，后者不会：即比较数据类型也有比较数值。

4.null，undefined 的区别？

null 表示一个对象被定义了，值为“空值”；

undefined 表示不存在这个值

typeof undefined //"undefined"

undefined :是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但还

没有定义。当尝试读取时会返回 undefined；例如变量被声明了，但没有赋值时，就等于 undefined

typeof null //"object"

null : 是一个对象(空对象, 没有任何属性和方法)；例如作为函数的参数，表示该函数的参数不是对象；

5.如何区分数组和对象？

方法一：通过 ES6 中的 Array.isArray 来识别

方法二：通过 instanceof 来识别

方法三：通过调用 constructor 来识别

方法四：通过 Object.prototype.toString.call 方法来识别

由于考虑到如果把所有面经放上来，会导致文章篇幅太长，不利于查看，于是我把面经整理到了一个文档，截图如下，需要的小伙伴可以回复公众号“前端面经”领取。

还有很多内容

最后，祝大家找工作顺利！！！