前端面试题

2019-04-21

HTML/CSS部分
1.HTML5为什么只需要写<!DOCTYPE HTML>?

回答：

因为HTML5不是SGML的子集，所以不需要DTD引用，但是需要DOCTYPE来规范行为；
而HTML4.01是基于SGML，所以需要DTD引用，来告诉浏览器文档所使用的文档类型。

2.Doctype作用？标准模式与兼容模式各有什么区别?
回答：

Doctype用于向浏览器申明使用标准模式来解析文档；
标准模式是以浏览器最高级别来解析文档，而兼容模式是以向后兼容的方式来解析文档。

3.行内元素有哪些？块级元素有哪些？空(void)元素有那些？
回答：

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea；
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote；
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img；
在CSS规范中，每个元素都有display属性。display属性值为block的是块级元素，display属性值为inline的是行内元素。

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

link 在浏览器页面的时候并行加载，而@import需要等页面加载完成后才会加载；
link 是 XHML标签不存在兼容问题，而@import是css2.1提出的，IE5以上才支持；
link 还可以加载RSS和使用rel属性，而@import只能加载CSS；
link 加载的样式可以通过JS更改，而@import加载的样式不可以被JS更改。

5.介绍一下你对浏览器内核的理解？
回答：
1.浏览器内核一般被分为两个部分：渲染引擎和JS引擎：
1.1 渲染引擎：负责取得网页的内容(HTML,XML,图像等等)，整理讯息(引入CSS等)，通过计算来显示出网页(这个过程也称为回流)，然后输出至显卡，最后渲染为网页(这个过程称为重绘)；
1.2 JS引擎：获取网页的JS部分用来解析和执行以实现网页的动态效果。
2.最开始渲染引擎和JS引擎没有太大的区别，但是随着JS的发展并独立，内核就只指渲染引擎了。

6.常见的浏览器内核有哪些？
回答：1.Trident：IE 360浏览器等；
2.Gecko：Firefox等；
3.Presto：Opera7及以上，现为blink内核；
4.Webkit：Chrome，safari(现Chrome使用blink内核)；
5.blink：Chrome , opera(blink内核由谷歌和opera公司共同研发，是Webkit分支)。

7.什么是盒子模型？
回答：
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

8.CSS实现垂直水平居中：
回答：一道经典的问题，面试基本必问，实现方法有很多种，可以参考:https://www.otaozi.cn/web/html/47.html

9.简述一下你对HTML语义化的理解？
回答：

正确的标签做正确的事情；
爬虫可以根据文档结构来确定上下文，有利于SEO优化；
在无网络情况下不至于排版过于混乱；
结构化代码便于开发人员的开发和维护。

10.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
回答：

在线的情况下：首先判断是否是第一次访问网页，如果是就缓存。如果不是就比对新的manifest文件看看是不是发生过更改，发生则替换；
离线的情况下读取manifest文件使用离线资源。

11.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
回答：

Cookie 有大小限制，一般来说是4k。随着http请求一起发送至服务器端，可以设置过期时间，不设置的情况下在浏览器关闭的时候会清空；
SessionStorage可以保存较多数据，在浏览器关闭的时候会被清空，同时浏览主域名下不同子域名内容不会共享；
LocalStorage可可以保存较多数据，可以永久保存数据除非用户主动删除或清除缓存。

12.title与h1的区别、b与strong的区别、i与em的区别？
回答：

title表示网页标题，h1表示段落标题；
b表示文本加粗没有强调效果，strong表示文本加粗有强调效果；
i表示文本斜体没有强调效果，em表示文本斜体有强调效果。

13.GET和POST的区别
回答：

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在1024字节，Get是通过地址栏来传值。
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。（常用于发送表单数据，新建、修改等），Post是通过提交表单来传值。

14.简述一下src与href的区别？
回答：

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接；
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

15.什么是CSS Hack?
回答：

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack；
IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。例如：
2.1 条件Hack 
2.2 属性Hack

