前端面试基础知识总结html1.如何理解Html的语义化为了在没有css代码时，也能呈现很好的内容结构，代码结构，以至于

ps：本文主要是个人笔记，不建议阅读

html

1.如何理解Html的语义化

语义化的HTML就是正确的标签做正确的事情，能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好地解析。

让人更容易读懂（增加代码的可读性），让搜索引擎更容易读懂（SEO）

为了在没有css代码时，也能呈现很好的内容结构，代码结构，以至于达到没有编程基础的非技术人员，也能看懂一二。（其实，就是为了不穿CSS外衣，裸奔依然好看）。
提高用户体验，比如：title，alt用于解释名词和图片信息。
利于SEO，语义化能和搜索引擎建立良好的联系，有利于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
便于团队开发和维护，语义化更具可读性，如果遵循W3C标准的团队都遵循这个标准，可以减少差异化，利于规范化。

2.行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素（display:inline/inline-block）

a、b、span、img、input、strong、select、label、em、button、textarea

块级元素（display: block/table）

div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素

即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

3.window.onload和DOMContentLoaded的区别

window.addEventListener('load', function () {
    // 页面的全部资源加载完才会执行，包括图片、视频等
})
document.addEventListener('DOMContentLoaded', function () {
    // DOM 渲染完即可执行，此时图片、视频还可能没有加载完
})

css

1.盒模型宽度如何计算（如何理解盒模型）

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

可通过box-sizing进行设置默认属性是content-box。根据计算宽高的区域可分为

content-box (W3C 标准盒模型)
border-box (IE 盒模型)

标准盒模型：宽度=内容的宽度（content）+border+padding+margin

低版本盒模型：宽度=内容的宽度（content+border+padding）+margin

2.margin负值

margin-top和margin-left负值，元素向上，向左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom负值，下方元素上移，自身不受影响

3.BFC的理解和应用

Block format context，块级格式上下文，一块独立渲染的区域，内部元素的渲染不会影响边界以外的元素

BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

BFC形成条件

float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

常见应用

清除浮动

4.float布局问题，以及clearfix

圣杯布局和双飞翼布局总结

使用float布局
两侧使用margin负值，以便和中间内容横向重叠

防止中间内容被两侧覆盖，一个用padding，一个用margin

/*圣杯*/
<div id="header">this is header</div>
<div id="container" class="clearfix">
  <div id="center" class="column">this is center</div>
  <div id="left" class="column">this is left</div>
  <div id="right" class="column">this is right</div>    
</div>    
<div id="footer">this is footer</div>
/*圣杯*/
<div id="main" class="col">
    <div id="main-wrap">this is main</div></div>
<div id="left" class="col">this is left</div>
<div id="right" class="col">this is right</div>

#container {            
  padding-left: 200px;            
  padding-right: 150px;        
}        
#container .column {            
 float: left;        
}       
#center {            
 background-color: #ccc;           
 width: 100%;        
}        
#left {            
  position: relative;            
  background-color: yellow;            
  width: 200px;            
  margin-left: -100%;           
  right: 200px;        
}        
#right {            
  background-color: red;            
  width: 150px;            
  margin-right: -150px;        
}
/*双飞翼*/
.col {            
    float: left;        
}        
#main {            
    width: 100%;            
    height: 200px;            
    background-color: #ccc;        
}        
#main-wrap {            
    margin: 0 190px 0 190px;        
}        
#left {            
    width: 190px;            
    height: 200px;            
    background-color: #0000FF;            
    margin-left: -100%;        
}        
#right {           
    width: 190px;            
    height: 200px;            
    background-color: #FF0000;           
    margin-left: -190px;        
}

clearfix

```css
.clearfix:after{     
    content:'.';    
    display:block;    
    height:0;    
    clear:both;    
    visibility: hidden;
}
.clearfix {    
    *zoom:1; /*兼容IE低版本*/
}
```

5.flex

www.ruanyifeng.com/blog/2015/0…

6.居中

水平居中

行级居中（inline,inline-block）父元素css：text-align: center
块级元素(block)：margin：auto
absolute元素：left: 50%; margin-left: 负自身宽度的一半;

垂直居中

inline元素：line-height的值等于height值
absolute元素：top: 50%; margin-top: 负自身高度的一半;

水平垂直居中

