前端面试题

01-HTML~02-CSS

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

• 要点一 : 该标签告知浏览器浏览文档要使用的HTML规范 , 告知浏览器以何种规范解析页面
• 要点二 : 声明对大小写不敏感

2.常用浏览器有哪些，内核都是什么？

答： 常用浏览器有chrome、safari、 IE、火狐(firefox) 、 Opera 、360、搜狗等

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
firefox	Gecko	可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari	webkit	现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。
chrome	Chromium/Blink	在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera	blink	Presto（已经废弃） 是挪威产浏览器 opera 的 “前任” 内核,现在跟随chrome用blink内核。

3.简述一下你对HTML语义化的理解？

1）为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构

2）用户体验：例如title、alt用于解释名词

3）有利于SEO：利于被搜索引擎收录，更便于搜索引擎的爬虫程序来识别

4）方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页

5）便于项目的开发及维护，使HTML代码更具有可读性

4.href与src的区别

1.href：Hypertext Reference的缩写，超文本引用，它指向一些网络资源，建立和当前元素或者说是本文档的链接关系。在加载它的时候，不会停止对当前文档的处理，浏览器会继续往下走。常用在a、link等标签。

2.src：source的所写，表示的是对资源的引用，它指向的内容会嵌入到当前标签所在的位置。由于src的内容是页面必不可少的一部分，因此浏览器在解析src时会停下来对后续文档的处理，直到src的内容加载完毕。常用在script、img、iframe标签中，我们建议js文件放在HTML文档的最后面。如果js文件放在了head标签中，可以使用window.onload实现js的最后加载。

总结：href用于建立当前页面与引用资源之间的关系（链接），而src则会替换当前标签。遇到href，页面会并行加载后续内容；而src则不同，浏览器需要加载完毕src的内容才会继续往下走。

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

1.从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

5.权重区别(该项有争议，下文将详解)

link引入的样式权重大于@import引入的样式。

6.CSS选择器优先级 && CSS选择器效率

!important > 内联样式 > ID选择器 > 类选择器（属性选择器、伪类选择器）> 元素选择器（伪元素选择器）> 通配符选择器

关于CSS的执行效率

样式系统从右向左匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。

是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点）；而从左向右的匹配规则的性能都浪费在了失败的查找上面。

7.CSS margin重叠问题

块元素在垂直方向上的margin是很奇怪的，会有重叠现象。

如果display都是block，有三种情况：

外间距均为正数，竖直方向上会选择最大的外边距作为间隔

一正一负，间距 = 正 - |负|

两个负，间距 = 0 - 绝对值最大的那个

设置display: inline-block的盒子不会有margin重叠，position: absolute的也不会出现。

8.网页布局有哪几种，有什么区别

静态、自适应、流式、响应式四种网页布局;

静态布局：意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；

自适应布局：就是说你看到的页面，里面元素的位置会变化而大小不会变化；

流式布局：你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

响应式布局：每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。

9.position属性和值的含义

position 属性规定元素的定位类型。

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
sticky	粘性定位(而sticky相当于加了一个滚动事件的处理，当页面滚动到相对应的元素上，就会变成固定定位的效果。当滚动到父元素不在可视区域范围内时，定位效果就会消失。)
static	默认值。没有定位，元素出现在正常的流中

10.display:inline-block 什么时候不会显示间隙？

1. 将子元素放置在同一行
2. 为父元素中设置font-size: 0，在子元素上重置正确的font-size
3. 为inline-block元素添加样式float:left
4. 设置子元素margin值为负数
5. 设置父元素，display:table和word-spacing

11.你对BFC的理解?

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域.

创建BFC

1. body根元素
2. 设置浮动,float的值是left或者right
3. 设置定位

• • position不是static或者relative
  • 是absoulte或者fixed

1. display的值是inline-block
2. 设置overflow

• • overflow的值不是visible
  • 是hidden，auto，scroll

1. 表格单元格，table-cell
2. 弹性布局，flex

利用BFC解决问题

1. 解决外边距的塌陷问题(垂直塌陷)
2. 利用BFC解决包含塌陷
3. 清除浮动产生的影响
4. BFC可以阻止标准流元素被浮动元素覆盖

03-JavaScript

1.null，undefined的区别？

• Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。
• Null类型也只有一个值，即null。
• null是javascript的关键字，可以认为是对象类型，它是一个空对象指针，和其他语言一样都代表“空值”，不过undefined却是javascript才有的。undefined是在ECMAScript第三版引入的，为了区分指针对象和未初始化的变量，它是一个预定义的全局变量。没有返回值的函数返回为undefined，没有实参的形参也是undefined。
• javascript权威指南：null 和 undefined 都表示 “值的空缺”，你可以认为 undefined 是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。
• javascript高级程序设计：在使用var声明变量但未对其加以初始化时，这个变量的值就是undefined。null值则是表示空对象指针。