.test {
  color:#090\9; /* For IE8+ */ 
  *color:#f00;  /* For IE7 and earlier */ 
  _color:#ff0;  /* For IE6 and earlier */ 
}

2.3 选择符Hack

* html .test {
  color:#090;
}       /* For IE6 and earlier */ 
* + html .test{
  color:#ff0;
}     /* For IE7 */

16.简述同步和异步的区别？
回答：

同步是阻塞模式，异步是非阻塞模式；
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

17.什么叫优雅降级和渐进增强？
回答：

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

18.px和em的区别?

回答：

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易；
em得值不是固定的，并且em会继承父级元素的字体大小；
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

JavaScript部分

实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制。
回答：

/**
 * 对象克隆
 * 支持基本数据类型及对象
 * 递归方法
 */ 
function clone(obj) {
  var o
  switch (typeof obj) {
    case 'undefined':
      break
    case 'string':
      o = obj + ''
      break
    case 'number':
      o = obj - 0
      break
    case 'boolean':
      o = obj
      break
    case 'object':
      // object 分为两种情况 对象（Object）或数组（Array）
      if (obj === null) {
        o = null
      } else {
        if (Object.prototype.toString.call(obj).slice(8, -1) === 'Array') {
          o = []
          for (var i = 0; i < obj.length; i++) {
            o.push(clone(obj[i]))
          }
        } else {
          o = {}
          for (var k in obj) {
            o[k] = clone(obj[k])
          }
        }
      }
      break
    default:
      o = obj
      break
  }
  return o
}

2.如何消除一个数组里面重复的元素？
回答：

var arr1 = [1, 2, 2, 2, 3, 3, 3, 4, 5, 6],
  arr2 = []
for (var i = 0, len = arr1.length; i < len; i++) {
  if (arr2.indexOf(arr1[i]) < 0) {
    arr2.push(arr1[i])
  }
}
document.write(arr2) // 1,2,3,4,5,6

3.Javascript中callee和caller的作用？

回答：

caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

4.请描述一下cookies，sessionStorage和localStorage的区别。
回答：
1.相同点：都存储在客户端；
2.不同点：
2.1 存储大小不同
2.1.1 cookie数据大小不能超过4k；
2.1.2 sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.2 有效时间不同
2.2.1 localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
2.2.2 sessionStorage 数据在当前浏览器窗口关闭后自动删除。
2.2.3 cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
2.3 数据与服务器之间的交互方式不同
2.3.1 cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端；
2.3.1 sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

5.统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。
回答：

var str = 'aaaabbbccccddfgh'
var obj = {}
for (var i = 0; i < str.length; i++) {
  var v = str.charAt(i)
  if (obj[v] && obj[v].value == v) {
    obj[v].count = ++obj[v].count
  } else {
    obj[v] = {}
    obj[v].count = 1
    obj[v].value = v
  }
}
for (var key in obj) {
  document.write(obj[key].value + '=' + obj[key].count + ' ') // a=4  b=3  c=4  d=2  f=1  g=1  h=1
}

6.写一个function，清除字符串前后的空格。（兼容所有浏览器）
回答：

1
2
3

function trim(str) { 
    if (str && typeof str === "string") { return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符 }
}

vue部分：
1.请详细说下你对vue生命周期的理解？
回答：1.总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后；
2.创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有；
3.载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染；
4.更新前/后：当data变化时，会触发beforeUpdate和updated方法；
5.销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

2.请说下封装 vue 组件的过程？
回答：1.首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题；
2.然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。

3.说出至少4种vue当中的指令和它的用法？
回答：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定；

4.v-model是什么？怎么使用？ vue中标签怎么绑定事件？
回答：可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：<input @click=doLog() />

5.mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？
回答：一个model+view+viewModel框架，数据模型model，viewModel连接两个；
区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷。

6.Vue的双向数据绑定原理是什么？(或vue data是怎么实现的？)
回答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤：
第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter，这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化；
第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图；
第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1.在自身实例化时往属性订阅器(dep)里面添加自己
2.自身必须有一个update()方法
3.待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。