前端面试题

CSS

1、head 标签中必不少的是哪一个元素？

  title

2、input元素设置disabled时，其内容是否会随着表单提交？

不会。disabled 不会提交到服务器，不能被序列化，但能js取值赋值，界面上无法修改

3、CSS样式覆盖规则

!important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)

4、div居中有几种方法

.box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid pink;
      width: 100px;
      height: 100px;
}

5、box-sizing常用的属性有哪些？分别有什么作用？

（1）content-box
元素的宽高只是内容的宽高，不包含border+padding

（2）border-box
元素的宽高包含了:内容的宽高+border+padding

（3）inherit
从父元素继承box-sizing属性

6、img元素的title和alt有什么区别?

alt： 图片加载失败时，显示在网页上的替代文字
title： 鼠标放在上面时显示的文字
alt 是必要属性，title 非必要

7、行内元素有哪些？块级元素有哪些？ 空(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

区别：
行内元素
1、设置宽高无效
2、对margin仅设置左右方向有效，上下无效；padding上下左右都有效，会撑大空间
3、不会自动进行换行

块级元素
1、能够识别设置宽高
2、margin和padding的上下左右均对其有效
3、独占一行

8、HTML全局属性(global attribute)有哪些

html属性赋予元素意义和语境，可以用于任何的html元素
1、class：为元素设置类标识
2、data-*：为元素增加自定义属性
3、id：元素id，文档内唯一
4、lang：元素内容的语言
5、style：行内css样式
6、title：元素相关的建议信息
7、dir：规定元素中内容的文本方向（ltr：从左到右， rtl：从右到左）
8、contenteditable：html新增属性，设置true后可编辑元素
9、hidden：隐藏一个html元素

9、如何实现0.5px边框
定位 + 伪元素 + transform缩放（scale）

<div class="border"></div>
<style>
  .border {
      width:200px;
      height: 200px;
      background-color: red;
      margin: 0 auto;
      position: relative;
  }
  .border::before {
      content: "";
      position: absolute;
      left:0;
      top: 0;
      width: 200%;
      height: 200%;
      border: 1px solid blue;
      /* 以（0,0）为放缩中心点 */
      transform-origin: 0  0;
      /* 缩小一半 */
      transform: scale(0.5);
  }
</style>

利用阴影代替边框

<div class="box box3"></div>
.box {
   width: 360px;
   height: 50px;
   border-radius: 5px;
   margin-top: 20px;
   line-height: 50px;
}
.box3 {
   box-shadow: 0 0 0 0.5px red;
}

JS
1、cmd与amd的区别
2、网页加载不出来的原因
3、重排重绘
4、
5、手写去重代码
6、如下代码

for (var i = 0; i< 5; i++){
	setTimeout(() => {
		console.log(i);
    }, 1000)
}

1)写出代码的打印结果

结果：5 5 5 5 5

2）改造上面的代码，使之输出1>2>3>4，写出你能想到的所有解法。

// 使用闭包实现 
for (var i = 0; i < 5; i++) { 
	(function(mun) {
	    setTimeout(function() {
        	console.log(mun); 
	    }, mun * 1000); 
	})(i);
} 
// 使用 let 块级作用域 
for (let i = 0; i < 5; i++) {
	setTimeout(function() {
		console.log(i); 
	}, i * 1000);
}

7、['1','2','3'].map(parseInt)答案是多少？

这题看到的时候都懵逼了，还是太菜了 qaq
（1）map用法：
arr.map(function(el, index, arr) {
    return el
})
map方法接收一个函数参数，并且这个函数可以接收三个参数
el：遍历过程中的当前项，
index：遍历过程中的当前下标
arr: 原数组

（2）parseInt用法：
parseInt(str, num) 
根据num解析str，并返回一个整数。
str: 要解析的字符串，如果字符第一个数不能被转换，返回NaN。
num: 基数，介于 2 ~ 36 之间，如果传0，则默认用10计算。num不在区间内，返回NaN

