前端面试题库

其他技术无关:

三五年规划

 

其他技术相关:

es6新特性

前端如何优化

性能优化相关(这个点很大,设计很多方面,不要自以为优化就是网上经常看到的那一套)

lodash相关

mvvm的好处

设计模式相关(单例、发布订阅等)

浏览器渲染过程

设计一个模版引擎

设计一个打包工具

设计一个mvvm框架需要注意的case

源码阅读相关

jQuery中被誉为工厂函数的是?

如何修改chrome记住密码后自动填充表单的黄色背景?

HTML5离线缓存机制

HTML5新增标签有哪些

如何使用storage 对js文件进行缓存

谈谈你对重构的理解

什么样的前端代码是好的

对前端工程师这个职位是怎么理解的?它的前景会怎么样?

你觉得前端工程师的价值体现在哪里

平时如何管理你的项目

跨域

MVC和MVVM差异,MVP

 

代码题:

 

请用css或js实现物体的平移动画

编写一个js函数fn,该函数有一个参数n(数字类型),其返回一个数组,该数组内是n个随机且不重复的整数,且整数取值范围是[2,32]

编写一个 getElementsByClassName 封装函数?

写一个通用事件监听函数

如何判断一个对象是否为数组

数组去重

排序(冒泡排序,快速排序)

编写一个方法,求一个字符串的字节长度

js实现一个闭包函数,每次调用都自增1

['1','2','3'].map(parseInt] 输出什么?为什么?

js实现函数运行一秒后打印输出0~9

实现对一个数组或者对象的浅拷贝和深拷贝

写一个二分法查找

js时间分段

求水仙花数

请使用递归算法在TODO注释后实现通过节点key数组寻找json对象中的对应值

常见排序算法的时间复杂度,空间复杂度


下面代码输出什么,若要输出0至9,该怎么办?

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

 

说一下macrotask 和 microtask?并说出下面代码的运行结果。

console.log('a');
setTimeout(() => {
    console.log('b');
}, 0);
console.log('c');
Promise.resolve().then(() => {
    console.log('d');
})
.then(() => {
    console.log('e');
});

console.log('f');

 

 

实现一个once函数,传入函数参数只执行一次

function ones(func){
    var tag=true;
    return function(){
      if(tag==true){
        func.apply(null,arguments);
        tag=false;
      }
      return undefined
    }
}

 

 

将原生ajax封装成promise

var  myNewAjax=function(url){
  return new Promise(function(resolve,reject){
      var xhr = new XMLHttpRequest();
      xhr.open('get',url);
      xhr.send(data);
      xhr.onreadystatechange=function(){
           if(xhr.status==200&&readyState==4){
                var json=JSON.parse(xhr.responseText);
                resolve(json)
           }else if(xhr.readyState==4&&xhr.status!=200){
                reject('error');
           }
      }
  })
}

 

 

从promise、process.nextTick、setTimeout出发,谈谈Event Loop中的Job queue

setTimeout(function(){console.log(1)},0);
new Promise(function(resolve,reject){
   console.log(2);
   resolve();
}).then(function(){console.log(3)
}).then(function(){console.log(4)});

process.nextTick(function(){console.log(5)});

console.log(6);
//输出2,6,5,3,4,1

 

 

如何实现数组的随机排序?(两种方法以上)

 

 

react相关:

react核心思想

react constructor,super解释一下

setState

生命周期函数有哪些

axios封装

ant-design用到哪些功能

react组件封装(接口设计)

react-router原理,了解过react-router内部实现机制吗?

React中的controlled component 和 uncontrolled component区别(受控组件和不受控组件)

虚拟DOM的原理

简要介绍一下React中的refs以及它的作用

简要介绍一下key以及它的作用

在实际开发中shouldComponentUpdate有什么作用

6.简要介绍一下Redux

7.setState的第二个参数是什么,作用又是什么?

setState的第二个参数是一个回调函数,组件更新完后执行的回调函数(setState函数是异步的)

8.简要介绍一下你所了解的flux架构的思想?

9.聊一聊你对React的DOM diff算法的理解

10.虚拟DOM的优缺点有哪些?

 

webpack相关:

谈谈你对webpack的看法

webpack常用插件

webpack打包原理

webpack文件划分

chunk

loader原理

webpack优化措施

webpack常见优化手段有哪些?

webpack打包优化

设计一个自己的打包工具需要设计哪些主要功能

babel相关

 

 

算法部分:

数组去重

排序

数组扁平化处理:实现一个flatten方法,使得输入一个数组,该数组里面的元素也可以是数组,该方法会输出一个扁平化的数组。 

如果在17问的前提下,要做去重和排序处理又该怎么做(不用给出具体代码)

 

 

 

http,html和浏览器部分:

303和304的区别

304:设置了缓存,请求的文档并没有发生改变,所以返回304状态码不重新拉取数据,直接使用缓存中的数据

token怎么传到后台

http请求中的keep-alive有了解吗?

get请求传参长度的误区

补充get和post请求在缓存方面的区别

http和https(基本概念,区别,工作原理,https优点,缺点)

http和https有何差异?听过SPDY吗?

谈谈你对TCP的理解?对OSI七层协议和五层网络架构有了解吗?

TCP和UDP的区别

websocket的实现和应用

http请求方式,head方式

一个图片url访问后直接下载怎么实现?

web quality(无障碍)

几个很实用BOM属性对象方法

HTML5 drag API

http2.0

400,401,403状态码

fetch发送两次请求的原因

cookie,sessionStorage,localStorage的区别

web worker

对HTML语义化标签的理解

iframe是什么?有什么缺点?

Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

Cookie如何防范XSS攻击

Cookie和session的区别

讲讲viewport和移动端布局

click在ios上有300ms延迟,原因及如何解决?

浏览器多个标签页面之间的通信

页面缓存

http缓存

你之前遇到过跨域问题吗?是怎么解决的?

html5多线程

服务器推送

浏览器内核有哪些

HTML5新特性

列出块级元素和行内元素,并说出两者区别

数据持久化技术(ajax)?简述ajax流程

一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?(流程说的越详细越好)

为什么要有同源限制

浏览器缓存和服务端缓存控制你了解多少?说说看?

HTTP request报文结构是怎样的

HTTP response报文结构是怎样的

web开发中会话跟踪的方法有哪些

 

Ajax:

ajax 和 jsonp ?

ajax和jsonp的区别:
相同点:都是请求一个url
不同点:ajax的核心是通过xmlHttpRequest获取内容
jsonp的核心则是动态添加

你可能感兴趣的:(前端,面试,json,ViewUI)