web前端 面试题

 什么是宏任务，什么是微任务 ？

宏任务和微任务都是异步任务在同步任务队列之后

宏任务是:包括整体代码script, setTimeout, setInterval、 setlmmediate（node 独有）

微任务:原生Promise

执行顺序
微观任务先于宏观任务

 闭包是什么，闭包的作用是什么

简单来说 函数内部使用 外面的变量

复杂的说 一个函数做为值在另外一个函数内返回，并且使用了，外层函数的变量

作用：防止全局污染，保存外部活动变量

 substr substring slice 之间有什么区别？

substring(1,5) 参数一开始的位置，参数二结束的位置，只能用于截取字符串 start,end

slice(1,5)     参数一开始的位置，参数二结束的位置，可以截取数组，可以传递负数 start,end

substr(1,5)    参数一开始的位置，参数二截取的长度，只能用于截取字符串，可以传负数 length

 typeof可以检测哪些数据类型  

number  Boolean  string  object  undefined  function

  检测是否是数组的方式？

var arr=[1,2,4,5,7,4,1,4,2,21,4]

   //es5
   console.log(Array.isArray(arr))

   //原型式
   console.log(Object.prototype.toString.call(arr)=='[object Array]')

   //instanceof
   console.log(arr instanceof Array)

   //constructor
   console.log(arr.constructor === Array)

 typeof,Instanceof 和constructor 检测数据类型有什么区别

用法不同，检测机制不同

typeof  一元运算符 返回一个表达式的数据类型的字符串，返回结果为js基本的数据类型，
包括number,boolean,string,object,undefined,function.
语法：typeof(data) 或 typeof data

instanceof  二元运算符
返回一个布尔值，该值指示一个对象是否为特定类的一个实例。
语法： object instanceof class

constructor 属性,存在于Object.prototype的属性
返回对象的构造函数，
语法： object.constructor

 cookie sessionStorage localstorage 的区别？

cookie   存储在浏览器  可以设置存储时间 不设置的话关闭浏览器数据清除 存放数据大小 4k左右

sessionStorage 关闭浏览器数据清除 存放数据大小 5m或者更大

localstorage 关闭浏览器数据不清除   除非手动清除数据 存放数据大小 5m或者更大

 函数节流(throttle)和函数去斗(debounce)

函数节流和函数去斗是解决什么问题的：

防止用户多次点击 多次请求ajax 可能导致浏览器崩溃，或者服务器崩溃

(1) 浏览器滚动事件scroll

(2)  鼠标的点击事件 mouseup, mousedown,mousemove

(3)  键盘的keyup, keydown， input事件

(4)  window的resize事件

以上四个场景中，事件都是连续触发的，如果也连续执行相应的回调函数，不但浪费资源，而且没有意义，
还有可能导致浏览器或者服务器崩溃

函数节流：
设定一个时间周期，周期性的执行一个函数

(只执行第一次)

函数去斗：
设定一个延迟时间，延迟时间到了再去执行函数，如果在延迟时间内重复调用则重新计算延迟时间

(执行最后一次)

 一个url地址输入到页面呈现在用户面前 发什么了什么？  

DNS解析：将域名解析为IP地址

Tcp的三次连接：tcp的三次握手{
	1，告诉服务端我要请求了，就问你允许不
	2，服务端收到访问响应一下说“可以”
	3，客服端说“那好我来了”
}

发送HTTP请求，请求头

服务器处理请求返回HTTP报文，响应头

浏览器解析渲染页面

断开连接tcp四次挥手

	
四次挥手：
	1，客户端说结束咱俩的关系
	2，服务端说知道并且确认了
	3，服务端告诉客户端可以关闭了
	4，客户端关闭

 闭包有什么缺陷？

滥用闭包会造成内存泄漏，因为闭包中引用的的包裹函数中定义的变量永远不会被释放，
所以我们在必要的时候机试释放这个闭包函数（赋值为null）

