前端面试思维导图模板_ProcessOn思维导图、流程图

浏览器的渲染原理

请求资源：将请求内容交由html解析器进行解析，生成dom树

渲染：根据dom树建立renderobject树

建立renderLayer树及虚拟绘制上下文

绘制：

合成

计算机网络

TCP/IP

三次握手

过程：客户端发送SYN报文，服务端响应SYN+ACK报文，客户端发送ACK报文

四次挥手

过程:客户端发送FIN报文，此时服务器可以发送ACK报文给客户端，但客户端只能响应；服务器端在数据发送完毕后发送FIN+ACK报文；客户端发送ACK报文，此时连接断开

TCP和UDP的区别

TCP特点

面向连接

首部字节长度为20字节

面向字节流，数据可以分割

支持流量控制和拥塞控制

提供可靠数据传输

UDP特点

无连接，具有较小的延迟和协议开销

首部字节长度为8字节

面向报文，不支持报文分割

DNS解析

根域名服务器地址不变，访问根域名服务器得到各顶级域名服务器的NS记录和A记录，之后依次访问各个顶级域名服务器，得到次级域名服务器的NS和A，直到访问到指定主机

https工作过程

客户端发起请求

服务器向客户端发送证书

客户端解析证书，生成随机数

将随机数加密传送到服务器

服务器用随机数加密传送的消息内容

https与http的区别

https加密传输，http明文传输

https提供身份验证

https端口是43,http为80

设计架构

resetful api

数据结构

10大排序算法

冒泡

简单选择排序

快速排序

基数排序

...

算法优化

查找

顺序查找

折半查找

CSS

新特性：box-shadow、gradient、transform/animation

可以继承的属性

行内元素

text-direction、line-height、white-space、letter-spacing、word-spacing、font-size、font-family、color、text-transform

列表元素

list-style、list-style-type、list-style-position、list-style-image

终端块级元素

text-indent、text-align

选择器的优先级

!important>内联样式>ID>class|伪类|属性>标签|伪元素>继承>通配符

BFC

定义：指页面上的一块渲染区域，规定该元素如何布局，且对其他元素产生的影响

产生BFC的几种方式

BFC的常用规则

常见的应用: ul li中的垂直外边距合并

常见的布局方式

定位

其中,position:fixed/absolute脱离文档流

flex

设置在容器上的属性

设置在容器成员上的属性

grid

父元素

子元素

浮动

浮动会脱离文档流，块级元素认为他不存在；行内元素/文字会认为它存在，给浮动元素留出位置。

常见的布局

等高布局

水平居中

垂直居中

水平-垂直居中

两列/三列布局

注意的点

width: auto和width: 100%的区别

less

sass

嵌套

选择器嵌套

属性嵌套

sassScript

变量

运算

混合器

继承

高级功能

if

while/for/each

function()

详细地址

web安全

sql攻击

防御：不能使用sql拼接，使用占位符注入；严格验证用户输入，对单引号和双引号进行转换

xss

定义：利用客户端对服务器身份的有效性。

防御:对用户输入进行严格验证，对标签进行转换(过滤特殊字符)；在cookie中避免存入重要的信息；服务端指定数据类型，避免作为html解析

csrf

定义：利用服务器对客户端身份的有效性

防御：服务器端对referer进行验证、每次请求都使用验证码

模块管理

AMD

cmd

commonjs

ES6 import/export

webpack

ES6

module

promise

Promise.all: 当所有promise实例变为resolve时，会将每个实例的返回值作为数组传递给resolve函数作为参数

Promise.race

Promise.resolve

Promise.reject

Peomise.reject与promise.resolve的区别：resolve会将定义的参数作为后续resolve函数的参数，而reject会将Promise.reject的参数作为后续reject的参数

generator函数

概念：遍历器生成函数，状态机

yield表达式：

yield *表达式

next(): 便利每一个状态，且next的参数作为上一个yield表达式的返回值

async&&await

async函数是generator函数的语法糖

错误处理

