前端面试题库

时间 2019-11-10

标签前端面试题库栏目快乐工作繁體版

原文原文链接

其余技术无关：css

三五年规划html

其余技术相关：前端

es6新特性html5

前端如何优化react

性能优化相关(这个点很大，设计不少方面，不要自觉得优化就是网上常常看到的那一套)jquery

lodash相关webpack

mvvm的好处ios

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

浏览器渲染过程git

设计一个模版引擎

设计一个打包工具

设计一个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的核心则是动态添加<script>标签来调用服务器提供的js脚本。

ajax执行流程？

1. 建立XMLHttpRequest对象,也就是建立一个异步调用对象
2. 建立一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3. 设置响应HTTP请求状态变化的函数
4. 发送HTTP请求
5. 获取异步调用返回的数据
6. 使用JavaScript和DOM实现局部刷新

xhr对象 status ? readystate?

status是XMLHttpRequest对象的一个属性，表示响应的HTTP状态码。
readyState是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。

readystate 0~4

0：未初始化状态：此时，已经建立了一个XMLHttpRequest对象
1：准备发送状态：此时，已经调用了XMLHttpRequest对象的open方法，而且XMLHttpRequest对象已经准备好将一个请求发送到服务器端
2：已经发送状态：此时，已经经过send方法把一个请求发送到服务器端，可是尚未收到一个响应
3：正在接收状态：此时，已经接收到HTTP响应头部信息，可是消息体部分尚未彻底接收到
4：完成响应状态：此时，已经完成了HTTP响应的接收

说出几个http协议状态码?

200, 201, 302, 304, 400, 404, 500

200：请求成功
201：请求成功而且服务器建立了新的资源
302：服务器目前从不一样位置的网页响应请求，但请求者应继续使用原有位置来响应之后的请求。
304：自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
400：服务器不理解请求的语法。
404：请求的资源（网页等）不存在
500：内部服务器错误

ajax中 get 和 post 有什么区别?

get和post都是数据提交的方式。
get的数据是经过网址问号后边拼接的字符串进行传递的。post是经过一个HTTP包体进行传递数据的。
get的传输量是有限制的，post是没有限制的。
get的安全性可能没有post高，因此咱们通常用get来获取数据，post通常用来修改数据。

jsonp原理？缺点?

工做原理：使用script标签实现跨域访问，可在url中指定回调函数，获取JSON数据并在指定的回调函数中执行jquery实现jsop。

缺点：只支持GET方式的jsonp实现，是一种脚本注入行为存在必定的安全隐患。若是返回的数据格式有问题或者返回失败了，并不会报错。

如何确保ajax或链接不走缓存路径

在Ajax中使用Get请求数据不会有页面缓存的问题，而使用POST请求但是有时候页面会缓存咱们提交的信息，致使咱们发送的异步请求不能正确的返回咱们想要的数据

$.post(url,data ,ranNum:Math.random()} ,function(data){}）

ranNum : 这个是防止缓存的核心，每次发起请求都会用Math.random()方法生成一个随机的数字，这样子就会刷新url缓存

ajax的缺点

一、ajax不支持浏览器back按钮。
二、安全问题 AJAX暴露了与服务器交互的细节。
三、对搜索引擎的支持比较弱。
四、破坏了程序的异常机制。
五、不容易调试

页面性能：

提高页面性能的方法有哪些

异步加载的方式有哪些

defer,async的区别是什么

什么是浏览器缓存

缓存的分类有哪些（跟缓存相关的http头部有哪些）

什么是CND

预解析DNS？

如何开启DNS预解析？

渲染机制：

DTD是什么

DOCTYPE是什么？有什么做用？标准模式和兼容模式各有什么区别？

经常使用的DOCTYPE类型

浏览器的渲染过程

重排（reflow）是什么

重绘（repaint）是什么

如何减小重绘，避免重排？

HTTP：

http的主要特色