注意：此说法不一定正确，这个问题只有在IE里面出现 这是 IE 的问题，不是闭包的问题

参见司徒正美的这篇文章

https://www.cnblogs.com/rubylouvre/p/3345294.html

JavaScript中的事件流模型

冒泡事件流：
当触发一个节点的事件时，会从当前节点开始，依次触发其祖先节点的同类型事件，直到DOM根节点 

捕获事件流：
当触发一个节点的事件时，会从DOM根节点开始，依次触发其祖先节点的同类型事件，直到当前节点自身 

当使用addEventListener绑定事件，第三个参数设为true时表示事件捕获，除此之外的所有事件均为事件冒泡

 如何阻止事件冒泡和默认事件

e.stopPropagation()://标准浏览器

event.cancelBubble=true;//ie9之前

阻止默认事件:

为了不让a点击之后跳转，我们就要给他的点击事件进行阻止

return false

e.preventDefault();

添加、删除、替换、插入到某个节点的方法（js、jq）

js：
Document.createELement('div'); //创建一个新的节点
appendChild()//添加
removeChild()//删除节点
insertBefore（插入节点，被插节点）//插入（前插后）
replaceChild（新节点,旧节点）//替换（前替换后）


jq：
append() （旧节点添加新节点后面）
appendTo() （新节点添加到旧节点后面）
prepend() （旧节点添加新节点的前面）
prependTo() （新节点添加到旧节点的前面）//添加
remove()（//清空）
empty()//删除
replaceWith（）//替换

 window.onload和document .ready的区别

window.onload:

1》不仅要在结构和样式加载完，还要执行完所有的样式、图片这些资源文件，
全部加载完才会触发window.onload事件

2》window.onload: 只执行一次



Document.ready：

1》内存中加载完成就触发速度快

2》Document.ready多 次使用

Document.ready原生中没有这个方法，jquery 中有$(document).ready(function)可以多次执行|

== 和 === 的不同 a++ 和 ++a 有什么不同？  

==是只比较值是否相等

===比较数据类型和值 



a++ a先赋值，然后a自增1，最后返回赋值先进行表达式运算，再进行自增运算

++a 将A自增然后返回a 先进行自增运算，再进行表达式运算

 ajax 请求数据时get和post方式有什么区别

$.get() 方法使用GET方法来进行异步请求的。   

$.post() 方法使用POST方法来进行异步请求的。

get请求会将参数跟在URL后进行传递，get方式传输的数据大小不能超过2KB

而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。

get方式传输的数据大小不能超过2KB 而POST要大的多

GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

typeof null 返回值是多少 为什么？

返回值 object 

因为 null指向一个空指针对象

 form中的input可以设置为readonly和disable，有什么区别

readonly不可编辑，但可以选择和复制；值可以传递到后台


disabled不能编辑，不能复制，不能选择；值不可以传递到后台

js 数组常用方法

pop()             删除并返回数组的最后一个元素
push()            表示向数组的末尾添加一个或多个元素
shift()           表示删除并返回数组的第一个元素
splice()          删除一个元素并且向删除的元素位置添加一个新元素
unshift()         表明向数组的开头添加一个元素或多个元素并且返回新的长度
sort()            表明对数组的元素进行排序，一般是升序排列
reverse()         表示颠倒数组中元素的顺序
toString()        表示把数组转化为字符串并返回结果
.slice()          表示从某个已有的数组返回选定的元素
join()            把数组的所有元素放入一个字符串
indexOf(el)       从头（序号0）开始查找元素 
lastIndexOf(el)   从尾部（序号1）开始查找元素

 js常用的字符串方法

