前端面试问题（持续更新）

来源：互联网发布：2016淘宝店铺装修教程编辑：程序博客网时间：2024/04/29 05:31

https://juejin.im/post/59c485075188257e6e2634e01、有关BFC的理解2、盒模型的理解3、box-sizing的理解4、渐进增强 VS 优雅降级5、url->页面加载完成的整个流程6、js组成部分7、如何跨域访问8、js判断数组9、严格模式10、ajax的优缺点11、HTML、XML、XHTML 有什么区别12、html语义化13、内容与样式分离14、meta标签的使用15、文档声明的作用16、严格模式和混杂模式17、<!doctyle html>的作用18、常见浏览器内核19、页面导入样式时，使用link和@import有什么区别20、浏览器内核的理解

有关BFC的理解

BFC用来格式化块级盒子
BFC: 提供一个环境，html元素会在这个环境中按照一定的规则进行布局。
ex: 例如浮动元素会形成bfc,浮动元素内部子元素主要受该浮动元素影响，但是两个浮动元素互相不影响。
这个可以理解为一个独立容器，里边规则不会影响到外边。
那么什么情况下会生成bfc呢：
1、浮动元素，float除none以外的值
2、绝对定位，position(absolite,fixed)
3、dispaly = inline-blocks|table-cells|table-captions
4、overflow除visible以外的值
作用：
1、可以阻止元素被浮动元素覆盖
2、包含浮动元素
3、如果属于同一个bfc的两个元素上下margin会发生重叠，但如果两个元素属于两个不同的bfc那么margin就不会发生重叠

盒模型的理解

css盒子模型，包含了content,padding,border,margin
这些基本的比如比如哪儿是content大家都了解我就说了在设置width = 300px时代表的是content的宽度那么最终的宽度是content+padding+border+margin.
css外边距合并
刚才在bfc中提到，在一个bfc中，css外边距是会发生重叠的，解决方法就是放在两个bfc中。当我们使用盒模型的时候需要注意的是浏览器的兼容性，这个很好解决在html中声明 <!DOCTYPE html>，ul在mozilia默认有padding值，而在IE中只有margin有值
盒模型中我们常使用一个属性叫box-sizing,这会单独起一页，这也是面一经常出的问题

box-sizing的理解

box-sizing: content-box|border-box|inherit
content-box是默认值，总宽度= margin+border+padding+width
border-box: 在css中设置的width = border + padding + content,那么总宽度 = margin + width常在box宽度是100%,又想要两边有内间距
inherit: 这就不用说了，是继承

渐进增强 VS 优雅降级

渐进增强：低浏览器实现基本功能，高级浏览器实现交互、效果达到更好的体验
优雅降级：在高级浏览器实现完整功能，然后针对低级浏览器进行hack以便低级浏览器能够正常运行
两者是因为各种版本的浏览器对css3的支持情况而不同所造成的

url->页面加载完成的整个流程

1、浏览器查询域名对应的IP地址
2、浏览器根据IP地址与服务器建立socket连接
3、浏览器与服务器进行通信：浏览器请求，服务器处理请求
4、浏览器与服务器断开连接
这个内容太多了，我会专门写一篇blog来解释，但是面试这些回答这些就够了

js组成部分

1、ECMAScript 定义脚本语言的属性、方法和对象
2、文档对象类型(DOM)：把整个页面规划成由节点层级构成的文档
3、浏览器对象模型(BOM)：处理浏览器宽口和框架

如何跨域访问

1、jsonp跨域访问
2、window.name进行跨域
3、html5中的window.postMessage方法
4、http头部信息中加入origin
这个在我一片blog中专门讲到了两种jsonp和origin如今最常用的两种跨域请求方式

js判断数组

return Object.prototype.toString.call(arg) === '[object Array]'

严格模式

使用方法：进入严格模式的标志 'use strict',语法更加严格，更安全，提高运行速度。
1、全局变量显示声明
2、静态绑定：属性和方法归属的对象，在编译阶段就确定
3、增强的安全措施：①禁止this指向全局对象②禁止在函数内部遍历调用栈
4、禁止删除变量，除非创建对象使用configurable=true
5、显示报错：对对象的只读属性，只有getter的对象赋值，对禁止扩展的对象添加新属性都会报错
6、重名错误：对象不能有同名的参数，函数不能有重名的参数
7、禁止八进制表示法
8、禁止arguments赋值，不会追踪参数的变化，禁止使用arguments.callee
9、函数必须声明在顶层
10、新增保留字

