记录前端面试题

HTML面试题

1.Dom事件流？
• 捕获 - Capture - 事件由最顶层逐级向下传播, 直至到达目标元素.
• 冒泡 - Bubble - 顾名思义, 类似水中冒泡, 从下往上. 事件由第一个被触发的元素接收, 然后逐级向上传播.

1. 捕获阶段 - The capture phase - 事件从最顶层元素 window 一直传递到目标元素的父元素.
2. 目标阶段 - The target phase - 事件到达目标元素. 如果事件指定不冒泡. 那就会在这里中止.
3. 冒泡阶段 - The bubble phase - 事件从目标元素父元素向上逐级传递直到最顶层元素 window. 及捕获阶段的反方向.
   2.阻止事件冒泡与事件捕获阻止方法？
   非IE阻止事件冒泡和事件捕获 :
   e.stopPropagation()只阻止冒泡和捕获 / stopimmediatePropagation()除冒泡捕获之外，也可以阻止其他默认事件
   IE组止事件冒泡 e.cancleBubble=true
   3.阻止a标签默认事件？
   （1）document.getElementById(“link”).onclick = function () {
   return false;
   };
   （2）document.getElementById(“link”).onclick = function (e) {
   e = e || window.event;
   e.preventDefault ? e.preventDefault() : e.returnValue = false;
   };

CSS面试题

1.块级元素与行内元素区别？
块级元素
特点：1.每个块级元素都是独自占一行。
　　　2.元素的高度、宽度、行高和顶底边距都是可以设置的。　　
　 3.元素的宽度如果不设置的话，默认为父元素的宽度。
行级元素
特点：1.可以和其他元素处于一行，不用必须另起一行。
　　　2.元素的高度、宽度及顶部和底部边距不可设置。
　　　3.元素的宽度就是它包含的文字、图片的宽度，不可改变。
特点：1.可以和其他元素处于一行，不用必须另起一行。
　　　2.元素的高度、宽度及顶部和底部边距不可设置。
　　　3.元素的宽度就是它包含的文字、图片的宽度，不可改变。
2.盒模型？
1、标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。
标准盒模型下盒子的大小 = content + border + padding + margin
2、怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度
怪异盒模型下盒子的大小=width（content + border + padding） + margin

3.flexBox布局？
1.flex-direction ：row | row-reverse | column | column-reverse;
2.flex-wrap：nowrap | wrap | wrap-reverse
3.flex-flow： ||
4.justify-content：flex-start | flex-end | center | space-between | space-around（主轴对齐）
5align-items：flex-start | flex-end | center | baseline | stretch（交叉轴对齐）
6.align-content flex-start | flex-end | center | space-between | space-around | stretch;（多根线轴对齐方式）
4.清除浮动？

1. 父元素设置高
2. Overfloat:hidden
3. Clear:both ;其实就是利用清除浮动来把外层的div撑开
   5.margin边距重叠问题？
   外层元素padding代替
   内层元素透明边框 border:1px solid transparent;
   内层元素绝对定位 postion:absolute:
   外层元素 overflow:hidden;
   内层元素 加float:left;或display:inline-block;
   内层元素padding:1px;

JS面试题

1.typeof基础数据类型转换为数字？
String:‘1’=> 1
Number: 0 => 0
Bloon: true => 1
Undefind => NAN
Null => 0
2.array与 object区别？

1. 数组表示有序数据的集合，而对象表示无序数据的集合
2. Typeof数组所有引用类型都是Object的实例，所以用typeof返回的是Object
   可以用constructor instanceof Array 返回true
   3.判断数据类型有哪些方法？
3. typeof：
   typeof “”; //string
   typeof 1; //number
   typeof false; //boolean
   typeof undefined; //undefined
   typeof function(){}; //function
   typeof {}; //object
   typeof Symbol(); //symbol
   typeof null; //object
   typeof []; //object
   typeof new Date(); //object
   typeof new RegExp(); //object