toUpperCase:   把小写字母转成大写 
toLowerCase:   把大写转小写 
charAt:        通过索引获取字符 
charCodeAt:    通过索引获取对应字符的Unicode编码； 
substr:        截取 substr(m,n) 从索引m开始，截取n个字符； 
substring:     substring(m,n)：从索引m开始，截取到索引n，不包含n; (不支持负数) 
slice(m,n):    substring; 从索引m开始，截取到索引n，不包含n (支持负数) 
indexOf :      检测字符在字符串中第一次出现的索引位置； 
lastIndexOf :  检测字符在字符串中最后一次出现的索引位置； 
split:         把字符串按照特定的字符分隔数组中的每一项； 
replace:       替换;原有字符串不变；用新字符替换旧的字符 
concat :       拼接 
trim :         去空格 : 去除字符串中左右的空格；

简述link和@import的区别？

区别1:  link 是HTML标签，除了加载CSS外，还可以定义RSS等其他事务;
        @import 属于CSS范畴，只能加载CSS
区别2:   link引用CSS时，在页面载入时同时加载
        @import需要页面网页完全载入以后加载
区别3:   link 是HTML标签，无兼容问题
        @import 是在CSS2.1提出的，低版本的浏览器不支持
区别4:   link 支持使用Javascript 控制DOM去改变样式
        @import不支持

 http状态码有哪些分别表示什么？

200:请求已成功
302:临时重定向
304:禁止响应
403:服务器拒绝请求
404:请求失败
500:服务器错误

深拷贝，浅拷贝

浅拷贝是拷贝了对象的引用，当原对象发生变化的时候，拷贝对象也跟着变化；深拷贝是另外申请了
一块内存，内容和原对象一样，更改原对象，拷贝对象不会发生变化

(浅拷贝是拷贝一层，深层次的对象级别的就拷贝引用；深拷贝是拷贝多层，每一级别的数据都会拷贝出来)

浅拷贝实现：
(1)手动赋值
(2)Object.assign()


深拷贝方法:
(1)递归
(2)JSON.stringify结合JSON.parse
(3)递归拷贝
(4)...a

 js 导致内存泄漏的情况

大量使用全局变量
大量使用闭包()
清除DOM节点时，只清除节点，而没有删除事件
定时器不清除

Es6有哪些新特性

1) let声明变量和const声明常量，两个都有块级作用域
2)模板字符串字符串方法扩展（startsWith()判断字符串是否以特定的字串开始
      endsWith()判断字符串是否以特定的字串结束，还有字符串拼接 `` 反引号）
3)数组扩展方法
4) ... 展开运算符;结构赋值[a,b]=[b,a]
5) class类和继承 //react
6) Promise 解诀异步回调async await，几种状态
7)新增数据类型map set symbol（数据类型）
8)模块化expot导出 import导入 
9)箭头函数

 var let 和 const三者之间的区别

const：必须初始化，而且不能更改
var  : 定义的变量可以修改，如果不初始化会输出undefined，不会报错
let  : 块级作用域，函数内部使用let定义后，对函数外部无影响。
var可以重复申明，let不可以

使用箭头函数应该注意什么？

(1)用了箭头函数，this就不是指向window 而是声明时的外部环境
(2)箭头函数不可以使用arguments（参数的集合）对象
(3)箭头函数不能使用构造函数，也就是说不能使用new命令，否则会抛出一个错误

 Promise 中reject 和 catch 处理上有什么区别

reject是用来抛出异常，catch 是用来处理异常
reject是Promise的方法，而catch 是Promise 实例的方法
reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch
网络异常(比如断网)，会直接进入catch而不会进入then的第二个回调

 css3有哪些新特性

\1. CSS3实现圆角（border-radius），阴影（box-shadow），
\2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
\3.transform:rotate(9deg) scale(0.85,0.90) 
   translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
\4. 增加了更多的CSS选择器  多背景 rgba
\5. 在CSS3中唯一引入的伪元素是 ::selection.
\6. 媒体查询，多栏布局
\7. border-image

 html5有哪些新特性？