ajax的优缺点

优点：减轻服务器的负担，按需取数据，最大程度减少冗余请求，局部刷新。
缺点：浏览器之间有差异，对流媒体和移动设备支持不够好

HTML、XML、XHTML 有什么区别

html:超文本标记语言，显示信息，不区分大小写
xhtml:升级版的html，区分大小写
xml:可扩展标记语言被用来传输和存储数据

html语义化

直观认识标签和属性的作用，便于阅读和维护

内容与样式分离

可以确保网页平稳退化，易于维护

meta标签的使用

meta name="keyword" 告诉搜素引擎网页的关键词
meta name="description" 告诉搜素引擎站点的内容
mata name="author" content="name"站点制作望着
meta name="viewport" content="width=device-width, initial-scale=1.0"
响应式页面

文档声明的作用

让浏览器解析器知道需要用什么规范来解析文档

严格模式和混杂模式

严格模式：浏览器最高标准呈现页面
混杂模式：页面以一种比较宽松的向后兼容的方式显示

<!doctyle html>的作用

使用html5标准来解析渲染页面，如果不写就进入混杂模式

常见浏览器内核

IE 用的是tridentfirefox Geckoopera Blinksafari Chrome webkit

页面导入样式时，使用link和@import有什么区别

页面被加载时，link被同时加载，@import会页面加载完成后在加载

浏览器内核的理解

渲染引擎和JS引擎
渲染引擎：负责取得网页的内容、整理讯息，以及计算网页的显示方式
JS引擎：解析和执行js来实现网页的动态效果

1、为什么要使用css预编译
2、cookie,sessionStorage和localStorage的区别
3、如何实现浏览器内多个标签页之间的通信? (阿里)
4、websocket如何兼容低浏览器
5、如何居中div
6、css3新特性
7、用css穿件一个三角形的原理
8、经常li之间有看不见的间隔，造成的原因
9、为什么要清除浮动
10、元素浮动后,display变成了什么
11、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
12、cookie隔离
13、数组的随机排序
14、什么是window对象，什么是document对象
15、如何判断一个对象是否属于某个类
16、new操作符干了什么
17、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
18、如何检测浏览器版本
19、什么是polyfill
20、Object.is()
20、前端性能优化
21、http状态码常用的

为什么要使用css预编译

1、css无法递归式定义
2、解决复用性不够
3、可以缓解浏览器兼容造成的冗余

cookie,sessionStorage和localStorage的区别

cookie用来在浏览器和服务器中传递并且总量很小
sessionStorage和localStorage用于存储本地数据，存储较大
localStorage是持久性存储

如何实现浏览器内多个标签页之间的通信? (阿里)

websocket、shareWorker
也可以调用localstorge、cookies等本地存储方式
将有专门的教程讲解websocket

websocket如何兼容低浏览器

Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 编码发送 XHR 、
基于长轮询的 XHR

如何居中div

1、水平居中,给定宽度

div{
width: 200px
margin:0 auto
}

2、绝对定位居中

div {position: absolute;width: 300px;height: 300px;margin: auto;top: 0;left: 0;bottom: 0;right: 0;

}

3、水平居中

确定宽高div {position: relative;width: 500px;height: 300px;top: 50%;left: 50%;margin: -150px 0 0 -250px;

}
不知道宽高

div {position: relative;width: 500px;height: 300px;top: 50%;left: 50%;transform: translate(-50%,-50%);

}
使用flex布局

   .container {        display: flex;        align-items: center;        justify-content: center;    }    .container div {        width: 100px;        height:100px;    }

css3新特性

文字特效：text-shadow
线性渐变：gradient
旋转：transform
圆角：border-radius
新增选择器:not(:input)
没写全，但是够用了

用css穿件一个三角形的原理

把上、左、右三条边隐藏掉

#demo {    width: 0;    height: 0;    border-width: 20px;    border-style: solid;    border-color: transparent transparent red transparent;}

经常li之间有看不见的间隔，造成的原因