（3）所以这道题，关键点就在num
el和index 相当于 str 和 num 带入一下
parseInt('1', 0) // '1' 用基数10算 为1
parseInt('2', 1) // NaN
parseInt('3', 2) // NaN

所以答案是: [1,NaN,NaN]

8、写出如下代码的打印结果

var length = 10;
function fn () {
    console.log(this.length);
}
var obj = {
    length: 5,
    method: function (fn) {
        fn();
        arguments[0]();
    }
};
obj.method(fn, 1);
//结果： 10  2
// 第二次执行arguments0，相当于arguments调用方法，this指向arguments，而这里传了两个参数，故输出arguments长度为2

var name = '李明';
function say() {
 	var name = '张三';
	console.log(name);
	console.log(this.name);
};
const perSon = {
	name: '王麻子',
	sayName: say,
	sayName1: function() {
		say();
		say.call(this);
	}
}
say(); // '张三' '李明'
say.call(perSon); // '张三' '王麻子'  call方法改变this指向
perSon.sayName(); // '张三' '王麻子'  只要函数被赋给另一个变量，this的指向就会变。
perSon.sayName1(); // '张三' '李明' '张三' '王麻子'

其他this指向计算：
this指向问题
【js】代码输出结果
9、写出如下代码的打印结果

var a = b = 10;
(function(){
	var a = b = 20;
})()
console.log(a, b)
//结果： 10  20

// var a = b = 10; 实际是以下声明的简写：
// b = 10;
// var a = b;

//这个时候就是b = 10; var a = b; 所以a = 10; 
//之后再在一个立即执行函数里面，在这个作用域下执行了var a = b = 20;
//就相当于b = 20; var a = b; 因为这时候b在全局外部已经声明了所以修改的就是全局的变量。
//而a前面还有var ,所以这个a只是针对该作用域下的变量。并没有修改全局变量的a.

10、函数本身的作用域
函数本身也是一个值，也有自己的作用域。它的作用域与变量一样，就是其声明时所在的作用域，与其运行时所在的作用域无关。

var a = 1;
var x = function () {
  console.log(a);
};
function f() {
  var a = 2;
  x();
}
f() // 1
// 函数x是在函数f的外部声明的，所以它的作用域绑定外层，内部变量a不会到函数f体内取值，所以输出1，而不是2。

var x = function () {
  console.log(a);
};
function y(f) {
  var a = 2;
  f();
}
y(x) // ReferenceError: a is not defined

同样的，函数体内部声明的函数，作用域绑定函数体内部。

function foo() {
  var x = 1;
  function bar() {
    console.log(x);
  }
  return bar;
}

var x = 2;
var f = foo();
f() // 1

11、MVC与MVVM的区别
12、防抖与节流
13、http与https的原理与区别
http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。

https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份。
14、闭包
15、原项链
16、深浅拷贝
17、图片懒加载的原理
18、document.onload与$(document).ready()的区别
19、页面加载缓慢的可能原因有哪些
20、安全性和性能如何考虑
21、求数组中的最大值

// 方法一
var arr = [4, 22, 45, 1, 31, 52]
console.log(Math.max.apply(null, arr)) //  52
// 方法二
var arr = [4, 22, 45, 1, 31, 52]
var max = arr.reduce((a, b) => {
	return a > b ? a : b
})
console.log(max) //  52

21、计算一个数组arr所有元素的和

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 方法一
var sum = arr.reduce((a, b) => {
	return a + b
})
console.log(sum)

// 方法二
var sum1 = 0
for (var i = 0; i <= arr.length; i++) {
	if (typeof arr[i] == 'number') {
		sum1 += arr[i]
	}
}
console.log(sum1)

22、数组去重
var arr = [1, 2, 3, 4, 5, 5, 7, 7, 8, 3, 6]