4. instanceof：用来判断A是否为B的实例，
   {} instanceof Object; //true
   [] instanceof Array; //true
   [] instanceof Object; //true
   “123” instanceof String; //false
   new String(123) instanceof String; //true
   3.constructor：new Number(1).constructor = = Number
   4.引用数据类型转化数字？
   把引用数据类型转换为数字是先把它基于toString()转换为字符串,再转换为数字
   console.log(Number({num:“10”}));//NaN
   console.log(Number({}));//NaN ({num:“10”}).toString();是"[object Object]" 是非 有效数字字符所以是NaN
   console.log(Number([]));//0 [].toString()是"“所以转为数字是0
   console.log(Number([12]));//12 [12].toString()是"12"所以转为数字是12
   console.log(Number([12,23]));//NaN [12].toString()是"12,23"里面的”,"是非有效数字字符所以是NaN
   5.数组排序方法？
   (1)冒泡
   For (var i =0; i <arr.length; i++){
   For (var j=0; j <arr.length-i-1;j++){
   If(arr[j]>arr[j+1]){
   Var temp = arr[j];
   Arr[j] = arr[j+1];
   Arr[j+1] = arr[j];
   }
   }
   }
   (2)选择排序
   For (var i=0;i<arr.length;i++){
   For(var j = i+1; j < arr.length; j++){
   If(arr[i]>arr[j]){
   Var temp = arr[i];
   Arr[i] = arr[j];
   Arr[j] = arr[i];
   }
   }
   (3) 快速排序
   Function quictSort (arr){
   If (arr.length < = 1){return arr}
   Var povitIndex = Math.floor(arr.length/2);
   Var povit = arr.splice(povitIndex, 1)[0]
   Var left = [];
   Var right = [];
   For (var i = 0; i < arr.length; i ++){
   If (arr [i] < povit){
   Left.push(arr[i])
   }else {
   Right.push(arr[i])
   }
   Return quictSort(left).concat([pivot],quicksort(right))
   }

6.数组去重？
(1)Array.from(new set(arr))
(2) 利用for嵌套for，然后splice去重
function unique(arr){
for(var i=0; i<arr.length; i++){
for(var j=i+1; j<arr.length; j++){
if(arr[i]==arr[j]){
arr.splice(j,1);
j–;
}
}
}
return arr;
}
(3)利用indexOf去重
function unique(arr) {
if (!Array.isArray(arr)) {
console.log(‘type error!’)
return
}
var array = [];
for (var i = 0; i < arr.length; i++) {
if (array .indexOf(arr[i]) === -1) {
array .push(arr[i])
}
}
return array;
}

（4）利用filter
function unique(arr) {
return arr.filter(function(item, index, arr) {
//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
return arr.indexOf(item, 0) === index;
});
}
7.找出字符串中重复最多字符？
Var str = ‘asasasaddd’;
Var obj = { };
For(var i=0; i < str.length; i++){
If (!obj[str.charAt(i)]){
obj[str.charAt(i)] =1
} else {
obj[str.charAt(i)]++
}
}
Var max = 0;
Var maxStr;
For (var key in obj){
If (obj[key] > max) {
Max = obj[key];
maxStr = key;
}
}
8. Js中for循环的阻塞机制
Js阻塞机制，跟Js引擎的单线程处理方式有关，每个window一个JS线程。所谓单线程，在某个特定的时刻只有特定的代码能够被执行，并阻塞其它的代码。
当异步事件发生时，会创建事件并放入执 行队列中，等待当前代码执行完成之后再执行这些代码，如：
for(var i=0;i<3;i++){
setTimeout(function(){
console.log(i);
}, (i+1)*1000);
}
打印 3 3 3
9.cookie 与 session 之间的区别？
1、数据存放置不同：
cookie数据存放在客户的浏览器上，session数据放在服务器上。

2、安全程度不同：
cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗,考虑到安全应当使用session。

3、性能使用程度不同：
session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能,考虑到减轻服务器性能方面，应当使用cookie。

4、数据存储大小不同：
单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie，而session则存储与服务端，浏览器对其没有限制。
10.ES6有哪些新特性？
（1）解构 { } （2）箭头函数 => (3) 展开符 … (4)let / const声明 （5）类class (6) 模板字符串
11.var / let / cont 声明区别？
Var ： 变量提升 / 作用域（全局作用域/局部作用域）
Let: 不能变量提升 / 块级作用域 / 声明变量可更改
Cont : 声明常量不可更改
12．SetTimeOut 与 setinterval 区别？
SetTimeOut只执行一次
SetInterval 以指定时间为周期循环执行
清除定时器window.setTimeout(code,millisec)
13. 使用SetTimeOut实现setinterval功能？
setInterval = () =>{
console.log(1) //使用递归
setTimeout(setInterval,1000);
};
setInterval
14.按值传递和按引用传递？
按值传递：传递给形参的是实参值，不可更改实参值
按引用传递：传递实参地址给形参，可更改原始实参值
15.去除字符串中的空格
（1）str.trim() 去除所有空格
(2) str.replace(/(^\s*)|(\s*$)/g, ‘ ’)
**

Webpack面试题

**
1.有哪些常见的Loader？他们是解决什么问题的？
• file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
• url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去(图片加载)
• source-map-loader：加载额外的 Source Map 文件，以方便断点调试
• image-loader：加载并且压缩图片文件
• babel-loader：把 ES6 转换成 ES5
• css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
• style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
• eslint-loader：通过 ESLint 检查 JavaScript 代码
2.有哪些常见的Plugin？他们是解决什么问题的？
• define-plugin：定义环境变量
• commons-chunk-plugin：提取公共代码
• uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码
• html-webpack-plugin
3.Loader和Plugin的不同？
不同的作用
• Loader直译为"加载器"。Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
• Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。不同的用法
• Loader在module.rules中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）
• Plugin在plugins中单独配置。 类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入。
4.怎么配置单页应用？怎么配置多页应用？
单页应用可以理解为webpack的标准模式，直接在entry中指定单页应用的入口即可，这里不再赘述
多页应用的话，可以使用webpack的 AutoWebPlugin来完成简单自动化的构建，但是前提是项目的目录结构必须遵守他预设的规范。 多页应用中要注意的是：
• 每个页面都有公共的代码，可以将这些代码抽离出来，避免重复的加载。比如，每个页面都引用了同一套css样式表
• 随着业务的不断扩展，页面可能会不断的追加，所以一定要让入口的配置足够灵活，避免每次添加新页面还需要修改构建配置

promise
三种状态
1、pending[待定]初始状态
2、fulfilled[实现]操作成功
3、rejected[被否决]操作失败
当promise状态发生改变，就会触发then()里的响应函数处理后续步骤；
promise状态一经改变，不会再变。
Promise对象的状态改变，只有两种可能：
从pending变为fulfilled
从pending变为rejected。
这两种情况只要发生，状态就凝固了，不会再变了

Promise.all按照顺序发起，但是根据结果来说，它们是异步的，互相之间并不阻塞，每个任务完成时机是不确定的

Promise.race()
语法和all()一样，但是返回值有所不同，race根据传入的多个Promise实例，只要有一个实例resolve或者reject，就只返回该结果，其他实例不再执行。

URL到界面显示发生了什么

DNS解析
先本地缓存找，在一层层找
将常见的地址解析成唯一对应的ip地址基本顺序为：本地域名服务器->根域名服务器->com顶级域名服务器依次类推下去,找到后记录并缓存下来
TCP连接
三次握手，只要没收到确认消息就要重新发

主机向服务器发送一个建立连接的请求；
服务器接到请求后发送同意连接的信号；
主机接到同意连接的信号后，再次向服务器发送了确认信号,主机与服务器两者建立了连接。

发送HTTP请求
浏览器会分析这个url，并设置好请求报文发出。请求报文中包括请求行、请求头、空行、请求主体。

vue 双向绑定实现
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。vue3.0之后开始使用proxy实现对象的监听，避免了definePropety需要递归添加监听的问题。