箭头函数

this指向

工具

webpack

babel

HTTP

状态码

1**

100 表示服务器接收客户端请求，允许客户端继续发送请求

101 表示进行协议升级

2**

200 请求成功

3**

301 永久重定向

302 临时重定向

303 临时重定向，仅限于get请求

304 服务器没有返回资源，浏览器读取本地资源即可。

4**

400 bad request--客户端请求出错

401 需要进行客户端验证

403 用户权限不够，禁止访问，请求资源被服务器拒绝

404 请求的资源在服务器上找不到

5**

502 bad gateway

503 服务器负载太多或者正在维护，不能完成响应

500 服务器端发生错误

请求方法

GET

POST

HTTP缓存

强制缓存

cache-control:max-age

expires

协商缓存(会向服务器验证资源的有效性)

etag/if-non-match

last-modified/last-modified-since

http1.0和http1.1的区别

可扩展性

增加upgrade头域

增加options方法

缓存

增加Vary头域，用于内容协商

增加etag,if-none-match进行协商缓存

增加cache-control,利用max-age指定相对时间，当资源改变时，服务器重新激活stale对象

带宽优化

增加range头域，指明请求内容部分

允许发送100请求，判断是否有权限进行操作

长连接

host头域

内容协商

cookie

session

HTML5/HTML

语义化:header、footer、slide、nav、artical、section

元素

常见的块级元素：P、div、table、form、ul、li、ol

常见的内联元素：img、span、label、input、textarea、a

可替换元素(可以设置width,height,padding-top,margin-top)

img,textarea

不可替换元素(可以不设置width,height,margin-top,可以设置padding-top)

span,label,a

JS

函数节流、函数防抖

内存管理

策略

标记清除

引用计数

内存管理

内存泄漏

全局变量

避免全局变量的方式: 1.采用命名空间 2.采用模块加强的方式

IE中BOM、DOM采用的是C++实现的COM，com采用的是引用计数的内存回收机制，因此会存在循环引用的问题

DOM注册事件时，采用闭包的方案

IE中，采用string.length

注册事件后，删除元素

优点：内存会影响到执行栈及一个线程中同时执行的语句数量，因此管理内存能带来性能上的提升

数据类型

基本类型

undefined

null

string

字符方法

charAt()

charCodeAt()

操作方法

concat()

substring(),不包含末尾元素

