前端面试问题总结：1、js基础问题浅拷贝与深复制：- 浅拷贝与深复制：浅拷贝与深复制 promise：- promis

1、js基础问题

浅拷贝与深复制：- 浅拷贝与深复制：浅拷贝与深复制
promise：- promise
手写ajax：

   const promise =(params)=>{
    let {url,data={},methods,async=true,timeout=0} = params
    console.log('url,data,methods,async:',url,data,methods,async)
    const isUrlParams = url.indexOf('?')>-1
    let paramsStr = ''
    if( methods.toLowerCase()=='get'){
        if((typeof data == 'object')&&JSON.stringify(data)!='{}'){
            for(let key in data){
                paramsStr+=`&${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`
            }
            if(!isUrlParams){
                paramsStr=paramsStr.slice(1)
                paramsStr="?" +paramsStr
            }
            data=paramsStr
        }
    }
    console.log('参数：',data)
    let xhr =new XMLHttpRequest()
    xhr.timeout=timeout>0?timeout:10000
    xhr.open(methods,url,async)
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
    xhr.send(data)
   return new Promise((resove,reject)=>{
       console.log('promise-start')
        xhr.ontimeout=()=>{
            reject({stat:0,msg:'网络超时'})
        }
        xhr.onreadystatechang=()=>{
            if(xhr.readyState==0){
                console.log('尚未调用 open 方法')
                console.log('statusText：',xhr.statusText)
            }
            if(xhr.readyState==1){
                console.log('已调用 open 但还未发送请求（未调用 send）')
                console.log('statusText：',xhr.statusText)
    
            }
            if(xhr.readyState==2){
                console.log('已发送请求（已调用 send）')
                console.log('statusText：',xhr.statusText)
    
            }
            if(xhr.readyState==3){
                console.log('已接收到请求返回的数据')
                console.log('statusText：',xhr.statusText)
            }
            if(xhr.readyState==4){
                console.log('ajax请求完成！')
                console.log('statusText：',xhr.statusText)
                if(xhr.status>=200&&xhr.status<300 || xhr.status==304){ // 304表示请求内容未改变，从缓存中读取
                    resove(xhr.responseText)
                }else{
                    reject({stat:0,msg:'请求出错，请重试！'})
                }
            }
        }
        xhr.onerror=error=>{
            reject(error)
        }
    })
}

Async await promise generator 之间的关系:Async await promise generator 之间的关系
Number有哪些方法
let var const 的区别
script的defer 和async的区别
什么是变量对象
谈谈作用域链
谈谈原型链
继承有哪几种方式
设计模式：- 设计模式：设计模式
谈谈对eventloop的理解
跨域（原因，解决方案）
怎么区分简单请求和复杂请求
模块化规范：commonjs amd cmd 以及es6模块的区别，es6模块实现的原理，是同步还是异步：www.cnblogs.com/shirly77/p/…

blog.csdn.net/weixin_4310… www.jianshu.com/p/da97ec65d…

模块化规范：模块化规范

从输入URL到页面加载发生了什么
sessionStorage、localStorage、cookie有什么区别
post、get有什么区别
什么是预检请求
mvc mvvm的区别
事件委托
事件冒泡
async awit
迭代协议的几种方式和优缺点
数组方法:数组方法：设计模式
对象方法
字符串方法
判断原型方法
数据劫持如何实现
闭包（手写闭包）
this指向问题（顺带考察call apply bind 箭头函数几种使用方法）
bable 解决了什么问题
set和map的区别
设计模式
scheame url 协议实现原理（吊起端能力如何实现）
基本数据类型有哪些

2、 css基础问题

flex布局：整体属性和使用方法，手写布局（两边定宽，中间自适应，flex:1）
position 除了四种常用属性，还要了解粘连布局
translate 和 position那个会引起回流重绘，原因是什么
c3新属性有哪些
手写三角形
移动端适配方案
rem 实现原理和vw vh的区别
1像素问题
回流重绘是什么，区别和关系是什么
bfc 是什么，引起bfc有哪些因素，解决方案是什么
双边距问题
css选择器有哪些、权重分别是什么
距离解决过移动端哪些兼容问题
手写抖动动画
实现一个简单的c3动画
语义话标签有哪些
布局方式有哪些
Lottie动画如何实现
浏览器背后故事：呈现html页面到用户这个过程发生了什么

3、http

状态码（常问：301、302 303、304）:状态码：状态码
缓存策略有哪几种，具体是怎么实现的：缓存策略：缓存策略
keep-alive
http2解决了什么问题，优缺点分别是什么
返回报文由哪几部分组成
http和https的区别是什么

4、vue

响应式原理：响应式原理：响应式原理
$set实现原理：实现原理：实现原理
路由按需加载是如何实现的
keep-alive
dom更新方式
vuex如何使用，使用场景
组件通信方式
路由守卫
v-model实现原理
v-for key的作用:key的作用：nextTick实现原理
生命周期有哪些，分别实现了什么
$nextTick实现原理 : nextTick实现原理：nextTick实现原理
watch和computed的区别： watch和computed的区别：watch和computed的区别

5、优化

前端优化指标有哪些:前端优化指标有哪些：前端优化指标有哪些
如何进行项目优化
dns优化：dns优化：dns优化

6、前端安全

攻击方式:攻击方式：攻击方式

7、算法+手写面试题

手写实现斐波那契数列：手写实现斐波那契数列：手写实现斐波那契数列
手写去重
实现快排
冒泡排序
二叉树
手写promise处理接口并发
手写实现数组降纬
手写实现数组排序
手写ajax
手写防抖节流函数：手写防抖节流函数：手写防抖节流函数
手写实现evenBus

8、 WEBPACK

常用插件有哪些
实现原理

9、小程序

小程序的实现原理
如何实现下拉刷新
页面跳转的几种方式
小程序增强框架如何选型

10、一面面试题

作业帮：作业帮
跟谁学：跟谁学
快手面试题：跟谁学
滴滴面试题：

 1、实现
  Class EventEmitter {}
  Const ee = new EventEmitter()
  ee.on(‘aaa’, () => {})
  ee.emit(‘aaa’, 123)
2.输出
  var a = {fa: () => {console.log(this)},fb: function(){console.log(this)}}
  a.fa()
  a.fb()
3.写一个闭包
4. 实现
  var arr = [1,2,[3,4,[5,6,[7,8]]]] 
  function flatArr (arr, level) {} 
  example output: [1,2,3,4,[5,6,[7,8]]]

头条面试题：

 Js线程和进程的问题
 
  线程与进程之间的关系
  
  浅拷贝与深复制
  
  Js事件循环
  
  Promise链式调用的写法
  
  catch之后还会进行then的调用吗
  
  304缓存读取涉及到相应头与请求头有哪些
  
  http 响应结果又哪几部分组成

event loop经典面试题:

//请写出输出内容
async function async1() {
   console.log('async1 start');
   await async2();
   console.log('async1 end');
}

async function async2() {
   console.log('async2');
}

console.log('script start');

setTimeout(function() {
   console.log('setTimeout');
}, 0)

async1();

new Promise(function(resolve) {
   console.log('promise1');
   resolve();
}).then(function() {
   console.log('promise2');
});

console.log('script end');

/*
输出结果：

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
*/

前端面试问题总结：

1、js基础问题

2、 css基础问题

3、http

4、vue

5、 优化

6、前端安全

7、算法+手写面试题

8、 WEBPACK

9、 小程序

10、 一面面试题

5、优化

9、小程序

10、一面面试题