回车和空格会被应用样式,解决方法：把字符大小设置成font-size:0

为什么要清除浮动

清除浮动是为了清除浮动元素产生的影响，浮动的元素高度将会塌陷，后面的布局也就不能实现，这儿讲一种方法
&:after

元素浮动后,display变成了什么

display: inline-block

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示屏默认频率是60hz，所以理论上最小间隔1/60*1000ms = 16.7ms

cookie隔离

cookie有域的限制,跨期提交请求时，不会携带cookie

数组的随机排序

方法一、
var arr = [1,2,3,4,5,7,8,9]
function randSort(arr) {
for (var i = 0, len = arr.length; i < len; i++) {
var rand = parseInt(Math.random()len)
var temp = arr[rand]
arr[rand] = arr[i]
arr[i] = temp
}
return arr
}
方法二
var arr = [1,2,3,4,5,7,8,9]
function randSort2(arr) {
var mixedArray = []
while(arr.length > 0) {
var randomIndex = parseInt(Math.random()arr.length)
mixedArray.push(arr[randomIndex])
arr.splice(randomIndex, 1)
}
return mixedArray
}
方法三
var arr = [1,2,3,4,5,7,8,9]
arr.sort(function () {
return Math.random() - 0.5
})

什么是window对象，什么是document对象

window是浏览器打开的窗口，document是Document对象的一个只读引用

[“1”, “2”, “3”].map(parseInt) 答案是多少？
[1, NaN, NaN]

如何判断一个对象是否属于某个类

return a instance of Person

new操作符干了什么

1、创建一个空对象，并且this引用该对象，同时还继承了该函数的对象
2、属性和方法都加入到this引用的对象中
3、新创建的对象由this所引用，最后隐式返回this

Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

Oject.hasOwnProperty(name),返回布尔值，不会去寻找原型链上的属性

如何检测浏览器版本

功能检测、userAgent特征检测：navigator.userAgent

什么是polyfill

polyfill 是“在旧版浏览器上复制标准 API 的 JavaScript 补充”,可以动态地加载 JavaScript 代码或库，在不支持这些标准 API 的浏览器中模拟它们。

Object.is()

Object.is在处理-0和+0是返回false,但是Object.is(NaN, NaN)返回true

前端性能优化

1、减少http请求次数：雪碧图、js,css源码压缩、图片大小控制合适，cdn托管
2、使用ajax代替整体刷新页面
3、减少dom操作
4、设置样式时更多的时候使用className而不是style
5、少用全局变量、缓存dom节点查找结果
6、避免使用css expression
7、图片懒加载（有专门的文章讲解图片懒加载）

http状态码常用的

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。

400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。

500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

写技术文档是真的累，点个star以资奖励
我的githubgithub.com/skychenbo如果…

这也是前端面试经常询问的问题，经常问你es6出现了哪些新的特性，平时又使用过那些。在编写此教程的时候，第一句话往往就是面试常常问到的地方，然后后面就是他的详细解释，面试要求的内容我会用*标记出来。写技术文档是真的累啊，虽然是看别人的文档，但是你得看很多，而且还得自己总结啊。所以说要是觉得对你有用还是帮我点个star吧github.com/skychenbo

1、箭头函数需要注意的地方2、ES6 let、const3、set数据结构4、promise对象的用法,手写一个promise5、class的理解6、模版语法的理解7、rest参数8、    module体系

箭头函数需要注意的地方

*当要求动态上下文的时候，就不能够使用箭头函数。也就是this的固定化
1、在使用=>定义函数的时候，this的指向是定义时所在的对象，而不是使用时所在的对象
2、不能够用作构造函数，这就是说，不能够使用new命令，否则就会抛出一个错误
3、不能够使用arguments对象
4、不能使用yield命令
这是一道当年很困惑我的一道题不知道你在第一眼能不能看出其结果,this的指向总是让人困扰，但是有了=>以后妈妈再也不用担心你使用this了

class Animal {    constructor(){        this.type = 'animal'    }    says(say) {        setTimeout(function () {            console.log(this.type + 'says' + say)        },1000)    }}var animal = new Animal()animal.says('hi') // undefined says hi

我们再来看看=>的情况