2.逻辑运算符：或、与、非

|| : 只要其中有一个为true，整体结果是true；
&& : 只要有一个是false，整体结果是false；
!：取反 （比较：转布尔，在取反）

3.””和“=”的不同

答案：前者会自动转换类型,再判断是否相等

后者不会自动类型转换，直接去比较

==如何自动转换类型：
如果有一边的操作数是布尔值，则将true转换为1，false转换为0
如果有一边的操作符是字符串，则用Number（）方法将字符串转换为数值，再比较
null和undefined是相等的，而且不管是它俩之间相互比较还是它们中任何一个和别的比较，它俩都不会转换为其它任何值
NaN和任何值都不相等，包括它本身
一个操作数是对象，另一个不是对象时：调用对象的valueOf（）方法得到对象的基本类型值，再进行比较

4.总结String 对象操作方法

方法	描述
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接两个或更多字符串，并返回新的字符串。
fromCharCode()	将 Unicode 编码转为字符。
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。
includes()	查找字符串中是否包含指定的子字符串。
lastIndexOf()	从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
search()	查找与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。不包含结束的索引
split()	把字符串分割为字符串数组。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
trim()	去除字符串两边的空白
toString()	返回一个字符串。

5.函数声明与函数表达式的区别？

在Javscript中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。

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

答案：string,boolean,number,undefined,function,object

7.什么是作用域和作用域链，js有几种作用域分别是？

作用域（scope）

作用域是指程序源代码中定义变量的区域，简单来说，一段程序代码中所用到的变量并不总是有效的，而限定这个变量的可用性的代码范围就是这个变量的作用域。

js有三种:

• 全局作用域
  全局作用域是最外围的一个作用域。根据 ECMAScript 实现所在的宿主环境不同，表示全局作用域的对象也不一样。在浏览器中，全局作用域就是window对象，node则是global对象。
• 局部作用域
  和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的是函数内部。
• 块级作用域
  ES5本身是没有块级作用域，ES6 引入了块级作用域，让变量的生命周期更加可控，使用let和const声明的变量在指定块（简单理解就是一对花括号）的作用域外无法被访问。

作用域链（scope chain）

一般情况下，变量取值到创建这个变量的函数的作用域中取值。但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

8.new操作符具体干了什么呢?

1. 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2. 属性和方法被加入到 this 引用的对象中。
3. 新创建的对象由 this 所引用，并且最后隐式的返回 this 。

9.请说出你熟悉的数组的操作方法并说出如何使用?

//改变原数组方法:
var arr = []
arr.push() //数组末尾添加
arr.pop() //数组末尾删除
arr.unshift() //数组头部添加
arr.shift() //数组头部删除
arr.splice() //方法向/从数组中添加/删除项目，然后返回被删除的项目。
arr.reverse() //方法用于颠倒数组中元素的顺序。
arr.sort() //方法用于对数组的元素进行排序。
//不改变原数组方法:
var arr = []
arr.includes(); // 方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true，否则返回 false。
arr.indexOf(); //方法可返回某个指定的字符串值在字符串中首次出现的位置。
arr.lastIndexOf(); //方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
arr.slice(); //方法可从已有的数组中返回选定的元素。
arr.join(); //方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
arr.toString();
arr.concat(); //方法用于连接两个或多个数组。

10.讲几个常见的js内置对象？

Object 是 JavaScript 中所有对象的父对象

数据封装类对象：Object、Array、Boolean、Number 和 String

其他对象：Function、Arguments、Math、Date、RegExp、Error

11.请说出至少三种减低页面加载时间的方法？

1. 压缩css、js文件
2. 合并js、css文件，减少http请求
3. 外部js、css文件放在最底下
4. 减少dom操作，尽可能用变量替代不必要的dom操作

12.简单数据类型和复杂数据类型

简单类型（基本数据类型、值类型）：在存储时变量中存储的是值本身，包括String ，Number，Boolean，Undefined，Null

复杂数据类型（引用类型）：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等；

13.添加 删除 替换 插入到某个接点的方法？

1.创建新节点

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

2.添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

remove()//删除所有的子元素

3.查找

getElementsByTagName() //通过标签名称

getElementsByClassName() //通过元素的class属性的值

getElementById() //通过元素Id，唯一性

14.DOM 事件流是什么?如何阻止事件冒泡？

• 事件流：从页面中接收事件的顺序。也就是说当一个事件产生时，这个事件的传播过程，就是事件流。
  事件流包括三个阶段事件捕获,目标阶段,事件冒泡。
• 事件捕获 目标阶段 事件冒泡
• 阻止事件冒泡:event.stopPropagation()

15.Javascript的事件流模型都有什么?

“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡。

JS事件流最早要从IE和网景公司的浏览器大战说起，IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。