介绍下http报文的组成部分

常见的http方法有哪些

post和get的区别是什么

http状态码及其含义

常见状态码有哪些

介绍下持久连接（http1.1）

管线化是什么

管线化的特色是什么

错误监控、产品性能体系

前端错误分类有哪些

前端错误捕获方式分别是什么

如何使用Object.onerror捕获资源加载错误？

跨域的JS运行错误能够捕获么？错误提示是什么，应该怎么处理？

客户端上报错误的基本原理是什么？

通信类：

什么是跨域通讯？

什么是同源策略？

先后端通讯有哪些？

如何建立ajax？

跨域解决方案有哪些？（六种方案）

安全类：

常见的攻击方式有哪些？

CSRF的原理及防护措施？

XSS的原理及防护措施？

请说明SQL注入的原理及防范方法

前端性能优化的关键时间点：

前端性能优化的关键时间点有哪些，分别是什么？

开始渲染时间如何获取？如何优化？

DOM Ready时间如何获取？如何优化？

首屏时间如何获取？如何优化？

onload时间如何获取？如何优化？

css部分：

css渲染

css布局（两栏布局，三栏布局）

用过flex布局吗？flex-grow和flex-shrink属性有什么用？

css盒模型的理解

画一条0.5px的线

link标签和import标签的区别

transition和animation的区别

BFC（块级格式化上下文，用于清除浮动，防止margin重叠等）

垂直居中的几种方法

关于js动画和css3动画的差别性

清除浮动有几种方式?

简述几个css hack?

:before 和 ::before 区别?

如何让一个div 上下左右居中?（三种方法）

伪类选择器和伪元素？c3中引入的伪类选择器有？c3中伪元素有?

placeholder?如何在ie8上兼容placeholder这个效果

常见兼容性问题？

若是对css进行优化如何处理？

sass和scss有什么区别?sass通常怎么样编译的

图片和文字在同一行显示?

1 在css中给div添加上“vertical-align:middle”属性。
2 分别把图片和文字放入不一样的div中，而后用“margin”属性进行定位，就可使他们显示在同一行。
3 把图片设置为背景图片。

a标签中 active hover link visited 正确的设置顺序是什么?

a标签的link、visited、hover、active是有必定顺序的
a:link
a:visited
a:hover
a:active

为何要初始化CSS样式。

由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对CSS初始化每每会出现浏览器之间的页面显示差别。

解释下 CSS sprites，以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position能够用数字能精确的定位出背景图片的位置。这样能够减小不少图片请求的开销，由于请求耗时比较长；请求虽然能够并发，可是也有限制，通常浏览器都是6个。对于将来而言，就不须要这样作了，由于有了`http2`。

什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是形成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，而后再去导入外部的CSS文件，所以，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法：只要在<head>之间加入一个<link>或者<script>元素就能够了。

多行元素的文本省略号

visibility=hidden, opacity=0，display:none

双边距重叠问题（外边距折叠）

position

伪元素伪类

css预处理器

设置元素浮动后，该元素的display值是多少？

选择器类型及优先级

一个满屏‘品’字布局如何设计？

::before和:after中双冒号和单冒号有什么区别？解释一下这两个伪元素的做用

CSS3新特性

css有哪些样式能够给子元素继承

box-sizing经常使用的属性有哪些？分别有啥做用？

清楚浮动的方式有哪些？比较好的是哪种？

说说样式权重的优先级

块级元素水平垂直居中的方法（考虑定宽高和不定宽高的状况）

如何实现一个自适应的正方形

如何使用CSS实现硬件加速？

重绘和回流（重排）是什么，如何避免？

BFC是什么？介绍一下，如何触发BFC？

说一说你知道哪些伪类选择器？

简要介绍一下一种css预处理器？