slice(）

substr()

位置方法

indexOf（）

lastIndexOf()

大小写转换

toLowerCase()

toUpperCase()

字符串匹配方法

match(),返回值是数组,参数为正则表达式或者是regexp对象

search()，返回第一个匹配项的索引

replace()

第二个参数是函数时，第一个参数是模式的匹配项，模式匹配项的位置，原始字符串

split

比较方法

localCompare()

String.fromCharCode()

number

boolean

symbol

Symbol.for(),返回一个symbol类型值

Symbol.keyFor(),返回一个描述字符串

object

array

方法

队列方法

shift()

unshift()

栈方法

push()

pop()

迭代方法

every(),返回boolean

filter(),返回返回值是true的项组成的数组

forEach(),没有返回值

map()，返回每一项调用函数返回值组成的数组

some()，返回boolean

find(),找出第一个返回值为true的元素

findIndex(),找出第一个返回值为true的元素的index

fill(),填充对象时，填充的是同一个对象的地址

keys(),values,entries()

归并方法

reduce()

reduceRight()

位置方法

indexOf()

lastIndexOf()

操作方法

concat()

slice()

splice() 【改变原数组】,参数分别是起始位置，删除的项数，加入的项

copyWithin(),修改原数组

includes()

fill()

转换方法

转换成字符串

toString()

valueOf(),转化为数组

join()

... 数组扩展运算符，将数组转化成数字列表

转换成数组

Array.from()【适用于类数组对象和具有length属性的对象】

Array.of(),将一组值转换为数组

重排序方法(会改变原数组)

reverse()

sort()

检测方法

instanceof

Array.isArray()

函数

闭包

作用: 1.延长变量的生命周期 2.模仿块级作用域

理解：内部函数可以访问外部函数变量或参数的一种函数

注意：内部函数的this,arguments只能访问到活动对象为止，不能访问全局变量

this绑定

call

apply

bind

返回一个函数，向bind方法中传递的参数加上绑定函数的参数与原函数的参数会一一对应起来

用call或apply发现bind方法

作用域

对象

js实现浅拷贝

浅拷贝的方法

Object.assign()

array.slice()

array.concat()

JS实现深拷贝

检测方法

Object.is(),判断两个值是否严格相等，与===只有+0 ！=-0的区别

操作方法

Object.assign(),用于对象合并，只拷贝自身可枚举的属性

Object.create（），参数作为原型对象

Json.stringify()会忽略自身不可枚举的属性

迭代方法

for..in会遍历自身和继承的可枚举的属性，不含symbol

Object.keys()会遍历自身可枚举的属性的键名

getOwnPropertyNames(),会遍历对象所有的属性名(包括不可枚举的属性的键名)

Reflect.ownKeys(),遍历对象的所有属性名

操作原型对象的方法

Object.setPropertyOf(obj,proto)

Object.getPropertyOf()

web worker

链接： http://www.alloyteam.com/2015/11/deep-in-web-worker/

super关键字用在对象方法中，表示对象的原型对象

对象扩展运算符，取出对象中所有可遍历的属性

原型链

跨域

H5 postMessage

web socket

jsonp

cors

相同窗口下，window.name

同一主域，domain上升

异步

Promise A规范,promise

Event loop【宏任务、微任务】

Generator函数及API

async函数

本地存储

cache缓存

manifest

本地存储

localStorage

sessionStorage

cookie

设置

读取

修改

删除

localstorage,sessionstorage, cookie的区别

大小： storage为5m，cookie为4k

与服务端通信：cookie在同源情况下自动携带

生命周期

数据库

webSQL

indexDB

内存

绘图

canvas

svg

canvas与svg的区别

1. canvas支持图像导出

2. svg支持为元素设置事件处理程序

性能优化

减少HTTP请求

CDN内容分发

域名收敛

js/css采用外部文件的方式，可以利用本地缓存之后读取，而不用重新加载

减少带宽

压缩代码，图片压缩，选取合适的图片[webp>jpg,png>gif]

js

减少DOM操作，可以采用文本片段做缓冲；操作样式时可以采用class/id选择器

避免批量注册事件，可以采用事件委托

css

避免使用css表达式

尽量使用id选择器，速度快

动画元素使用硬件加速，使其单独形成一个层

项目中的亮点

机考-面试系统

websocket

优点：http是无状态协议，避免多次http连接造成http header的重复发送

工作原理：基于http，指定connection: upgrade;upgrade: websocket;等待服务器返回响应，建立websocket连接，之后进行websocket通信；

限制

web worker

特点

运行环境

navigator

location对象，但是所有的属性都是只读的

self对象

所有ES对象

xhr构造器

setTimeout及setInterval

importScript方法

close方法

localStorage（只能存储json字符串）

网络协议仿真

eventLoop

函数防抖（搜索框的实现）

淘宝实习

weex

MVVM框架

vue

vue router的实现原理

对组件化的理解

虚拟DOM

react

生命周期函数

挂载

componentwillmount

render

componentDidmount

更新

shouldComponentUpdate(nextState,nextProps)

componentWillReciveProps

componentWillUpdate

render

componentDidupdate

卸载

componentUnmount

危险的属性

ref(接受DOM作为参数)

context（父元素设置getChildContext,子元素设置contextTypes）

redux

store

react native

性能优化

减少props,state对不必要元素的影响

shouldComponentUpdate(nextState,nextProps)

减少不必要的元素传入到子组件中（减少virtual dom的diff比较）

react和vue的区别

双向数据绑定(v-model)

实现原理

vue更为简单，例如事件修饰符，v-model提供的修饰符