\1. 拖拽释放(Drag and drop) API
\2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
\3. 音频、视频API(audio,video)
\4. 画布(Canvas) API
\5. 地理(Geolocation) API
\6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
\7. sessionStorage 的数据在浏览器关闭后自动删除
\8. 表单控件，calendar、date、time、email、url、search  
\9. 新的技术webworker, websocket, Geolocation

Math的方法，写出他的单词和描述  

Math.abs(): 取绝对值； 
Math.floor() :向下取整 
Math.ceil() :向上取整 
Math.max() :取最大值 
Math.min() :取一组数的最小值 
Math.random() 取随机数，取值范围[0,1) 
Math.round() : 四舍五入取整 
Math.round(Math.random()*(n-m)+m) 取m-n之间的随机整数：
Math.pow() :取幂次方 
Math.sqrt() :开平方；

各大浏览器的内核？

IE:trident内核
Firefox：gecko内核
safari：webkit内核（苹果浏览器）
opera：以前是presto内核，现在改用google chrome的Blink内（欧朋手机浏览器）
Chrome：Blink（基于webkit，google与opera software共同开发

canvas 和svg的区别

canvas:
依赖分辨率
不支持事件处理器
弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

svg：
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合游戏应用

 router.push() 的两种方式

query方式路由传参时
name和path属性均可以使用
而使用params方式路由传参时，必须用name，
如果要用path，则需要在path里写入完整的参数作为最终完整的path，且不需要再写params字段

img的alt和title的异同？

alt 是图片加载失败时，显示在网页上的替代文字

title 是鼠标放上面时显示的文字,title是对图片的描述与进一步说明

这些都是表面上的区别，alt是img必要的属性，而title不是

对于网站seo优化来说，title与alt还有最重要的一点： 搜索引擎对图片意思的判断，主要靠alt属性
所以在图片alt 属性中以简要文字说明，同时包含关键词，也是页面优化的一部分
条件允许的话，可以在title属性里，进一步对图片说明

Flash和AJAX各自的优缺点，在使用中如何取舍？

Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。
Ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。
共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM

移动端都是有什么事件？

click事件（会有300ms的延迟）
touch类事件
	touchstart：手指触摸到屏幕会触发
	touchmove：当手指在屏幕上移动时，会触发
	touchend：当手指离开屏幕时，会触发
	touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了	    				 touch的行为，则可以触发该事件
tap类事件
	tap: 手指碰一下屏幕会触发
	longTap: 手指长按屏幕会触发
	singleTap: 手指碰一下屏幕会触发
	doubleTap: 手指双击屏幕会触发
滑动事件
	swipe：手指在屏幕上滑动时会触发
	swipeLeft：手指在屏幕上向左滑动时会触发
	swipeRight：手指在屏幕上向右滑动时会触发
	swipeUp：手指在屏幕上向上滑动时会触发
	swipeDown：手指在屏幕上向下滑动时会触发 

map和foreach区别是什么？

相同点：
1、都是遍历数组
2、匿名函数中的this都是指向window

区别：
map方法：返回一个新的数组，不改变原数组
forEach方法：没有返回值，可以改变原数组

移动端前端适配方案

（1）通过媒体查询的方式即CSS3的meida queries
（2）以天猫首页为代表的 flex 弹性布局
（3）以淘宝首页为代表的 rem+viewport缩放
（4）rem 方式 750px
（5）rpx 小程序

const问题

说明:Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量. 
解决方法：统一使用var关键字来定义常量.

git 六大命令 

1、git add
可将文件添加到暂存区
2、git commit
命令将暂存区内容添加到本地仓库中
3、git push
用于从将本地的分支版本上传到远程并合并
4、git pull
命用于从远程获取代码并合并本地的版本
5、git clone
拷贝一个 Git 仓库到本地，让自己能够查看该项目，或者进行修改
6、git init
命用于在目录中创建新的 Git 仓库

​​​​​​​

---