CSS选择器有哪些
css sprite是什么,有什么优缺点
display: none;与visibility: hidden;的区别
css hack原理及经常使用hack
specified value,computed value,used value计算方法
link与@import的区别
display: block;和display: inline;的区别
PNG,GIF,JPG的区别及如何选
CSS有哪些继承属性
IE6浏览器有哪些常见的bug,缺陷或者与标准不一致的地方,如何解决
容器包含若干浮动元素时如何清理(包含)浮动
什么是FOUC?如何避免
如何建立块级格式化上下文(block formatting context),BFC有什么用
display,float,position的关系
外边距折叠(collapsing margins)
如何肯定一个元素的包含块(containing block)
stacking context,布局规则
如何水平居中一个元素
如何竖直居中一个元素

css盒模型：

CSS盒模型是什么？

标准模型和IE模型的区别？

CSS如何设置这两种模型？

JS如何设置/获取盒模型对应的宽高

BFC是什么，讲一下原理？

BFC布局规则是？

哪些元素会生成BFC?

BFC的使用场景有哪些？（1.自适应两栏布局；2.清楚内部浮动；3.防止垂直margin重叠）

css布局：

三栏布局，高度已知，左右两栏固定，中间自适应的三栏布局有几种实现方式，各自的优缺点是什么？

三栏布局，高度未知，以上布局哪些仍可用，哪些不可用？

三栏布局，高度已知，左中固定，右自适应

三栏布局，上下固定，中自适应

CSS居中布局有哪些，适用于什么场景，举例说明？

CSS布局时须要注意哪些方面？

html部分：

语义化的理解

HTML5离线存储怎么使用，解释工做原理

浏览器是怎么对HTML5的离线存储资源进行管理和加载的？

HTML5的存储方案有哪些

HTML5提供了sessionStorage、localStorage和离线存储做为新的存储方案，其中sessionStorage和localStorage 都是采用键值对的形式存储，二者都是经过setItem、getItem、removeItem来实现增删查改，而sessionStorage是会话存储，也就是说当浏览器关闭以后sessionStorage也自动清空了，而localStorage不会，它没有时间上的限制。离线存储也就是应用程序缓存，这个一般用来确保web应用可以在离线状况下使用，经过在html标签中属性manifest来声明须要缓存的文件，这个属性的值是一个包含须要缓存的文件的文件名的文件，这个manifest文件声明的缓存文件可在初次加载后缓存在客户端，能够经过更新这个manifest文件来达到更新缓存文件的目的。

viewport的常见设置有哪些

viewport经常使用在响应式开发以及移动web开发中，viewport顾名思义就是用来设置视口，主要是规定视口的宽度、视口的初始缩放值、视口的最小缩放值、视口的最大缩放值、是否容许用户缩放等。一个常见的viewport设置以下：

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width" />

其中同时设置width和initial-scale的目的是为了解决iphone、ipad、ie横竖屏不分的状况，由于这两个值同时存在时会取较大值。

移动开发：

移动开发中使用rem的优势

列举移动开发中meta基础知识点

移动端上什么是点击穿透?

什么是移动端的300ms延迟？什么是点击穿透？解决方案?

jQuery：

你以为jQuery源码有哪些写的好的地方

使用jQuery实现，获取位于id为fruit的下value为apple的option元素

Jq中如何实现多库并存?

Jq中get和eq有什么区别？

Jq如何判断元素显示隐藏？

Jq绑定事件的几种方式？on bind ?

Jq中如何将一个jq对象转化为dom对象？

Jq中有几种选择器?分别是什么?

Jq中怎么样编写插件?

$('div+.ab')和$('.ab+div') 哪一个效率高？

$.map和$.each有什么区别

$(function(){})和window.onload 和 $(document).ready(function(){})

Jq中 attr 和 prop 有什么区别

你对数据校验是怎么样处理的？jquery.validate？

通俗的说，就是为保证数据的完整性，用一种指定的算法对原始数据计算出的一个校验值。接收方用一样的算法计算一次校验值，若是和随数据提供的校验值同样，就说明数据是完整的。
用正则表达式来处理;
jquery.validate：为表单验证插件