16.什么是事件委托?说一说事件代理,优缺点是什么?

事件委托又叫事件代理,利用事件冒泡的原理，原本绑定在子元素身上的事件，现在绑定在父元素身上，由父元素监听事件的行为。

优点:

1.可以减少事件注册,节省大量内存占用

2.可以将事件应用于动态添加的子元素上

缺点:

使用不当会造成事件在不应该触发时触发

17.说一下你对this的理解？

this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同

1. 普通函数this在非严格模式下指向window，严格模式下指向undefined
2. 构造函数this指向实例对象，原型对象里面的方法也指向实例对象
3. 对象方法中的this指向该方法所属的对象
4. 事件绑定方法中的this指向绑定该事件的对象
5. 定时器函数的this指向window
6. 立即执行函数中的this指向window

18.BOM 和 DOM 的关系

BOM全称Browser Object Model，即浏览器对象模型，主要处理浏览器窗口和框架。

DOM全称Document Object Model，即文档对象模型，是 HTML 和XML 的应用程序接口（API），遵循W3C 的标准，所有浏览器公共遵守的标准。

可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。

19.如何编写高性能的JavaScript,(前端如何优化)

• 将js脚本放在页面底部，加快渲染页面;
• 将js脚本成组打包，减少请求;
• 使用非阻塞方式下载js脚本;
• 尽量使用局部变量来保存全局变量;
• 尽量减少使用闭包;
• 使用window对象属性方法时省略window;
• 尽量减少对象成员嵌套;
• 缓存DOM节点的访问;
• 通过避免使用eval和function()构造器;
• 给setTimeout()和setInterval()传递函数而不是字符作为参数;
• 尽量使用直接量创建对象和数组;
• 最小化重绘(repaint)和回流(reflow);

20.eval是做什么的？

它的功能是把对应的字符串解析成JS代码并运行；

应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

21.简述window对象除 document以外的一些常用子对象，并描述其作用？

window对象有很多子对象，除了 document以外，还有如下常用子对象：

• screen对象：此对象包含有关客户端显示屏幕的信息
• history对象：此对象包含用户访问过的 URL；
• location对象：此对象包含有关当前 URL的信息
• navigator对象：此对象包含有关浏览器的信息
• event对象：任何事件触发后将会产生一个 event对象

04-HTML5-CSS3

1.HTML5有哪些新特性,移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

答：新增加了图像、位置、存储、多任务等功能。

新增元素：

1. canvas
2. 用于媒介回放的video和audio元素
3. 本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
4. 语意化更好的内容元素，比如 article footer header nav section
5. 位置API：Geolocation
6. 表单控件，calendar date time email url search
7. 新的技术：web worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行) web socket
8. 拖放API：drag、drop

移除的元素：

1. 纯表现的元素：basefont big center font s strike tt u
2. 性能较差元素：frame frameset noframes

兼容性问题:

1. 比如音频视频的兼容性,设定source标签来设置多个多媒体格式,适配不同的浏览器
2. 使用多重背景来适配,提高兼容性
3. 使用条件注释,比如:<!--[if lt IE 9]><script> src="http://XXXhtml5.js"</script><![endif]-->

区分：

1. DOCTYPE声明的方式是区分重要因素
2. 根据新增加的结构、功能来区分

2.谈谈iframe标签的优缺点?

iframe:是一个内联框架(行内框架),可以包含另外一个文档的内容。

iframe的优点：

1.iframe能够原封不动的把嵌入的网页展现出来。

2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

iframe的缺点：

1.会产生很多页面，不容易管理。

2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。

3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。

4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。

5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

3.CSS3新特性：

1. 颜色：新增RGBA，HSLA模式
2. 文字阴影（text-shadow）
3. 边框： 圆角（border-radius）边框阴影： box-shadow
4. 盒子模型：box-sizing
5. 背景：background-size 设置背景图片的尺寸background-origin 设置背景图片的原点background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局
6. 渐变：linear-gradient、radial-gradient
7. 过渡：transition，可实现动画
8. 自定义动画
9. 在CSS3中唯一引入的伪元素 ：selection.
10. 媒体查询，多栏布局
11. border-image
12. 2D转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)
13. 3D转换

14.新增选择器：属性选择器、伪类选择器、伪元素选择器。

4.说⼀说css3的animation

5.::before 和 :before中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

单冒号(:)用于CSS2的写法，双冒号(::)用于CSS3的写法。

::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在

页面之中

:before的兼容性要比::before好

6.flex属性举例说明

父元素属性

1.display:flex;（定义了一个flex容器）

2.flex-direction（决定主轴的方向）

row（默认值，水平从左到右）colunm（垂直从上到下）row-reverse（水平从右到左）column-reverse（垂直从下到上）

3.flex-wrap（定义如何换行）

nowrap（默认值，不换行）wrap（换行）wrap-reverse࿰