class Animal() {    constructor() {        this.type = 'animal'    }    says(say) {        setTimeout(() => {            console.log(this.type + ' says ' + say)        }, 1000)    }}var animal = new Animal()animal.says('hi') // animal says hi

ES6 let、const
*let是更完美的var，不是全局变量，具有块级函数作用域,大多数情况不会发生变量提升。const定义常量值，不能够重新赋值，如果值是一个对象，可以改变对象里边的属性值
let
1、let声明的变量具有块级作用域
2、let声明的变量不能通过window.变量名进行访问
3、形如for(let x..)的循环是每次迭代都为x创建新的绑定
下面是var带来的不合理场景

var a = []for (var i = 0; i < i; i++) {    a[i] = function () {        console.log(i)    }}a[5]() // 10

在上述代码中，变量i是var声明的，在全局范围类都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出都是10
而如果对循环使用let语句的情况，那么每次迭代都是为x创建新的绑定代码如下

var a = []for (let i = 0; i < i; i++) {    a[i] = function () {        console.log(i)    }}a[5]() // 5

当然除了这种方式让数组中的各个元素分别是不同的函数，我们还可以采用闭包和立即函数两种方法
这是闭包的方法

function showNum(i) {    return function () {        console.log(i)    }}var a = []for (var i = 0; i < 5; i++) {    a[i] = showNum(i)}

这是立即函数的方法

var a = []for (var i = 0; i < 5; i++) {    a[i] = (function (i) {        return function () {            console.log(i)        }    })(i)}a[2]()

Set数据结构

*es6方法,Set本身是一个构造函数，它类似于数组，但是成员值都是唯一的

const set = new Set([1,2,3,4,4])[...set] // [1,2,3,4]Array.from(new Set())是将set进行去重

promise对象的用法,手写一个promise

promise是一个构造函数，下面是一个简单实例

var promise = new Promise((resolve,reject) => {    if (操作成功) {        resolve(value)    } else {        reject(error)    }})promise.then(function (value) {    // success},function (value) {    // failure})

Class的讲解

*class语法相对原型、构造函数、继承更接近传统语法，它的写法能够让对象原型的写法更加清晰、面向对象编程的语法更加通俗
这是class的具体用法

class Animal {    constructor () {        this.type = 'animal'    }    says(say) {        console.log(this.type + 'says' + say)    }} let animal = new Animal() animal.says('hello') // animal says hello class Cat extends Animal {     constructor() {         super()         this.type = 'cat'     } } let cat = new Cat() cat.says('hello') // cat says hello

可以看出在使用extend的时候结构输出是cat says hello 而不是animal says hello。说明contructor内部定义的方法和属性是实例对象自己的，不能通过extends 进行继承。在class cat中出现了super(),这是什么呢
在ES6中，子类的构造函数必须含有super函数，super表示的是调用父类的构造函数，虽然是父类的构造函数，但是this指向的却是cat
Object.assign 方法
var n = Object.assign(a,b,c)向n中添加a,b,c的属性

模版语法

*就是这种形式${varible},在以往的时候我们在连接字符串和变量的时候需要使用这种方式'string' + varible + 'string'但是有了模版语言后我们可以使用string${varible}string这种进行连接

rest参数

*es6引入rest参数，用于获取函数的多余参数，这样就不需要使用arguments对象了
ex:

function add(...values) {    let sum = 0    for(var val of values) {        sum += val    }    return sum}

module体系

*历史上js是没有module体系，无法将一个大程序拆分成一些小的程序。在es6之前，有commonJs,AMD两种
CommonJS是如何书写的呢

const animal = require('./content.js')    // content.js    module.exports = 'a cat'

require.js是这样做的
// content.js

define('content.js', function () {    return 'A cat'})require(['./content.js'], function (animal) {    console.log(animal) // a cat})

ES6的语法（在我用的vue中，就使用的是这个）

import animal from './content'// content.jsexport default 'a cat'

es6 import的其他用法
在vue中可以 import animal from './content'
animal这个值可以根据你的喜欢而改变，但是有一个问题就是如果一旦引入的是函数或者变量时，你就必须和content中的名字保持一致，可以参照
import { say, type } from './content'
常用的还有一种写法
import * as content from './content'
这种写法就是表示所有的输出值都在这个对象上

阅读全文

0 0