前端面试之基本问题

HTML5新特性

拖拽API，新标签更加语义footer,header,nav,section,article

视频音频audio,video 画布canvas 地理API  

存储localStorage sessionStorage

表单控件 date email

WebSocket WebWorker

WebWorker

WebWorker是运行在后台的js块，独立于其他脚本，不会影响页面你的性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。

CSS3新特性

圆角border-radius 阴影box-shadow 媒体查询@media滤镜fliter线性渐变linear-gradient 圆形渐变 radialgradient过渡transition 平移transform 动画animition  声明变量--var计算calc  新增伪类 :nth-children()

CSS选择器优先级

!improtant > 行内样式 > id选择器 > 类选择器 > 元素选择器

开启BFC方式

Position：absolute, fixed;

Overflow: hidden, auto;

Display: flex, inline-block;

设置浮动float

 

Flex布局

flex-direction：决定主轴的方向

flex-wrap：决定换行规则

justify-content：对其方式，水平主轴对齐方式

align-items：对齐方式，竖直轴线方向

order：定义项目的排列顺序，顺序越小，排列越靠前，默认为0

flex-grow：定义项目的放大比例，即使存在空间，也不会放大

flex-shrink：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小

align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items，默认继承父元素的align-items

 

ES6新特性

Let const 快作用域

Set Map 类似Object。不同在于Map对象的key可以是任意对象。

Class类 generator 迭代器 设置value和done

模版字符串 解构赋值 函数默认值 箭头函数 对象属性简写

map reduce filter forEach 数组方法   for of循环

Rest 扩展运算符  promise处理异步 Proxy代理

 

New

创建一个空对象，将它的引用赋给 this，继承函数的原型。

通过 this 将属性和方法添加至这个对象

最后返回 this 指向的新对象

src和herf的区别

herf提供一个链接通道，联系着其他资源。src引用的资源成为当前文档的一部分。

闭包

闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放。

防抖

Function debounce (func, delay) {

   Let timer; // 利用闭包保持变量。

   Return function () {   // 设置到函数内会导致直接执行。

     clearTimeout(timer);

     timer = setTimeout( function(){

func();

},delay);  }

节流     //或者使用new Date 计算 时间差

Function throttle (func, delay){

   Let timer;

   Return function () {

        Let context = this;

        Let args = arguments;

        If(timer) return;

        Timer = setTimeout(function () {

func().aplly(context, args) ;

timer = null;

},delay);

}

事件流

事件捕获阶段 -> 处于目标阶段 -> 事件冒泡阶段

addEventListener是DOM2 级事件新增的指定事件处理程序的操作，最后一个参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

 

JS基本数据类型

undefined null string Boolean number Object symbol

数组常用方法

不改变数组的方法map filter concat slice join reduce

forEach toString

改变数组的方法splice reverse pop push shift unshift

字符串常用方法

indexOf() lastIndexOf() search(Reg) concat() trim() slice() split() charAt() includes() replace(Reg,newval) match(Reg) repeat()

 

 

AJAX原理

通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。

onreadystatechange  每次状态改变所触发事件的事件处理程序。

responseText     从服务器进程返回数据的字符串形式。

responseXML    从服务器进程返回的DOM兼容的文档数据对象。

Status   从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

readyState       对象状态值

0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

1 (初始化) 对象已建立，尚未调用send方法

2 (发送数据) send方法已调用，但是当前的状态及http头未知

3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

4 (完成) 数据接收完毕,此时可以通过responseXml和responseText获取完整的回应数据

var xhr = new XMLHttpRequest();

xhr.open('get', 'urn', true);

xhr.send();

xhr.onreadystatechange = function() {

if(xhr.readyState==4) {

if(xhr.status==200) {

console.log(xhr.responseText);

AJAX优缺点

优点：页面无刷新，异步通信。

缺点：页面无法回退，安全问题---返回太多信息。

 

V8垃圾回收

新生代：内存容量小，from和TO 两部分。将存活的对象复制到TO。清空from区域内存。然后from和to进行调用。

老生代：

多次垃圾回收后，没有被清除的新生代晋升为老生代。

Mark-Sweep   标记存活的对象 清楚没有被标记的对象

Mark-compact  清楚之后进行整理

内存泄漏

     1--未声明变量使用 导致被设置为全局变量

     解决方式：开启严格模式

2--计时器和回调函数 不使用时没有被清除 内部依赖的变量都不能回收

3--DOM泄漏

事件绑定没有清除

元素引用没有清理

给DOM对象添加属性是一个对象的引用

4--JS闭包

使用闭包过多导致无法进行垃圾清除，占用内存。

闭包让对象生命周期脱离当前函数上下文，

使用不当环形引用，死锁。

 

 

实现深拷贝

一：层级拷贝，用递归实现；

二：JSON解析     var b =JSON.parse(JSON.stringify(a));