absolute元素：top:0; bottom:0; left:0; right:0; margin:auto;
absolute元素+css3：left:50%; top:50%; transfrom:(-50%,-50%);
flex父盒子设置：display: flex; justify-content: center; align-items:center;
父盒子设置：display:table-cell; text-align:center; vertical-align:middle; Div 设置: display:inline-block; vertical-align:middle;

7.line-height的继承问题

写具体数值，如父元素30px，则继承该值
写比列，如父元素2/1.5，则继承该比列
写百分比，如父元素200%，则直接继承父元素的line-height*200计算出来的值

8.rem

px，绝对长度单位
em，相对长度单位，相对于父元素
rem，相对长度单位，相对于根元素，如html设置font-size为100px，则1rem为100px

9.translation，transform，animation区别

translation，transform，animation区别

javascript

1.typeof能判断哪些类型

识别所有值类型
识别函数
判断是否是引用类型（不可再细分）

2.值类型和引用类型区别

www.cnblogs.com/leiting/p/8…

3.判断一个变量是不是数组

blog.csdn.net/yucihent/ar…

4.原型原型链

原型关系

每个class都有显示原型prototype
每个实例都有隐式原型__proto__
实例的__proto__指向对于class的prototype

基于原型的执行规则

获取属性xialuo.name或执行方法xialuo.sayhi()时，先在自身属性和方法寻找，如果找不到则去__proto__中查找

5.手写深拷贝

注意判断值类型和引用类型，注意判断是数组还是对象，递归

```javascript
/** 
* 深拷贝
* @param {Object} obj 要拷贝的对象 
*/
function deepClone(obj = {}) {    
if (typeof obj !== 'object' || obj == null) {
        // obj 是 null ，或者不是对象和数组，直接返回
        return obj
}    
// 初始化返回结果    
let result
    if (obj instanceof Array) {
        result = []
    } else {
        result = {}    
    }
    for (let key in obj) {
        // 保证 key 不是原型的属性
        if (obj.hasOwnProperty(key)) {
            // 递归调用！！！
            result[key] = deepClone(obj[key])
        }
    }
    // 返回结果
    return result
}
```

6.this的不同应用场景如何取值

作用域：全局作用域，函数作用域，块级作用域

this在各个场景中的取值，是在函数执行的时候确定的，不是在函数定义的时候

作为普通函数
作为对象方法被调用
使用call，apply，bind
在class方法中被调用
箭头函数（取上级作用域）

7.闭包应用场景

函数作为参数被传递，函数作为返回值被返回
闭包：自由变量的查找，在函数定义的地方，向上级作用域查找，不是在执行的地方
应用：隐藏数据，cache工具

```javascript
// 函数作为返回值
function create() {
const a = 100
     return function () {
         console.log(a)
     }}
 const fn = create()
 const a = 200 fn() // 100
// 函数作为参数被传递
function print(fn) {
    const a = 200
    fn()
}
const a = 100
function fn() {
    console.log(a)
}
print(fn) // 100


// 闭包隐藏数据，只提供 API
function createCache() {
    const data = {}
 // 闭包中的数据，被隐藏，不被外界访问
    return {
        set: function (key, val) {
            data[key] = val
        },
        get: function (key) {
            return data[key]
        }
    }}
const c = createCache()
c.set('a', 100)
console.log( c.get('a') )
```

8.手写bind函数

```javascript
// 模拟
 bindFunction.prototype.bind1 = function () {
    // 将参数拆解为数组
    const args = Array.prototype.slice.call(arguments)
    // 获取 this（数组第一项）
    const t = args.shift()
    // fn1.bind(...) 中的 fn1
    const self = this
    // 返回一个函数
    return function () {
        return self.apply(t, args)
    }}function fn1(a, b, c) {
    console.log('this', this)
    console.log(a, b, c)
    return 'this is fn1'
}
const fn2 = fn1.bind1({x: 100}, 10, 20, 30)
const res = fn2()
console.log(res)
```

9.请描述event loop的机制

js是单线程运行的，异步主要基于回调来实现，event loop就是异步回调的实现原理

同步代码，一行行放在Call Stack执行
遇到异步，会先“记录”下，等待时机（定时，网络请求等）
时机到了，就会移动到Callback Queue
如Call Stack为空（即同步代码执行完）Event loop开始工作
轮询Call Queue，如有则移动到Call Stack执行
然后继续轮询查找

10.什么是宏任务macroTask和微任务microTask，两着有什么区别