在jq中 mouseover mouseenter mouseout mouseleave 和 hover有什么关联?

mouseenter与mouseover：
不论鼠标指针穿过被选中元素或其子元素，都会触发mouseover事件。
只有在鼠标指针穿过被选元素时，才会触发mouseentr事件。

mouseout与mouseleave：
不论鼠标离开被选元素仍是任何子元素，都会触发mouseout事件。
只有在鼠标指针离开被选元素时，才会触发mouseleave事件。

hover:
hover是一个符合方法，至关于mouseenter+mouseleave。

项目相关：

技术沉淀

项目中负责什么角色

表单验证是怎么作的

本身作了什么，解决了什么棘手问题，项目成果

最近在看哪些前端方面的书

为何大型应用要从多个域名请求资源？

简要的说而且说重点，从使用技术栈到项目架构的设计到技术难点的实现，分点说

面试官也是人，他也会好奇一些神奇的项目是怎么实现的，因此个人建议也就是平时多作一些有水平的项目，不要把todolist、图书馆管理系统这种烂大街的项目写在本身的简历上。

这里透露一下，你的二面面试官，颇有多是你将来的leader，他们问的问题不少都是平时遇到的技术难点啊，本身踩过的小坑啊啥的，有心的同窗本身默默记住这些问题回去多看看，对本身的提高会有很大的帮助(毕竟你能网上搜到的问题都是些烂大街的问题，这时候大牛遇到过的问题和你探讨这种机会不用说都知道很可贵吧)。

仿饿了么购物车(本地购物车和全局购物车和本地存储，不是网上一艘就能搜到的哪些哦)

Chrome插件开发lettalk

rn开发的一个简单的社交app

仿Jquery类库(阅读jquery源码时候仿的)

原来公司的工做流程是怎么样的？如何与他人协做的？如何跨部门合做的？

你遇到过比较难的技术问题是？你是如何解决的？

你在如今团队中处于什么样的角色？起了什么明显的做用？

平时工做中怎么样进行数据交互?若是后台没有提供数据怎么样进行开发?mock数据与后台返回的格式不一样意怎么办?

由后台编写接口文档、提供数据接口实、前台经过ajax访问实现数据交互；
在没有数据的状况下寻找后台提供静态数据或者本身定义mock数据；
返回数据不统一时编写映射文件对数据进行映射。

上一个项目是什么？主要负责哪些？购物车流程?支付功能?

主要负责哪些就讲主要作哪些功能模块：

1）商品模块:
一、商品列表：商品排序商品筛选商品过滤商品查询商品推荐
二、商品详情:类型推荐商品简介商品详情商品评价售后维护

2)购物车模块：商品编号、数量、价格、总额、运费、运输选项、运费总计、从购物车删除选项、更新数量、结帐、继续购物、商品描述、库存信息

简述下工做流程

我在以前的公司工做流程大概是这样的：公司定稿会结束之后，会进行简单的技术研讨，而后咱们前端会进行先期的技术准备。前端切图人员会进行psd设计稿切图，而且将css文件进行整合。咱们主要编写JS部分，其中包括搭建前端框架（大项目），编写js业务和数据持久化操做，咱们也会编写js插件而且进行封装方便使用，还有就是编写JS前端组建和JS测试单元，最后将完成的JS部分与切图人员提供的HTML页面进行整合。最后对完成的页面进行功能测试、页面兼容、产品还原。而后对产品进行封存，提交测试。若是出现BUG会返回给咱们开发人员进行修改，再提交测试，最后测试成功，进行版本封存。等到程序所有上线的时候进行线上测试。

通常使用什么版本控制工具?svn如何对文件加锁

自我介绍：

自我介绍言简意赅，体现本身的个性和亮点，会什么着重说一下