// 方法一
var arr1 = Array.from(new Set(arr)) //或var arr1 = [...new Set(arr)]
console.log(arr1)
// 方法二
var arr2 = []
for (var i = 0; i < arr.length; i++) {
  if (arr2.indexOf(arr[i]) === -1) {
    arr2.push(arr[i])
  }
}
console.log(arr2)
// 方法三
 var arr3 = []
for (var i = 0; i < arr.length; i++) {
  if (!arr3.includes(arr[i])) {
    arr3.push(arr[i])
  }
}
console.log(arr3)

23、请描述一下 cookies sessionStorage和localstorage区别
相同点： 都存储在客户端
不同点：
1）存储大小

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

2）有效时间

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

3） 数据与服务器之间的交互方式

• cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
• ·sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

24、eval()的作用

把字符串参数解析成JS代码并运行，并返回执行的结果；

var a = eval('2+3') //执行加运算，并返回运算值。  
console.log(a) // 5
eval("var age=10") //声明一个age变量  
console.log(age) // 10

25、WEB标准以及W3C标准是什么?

1、标签闭合
2、标签小写
3、嵌套正确
4、外部链接css和js
5、提倡结构、表现和行为相分离（HTML结构、CSS表现、JavaScript行为）

26、哪些操作会造成内存泄露

1、意外的全局变量引起的内存泄露；如下：
	function leak() {
		leak = 'xxx' //leak成为一个全局变量，不会被回收
	}
2、清空DOM时，没有清理的DOM的引用
3、被遗忘的定时器
4、闭包引起的内存泄露
5、子元素存在引起的内存泄露

参考：https://www.cnblogs.com/lilife/p/14643377.html
27、浏览器缓存有哪些，通常缓存有哪几种

1、http缓存  是基于HTTP协议的浏览器文件级缓存机制。
2、websql   这种方式只有较新的chrome浏览器支持，并以一个独立规范形式出现。
3、indexDB  是一个为了能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的 API。
4、Cookie   一般网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）。
5、Localstorage   html5的一种新的本地缓存方案，目前用的比较多，一般用来存储ajax返回的数据，加快下次页面打开时的渲染速度。
6、Sessionstorage   和localstorage类似，但是浏览器关闭则会全部删除，api和localstorage相同，实际项目中使用较少。
7、application cache   是将大部分图片资源、js、css等静态资源放在manifest文件配置中。
8、cacheStorage   是在ServiceWorker的规范中定义的，可以保存每个serverWorker申明的cache对象。
9、flash缓存   这种方式基本不用，这一方法主要基于flash有读写浏览器端本地目录的功能。

28、关于JS事件冒泡与JS事件代理（事件委托）
1）事件冒泡
通俗易懂的来讲，就是当一个子元素的事件被触发的时候（如onclick事件），该事件会从事件源（被点击的子元素）开始逐级向上传播，触发父级元素的点击事件。
2）事件委托
事件委托，首先按字面的意思就能看你出来，是将事件交由别人来执行，再联想到上面讲的事件冒泡，是不是想到了？对，就是将子元素的事件通过冒泡的形式交由父元素来执行。下面经过详细的例子来说明事件委托。

 <ul id="parentUl">
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
    <li>li5</li>
  </ul>
  <script>
    var ul = document.getElementById('parentUl')
    ul.onclick = function (event) {
      var e = event || window.event,
        source = e.target || e.srcElement //target表示在事件冒泡中触发事件的源元素，在IE中是srcElement
      if (source.nodeName.toLowerCase() == 'li') {
        //判断只有li触发的才会输出内容
        console.log(source.innerHTML)
      }
      e.stopPropagation() //阻止继续冒泡
    }
  </script>

关于vue的面试题
1、vue的data为什么是个函数
2、计算属性与侦听器的区别，哪一个可以进行异步操作
3、父子组件如何传值
4、父子组件的生命周期顺序
5、路由的原理
6、双向数据绑定的原理
7、v-for中key的作用
8、v-for和v-if的优先级，为什么不能放在一起使用，如何优化
9、vue监听不到对象属性变动的原理和如何解决