宏任务：setTimeout，setInterval，Ajax，DOM事件
微任务：Promise，async/await
微任务执行时机比宏任务要早

js是单线程的，而且和DOM渲染共用一个线程，js执行的时候，得留一些时机供DOM渲染

每次Call Stack清空（即每次轮询结束），即同步任务执行完
都是DOM渲染的机会，DOM结构如有改变则重新渲染
然后再去触发下一次Event Loop

宏任务：DOM渲染后触发，如setTimeout
微任务：DOM渲染前触发，如Promise

微任务是ES6语法规定，宏任务是浏览器规定的

11.Promise三种状态，以及如何变化

pending，resolved，rejected
pending -> resolved 或 pending -> rejected阿斯蒂芬

状态不可逆看见

pending状态，不会触发then和catch
resolved状态，会触发后续then回调函数
rejected状态，会触发后续catch回调函数

then正常返回resolved，里面有报错则返回rejected

catch正常返回resolved，里面有报错则返回rejected

12.async/await 和 promise 的关系

执行async函数，返回的是Promise对象
await相当于Promise的then
try...catch 可捕获异常，代替了Promise的catch

```javascript
async function async1() {
    console.log("async1 start");
    await async2()
    console.log("async1 end");
};

async function async2() {
    console.log("async2 start");
    await async3();
    console.log("async2 end");
};

async function async3() {
    console.log("async3 start");
};

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

console.log("start");

async1();

new Promise(function (resolve) {
    console.log("Promise1");
    resolve();
}).then(function () {
    console.log("Promise2");
});

console.log("all end");```

13.手写简易ajax

xhr.readuState

0 - （为初始化）还没有调用send()方法
1 - （载入）已调用send()方法，正在发生请求
2 - （载入完成）send()方法执行完成，已经接受到全部响应内容
3 - （交互）正在解析响应内容
4 - （完成）响应内容解析完成，可以在客户端调用

xhr.status

2xx - 表示成功处理请求，如200
3xx - 需要重定向，浏览器直接跳转，如301 302 304
4xx - 客户端请求错误，如400 403

5xx - 服务端错误

function ajax(url) {
    const p = new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(
                        JSON.parse(xhr.responseText)
                    )
                } else if (xhr.status === 404 || xhr.status === 500) {
                    reject(new Error('404 not found'))
                }
            }
        }
        xhr.send(null)
    })
    return p
}
const url = '/data/test.json'ajax(url)
.then(res => console.log(res))
.catch(err => console.error(err))

14.cookie、sessionSttorage、localStory的区别

15.var和let，const的区别

var声明的变量会挂载在window上，而let和const声明的变量不会
var声明变量存在变量提升，let和const不存在变量提升
let和const声明形成块作用域，暂存死区
同一作用域下let和const不能声明同名变量，而var可以
const一旦声明必须赋值，不能使用null占位声明后不能修改，如果声明的是复合类型数据可以修改其属性

www.cnblogs.com/zhaoxiaoyin…

16.手写深度比较

```javascript
// 判断是否是对象或数组
function isObject(obj) {
    return typeof obj === 'object' && obj !== null
}
// 全相等（深度）
function isEqual(obj1, obj2) {
    if (!isObject(obj1) || !isObject(obj2)) {
        // 值类型（注意，参与 equal 的一般不会是函数）
        return obj1 === obj2
    }
    if (obj1 === obj2) {
        return true
    }
    // 两个都是对象或数组，而且不相等
    // 1. 先取出 obj1 和 obj2 的 keys ，比较个数
    const obj1Keys = Object.keys(obj1)
    const obj2Keys = Object.keys(obj2)
    if (obj1Keys.length !== obj2Keys.length) {
        return false
    }
    // 2. 以 obj1 为基准，和 obj2 一次递归比较
    for (let key in obj1) {
        // 比较当前 key 的 val —— 递归！！！
        const res = isEqual(obj1[key], obj2[key])
        if (!res) {
            return false
        }
    }
    // 3. 全相等
    return true
}
```

17.数组api

// 纯函数：1. 不改变源数组（没有副作用）2. 返回一个数组
// concat map filter slice

// 非纯函数
// push pop shift unshift
// forEach some every
// reduce splice

18.new Object() 和 Object.create() 区别

{}等同于new Object()，原型Object.prototype
Object.create(null)没有原型
Object.create({...})可指定原型

部分内容参考 codehtml.cn/front-end-i…

前端面试基础知识总结