面试准备

什么是面试

经过组织者精心设计的
以交谈和观察为主要手段（面对面沟通更容易加深两个人的印象）
评价知识、能力和经验、综合素质（刚毕业和毕业不久的人主要考察基础知识和能力，经验的考察相对较少）

一.面试的环节和流程

1.HR如何拿到你的简历

员工内推（第一时间把邮件给该人，不要再放到公共平台上）
猎头推荐
hr收集（主动搜索，接收邮件）

2.面试流程

一面

主要考察基础知识，源码级别，设计模式算法，客户端等
二面（交叉面试）

基础知识开始，到框架原理，到计算机基础，项目解决方案
三面

讲角色定位，提出你在团队的位置，进入团队后你准备去做什么
hr面

如实回答，不要带有情绪，呈现踏实积极阳光的心态

二.JD分析

JD是什么

所谓JD就是用人单位发布的招聘信息一般包括职位描述、岗位要求
从JD中能看出我们是做什么的

在JD中看出我们的工作内容是什么，是小程序还是什么

看出对应的技术栈是什么

经验要求（所谓经验要求一般指的是你的工作能力期待）
不要过于在意JD

通过分析JD来补充自己的准备，但不用过于在意JD，JD是hr发布的，hr和技术人员可能会沟通不及时，不能完全相信JD的要求

三.如何写简历

简历包含的内容

内容简洁，直击重点，表现出自己的优势

界面不要太花哨，简洁明了即可

注意用词，‘精通’，‘熟练’等慎用，特别是源码，原理级别
```
   1.个人信息
```
必备：姓名性别电话邮箱籍贯（年龄可以不写）
```
 2.教育经历
```
写上最高学历即可

学校，专业和入学毕业时间
```
 3.专业技能
```
表现自己的核心竞争力，三五条即可
```
 4.工作经历
```
如是填写即可，最近的工作经验最好不要造假
```
 5.项目经验
```
写2-4个具有说服力的项目

项目描述，技术栈，个人角色
```
 6.博客和开源
```

面试之前要准备什么

准备工作和注意事项

看JD，看是否还需要临时准备一下打印纸质简历，带着纸和笔最好带着自己的电脑，现场可能手写代码要有时间观念，提前5-10分钟和hr进行联系
不要挑战面试官，即便他错了
形象干净谦卑，不要穿正装
遇到不会的问题，要表现出自己积极的一面

前端基础知识体系

CSS HTML

HTML

一、如何理解HTML语义化？
1. 提高代码的可读性（给人看）
2. 便于搜素引擎检索SEO（给机器看）

二、块级元素和内连元素？
1.display:block/table;有div，h1-6，table，ul.p等
2.display:inline/inline-block;有span img a input等

布局

一、盒模型宽度的计算
offsetWidth=（内容宽度+内边距+边框）
使用box-sizing：border-box后，offsetWidth宽度为设置的width宽度

二、margin纵向重叠问题
相邻元素的margin-top和margin-bottom会重叠

三、margin负值问题
margin-top和margin-left负值，元素会向上和向左移动
margin-bottom和margin-right负值，相邻元素会向上和向左移动

四、什么是BFC？如何应用？
Block format context，块级格式上下分，一块独立渲染区域，内部元素的渲染不会影响边界以为的元素
形成BFC的常见条件：
1.float不是none
2.position是absolute或fixed
3.overflow不是visable
4.display是fix-item inline-block等
常用于清除浮动

五、如何实现圣杯布局和双飞翼布局（考察float）
圣杯布局和双飞翼布局的目的：
1、三栏布局，中间一栏最先加载和渲染（内容最重要）
2、两侧内容固定，中间内容随着宽度自适应
圣杯布局和双飞翼布局的技术总结：
1、使用float布局
2、两侧使用margin负值，以便和中间内容横向重叠
3、防止中间内容被两侧覆盖，一个用padding一个用margin

六、手写clearfix
开启BFC机制，进行浮动的清楚
可以给盒子加伪元素after，设置盒子模型为快级盒子

七、用flex实现一个三点的色子（flex）
flex-direction 设置主轴方向
justify-content 设置主轴的对齐方式
align-items 设置交叉轴对齐方式
flex-wrap 设置是否可以换行
align-self 设置子元素的交叉轴对其方式

定位

一、absolute 和 relative 分别依据什么定位？
relative 依据自身定位
absolute 依据最近一层的定位元素定位

二、居中对齐有哪些实现方式
水平居中：
inline元素：text-align：center
block元素：margin：auto
absolute元素：left50% margin-left：-自身宽度一半｜｜left50% transform：translate（-50%，-50%）
垂直居中
inline元素：line-height的值等于height
absolute元素：top50% margin-top负自身高度一半
absolute元素：transform（-50%，-50%）
absolute元素：top，left，bottom，right=0+margin：auto

图文样式

line-height如何继承
写具体数值继承具体数值
写比例继承比例
写百分比，先计算转换为具体数值，之后继承该具体数值

移动端响应式

一、rem是什么？
rem是一个长度单位，px是绝对长度单位，em是相对长度单位，相对于父元素的字体大小，rem是相对长度单位，相对于跟元素的字体大小

二、响应式布局的常见方案是什么？
1、media-query 根据不同的屏幕宽度设置跟元素字体大小，再配合rem实现
2、vw和vh
vw和vh分别是网页适口宽度和高度的1/100
vmax和vmain去vw和vh两者都最大值和最小值
网页适口尺寸：
window.screen.height //屏幕高度
window.innerHeight //网页适口高度
document.body.clientHeight // body高度

CSS3

ES语法

一、typeof能判断哪些类型
识别所有的值类型，不能识别引用类型

二、何时使用==何时使用===
如果要判断是不是等于null或者undefined时用==其余时候都用===

三、手写深拷贝
```
function deepClone(obj){
//判断obj是不是引用类型
    if(typeof obj !== 'object' || obj == null) return obj
//创建新的对象容器
    const cloneObj = new obj.constructor()
//拿到key值给新对象赋值
    Obejct.keys(obj).forEach(k=>cloneObj[k]=deepClone(obj[k]))
//返回容器
    return cloneObj
}
```

原型和原型链

如何判断一个变量是不是数组
考点：instanceof的原理
instanceof Array

class的原型本质，怎么理解
原型和原型链的图示
属性和方法的执行规则，通过原型链去找的流程

作用域和闭包

this的不同应用场景，如何取值？
this的取值是在函数执行时确认的，而不是在定义的时候确定
普通函数指向window
class方法指向实例
箭头函数指向上级作用域
bind，apply，call指向传入的参数

    手写call函数
Function.prototype.myCall = function (tag, ...props) {
 tag = tag == undefined ? globalThis : Object(tag)
 const key = Symbol('this')
 Object.defineProperty(tag, key, {
   value: this,
 })
 const res = tag[key](...props)
 return res
}

闭包在实际开发中的应用场景
隐藏数据，只提供API

异步和单线程

同步和异步的区别是什么？
异步是基于JS单线程的
异步不会阻塞代码执行
同步会阻塞代码执行

前端使用异步的场景有哪些
网络请求
定时任务

WebApi

js基础知识是ECMA规定的
JS Web API是W3C规定的

DOM和BOM

DOM的本质是HTML解析出来的树

DOM属性 property和attribute的区别
property不会改变HTML结构，进行修改可能不会引起重新渲染，attribute修改html属性，会改变HTML结构，修改一定会引起重新渲染

对现有的元素节点进行移动使用apendChild

如何优化DOM性能
对DOM查询做缓存
将频繁操作改为一次性操作
创建文本片段
createDocumentFragment，可以用来储存html元素节点

BOM基础
navigator
navigator.userAgent获得浏览类型和版本    
screen
screen.width获得浏览器的宽度    
location
loction.href 获得当前网址
location.protocol 获得当前网址协议
location.hose 获得域名
loaction.search 获得常用参数
location.hash 获得哈希值

Ajax和跨域

XMLHttpRequest

const xhr = new XMLHttpRequest()
//true是异步请求
xhr.open('GET','url',true)
xhr.onreadystatechange = function (){
    if(xhr.readyState ===4 ){
        if(xhr.status === 200){
            alert(xhr.responseText)
        }
    }
}
shr.send(null)

状态码
2xx--成功的请求 200
3xx--要重定向浏览器跳转 301永久重定向，302临时重定向 304资源未改变
4xx-- 404 请求地址有错误，403没有权限
5xx-- 服务端错误

 跨域
 同源策略，ajax请求时，浏览器要求当前网页和服务器必须同源，协议、域名、端口三者必须一致
 JSONP
 <script>可绕过跨域限制，服务器可以任意动态拼接
 cors - 服务器设置response.setHeader

事件和存储

   e.preventdefalut阻止默认行为
   e.stopPropagation组织冒泡行为

描述cookie，localStorage和sessionStorage

cookie本身用于浏览器和server通讯，被借用到本地存储中，可用document.cookie进行修改

http常见的状态码
1xx服务器收到请求
2xx请求成功
3xx重定向 
301 永久重定向 302临时重定向（搜索引擎）
304资源未被修改（浏览器有缓存，重复请求）
4xx客户端错误
404资源未找到，403没有权限
5xx服务端错误

http常见的header
Request Headers 请求头
Accept浏览器可接收的数据格式
Accept-Encoding 浏览器可接收的压缩算法
Accept-language 浏览器可接收的语言
Connection：keep-alive 一次TCP连接重复使用
User-Agent（UA） 浏览器信息

Response Headers 响应头
Content-type返回数据格式
Content-length返回数据的大小

什么是Restful API
传统methods
get获取数据，post提交数据
现在的methods
get获取数据，post新建数据，patch/put更新数据，delete删除数据
Restful一种新的API设计方法
传统API设计，把url当作一个功能
RestfulAPI，把url设置为唯一的资源标识

http缓存机制****
为什么需要缓存
让网络请求更快，提高网络请求的速度，从而提升用户体验
哪些资源可以被缓存？
静态资源可以被缓存（js css img）
强制缓存
初次请求的时候，服务器会返回资源和catch-control来规定哪些资源要缓存，和缓存时间，再次请求的时候，浏览器会先去本地缓存中查找缓存资源，缓存过期后会再次请求新的资源，no-cache不用本地强制缓存，max-age缓存时间
协商缓存
服务端缓存策略
服务器判断客户端资源是否和服务端资源一致，资源一致返回304不再返回资源，让客户端读取本地资源

请求过程先进行强制缓存的判断，再进行协商缓存的判断
不同刷新方式对缓存的影响？
正常操作，两种缓存方式都有效
手动刷新，强制缓存失效，协商缓存有效
强制刷新，两种缓存都无效

http和https加密方式
http是明文传输，敏感信息容易被中间劫持
https劫持了后也无法解密
对称加密：同一个key用于加密和解密
非对称加密：一对keyA加密B解密
https在第一次传输的时候用非对称加密的方式，因为非对称加密的形式，传输的内容不会被破译所以在之后的传输中，用这个内容作为key采用对称加密的形式

开发环境

git 调试工具 抓包 webpack babel linux

版本管理

常用的git命令
git diff 展示修改的操作
git log 打印日志
git add . 
git checkout xxx 撤回
git commit -m 'xxx' 提交
git push origin master 推送到服务端
git pull origin master 从服务端下载一些内容
git branch 看分支
git checkout -b xxx /git checkout xxx切换分支
git merge xxx 合并分支
git stash 将自己的修改暂存起来，可以解决忘记切换分支在别的分支进行操作
git stash pop 将暂存的修改重新释放出来

查找自己的ssh公式
mac电脑 cat ～/.ssh/id_rsa.pub

调试抓包

移动端h5页面查看网络请求
windows一般用fiddler
mac 一般用charles
手机和电脑连同一个局域网
将手机代理到电脑上
手机浏览网页，即可抓包
查看网络请求
网址代理
https处理

打包构建

webpack和babel
ES6模块化，浏览器不支持，ES6语法，浏览器并不完全支持
压缩代码，整合代码
npm init -y 初始化webpack配置
npm install webpack webpack-cli -D 可以去淘宝镜像

linux命令
ssh 用户名@ip地址 登录linux测试机
ls 查看文件夹
ls -a 查看所有的
ll 查看文件夹（展示形式不同）
mkdir 新建文件夹
rm -rf 文件夹名字，删除文件夹
mv 原文件名字 新文件名字。 修改文件名字
mv 文件名字 路径 移动文件位置
cp 文件名字 拷贝后的文件名字。拷贝
touch 文件名字 新建文件 
vi 文件名字 新建文件并打开 （按I进入输入模式，q退出，q！强制退出，w保存）
cat 打印文件内容
grep 关键字 文件名。查找关键字

运行环境

页面渲染

从输入url到渲染出页面的整个过程
DNS解析：域名>IP地址
浏览器根据IP地址向服务器发起http请求
服务器处理http请求，并返回给浏览器
根据HTML生成DOM
根据CSS生成CSSOM
将DOM和CSSOM整合成Render tree 渲染树
根据Render Tree渲染页面，遇到script暂停渲染，优先加载并执行，完成之后再继续渲染

性能优化

加载更快
减少资源体积，压缩代码
减少访问次数：合并代码（雪碧图），SSR服务器端渲染、缓存


渲染更快
CSS放在head，JS放在body中，
使用DOMContentLoaded触发js，尽早的执行js
使用懒加载
图片懒加载，给属性src设置preview.png 自定义属性data-realsrc储存真正的地址，当图片出现在适口进行图片加载
对DOM查询进行缓存
频繁DOM操作用切片的形式合并到一起插入
节流和防抖

Web安全

XSS跨站请求攻击
将特殊字符进行替换

CSRF跨站请求伪造

真题演练

var和let const的区别

var有变量提升是es5的语法，let constse6的语法
var 和let是变量，const是常量
let const有块级作用域欧，var没有

typeof返回哪些类型

undefined string number boolean symbol
object  (null 也会被识别为object)
function

列举强制类型转换和隐式类型转换

显示：parseInt parseFloat toString
隐式：+ * ==

手写深度比较模拟lodash isEqual

split（）和join（）的区别

split将字符串转换为数组
join将数组转换为字符串

数组的pop push unshift shift分别做什么

pop将数组最后一项删除，返回值是被删除的数据
push是向数组的最后一位添加一项，返回值是数组的长度
shit删除数组的第一项，返回被删除的数据
unshift在数组第一项添加数据，返回的是数组的长度

数组的纯函数方法有哪些，返回一个新数组

concat（[123,123]）追加一个新的数组
map（）
filter 进行数组筛选
slice 截取

数组slice 和 splice的区别

slice是做切片的，splice是做剪接的
splice 第一个参数是起始位置，第二个参数是结束位置，后面的参数是要替换的值，是一个非纯函数，返回值是剪接出来的值

[10,20,30].map(parseInt)返回结果是什么

[10,NAN,NAN]

ajax请求get和post的区别

get一般用于查询操作，post一般用于用户提交操作
get参数拼接在url上，post参数放在请求体内
post易于防止CSRF

函数call和apply的区别

call和apply第一个参数都是调用对象，call后续操作是参数，apply第二个参数是给调用对象进行传参，是一个类数组

事件代理（委托）是什么？

事件代理和委托的形式是，将触发事件绑定给父组件，通过判断触发对象是不是自己想要的对象来进行判断事件是不是要进行触发

闭包是什么，有什么特性？有什么负面影响？

函数作为参数被传入，或函数作为返回值被返回往往是闭包
自由变量的查找，要在函数定义的地方（而非执行的地方）
影响：变量会常驻内存得不到释放

如何阻止事件冒泡和默认行为？

event.stopPropagation()
event.preventDefault()

查找、添加、删除、移动DOM节点的方法

document.querySelector()获取dom节点
document.createELement()创建节点
document.appendChild()添加节点,移动节点
parentNode 获取父节点
childNodes 获取子元素列表
removeChild() 删除子节点

如何减少DOM操作

缓存DOM查询结果
多次DOM操作，合并到一次插入
document.createDocumentFragment()创建文档片段

解释jsonp原理，为何它不是真正的ajax

jsonp是用于解决跨域问题的，是浏览器的同源策略衍生出来的，ajax是根据XMLHttprequset
img和a还有script都可以实现

document load和ready的区别

load事件要等待图片加载完成才会执行
ready-DOMContentLoaded在DOM渲染完即可执行

== 和 ===的不同

==会用类型转换
一般只有在进行判断是不是null和undefined的时候才会用==

函数声明和函数表达式的区别

函数声明直接通过function声明，函数表达式是用一个变量来接收函数，
函数声明会在代码执行之前预加载，而函数表达式不会

new Object（）和Object.create()的区别

字面量创建方式相当于 new Object
 Object.create(null) 可以指定原型

判断字符串以字母开头，后面字母数字下划线，长度6-30

const reg = /^[a-zA-Z]\w{5,29}$/

手写trim方法

String.prototype.trim=function(){
    return this.replace(/^\s+/,'').repalce(/\s+$/,'')
}

如何捕获JS程序中的异常

用try{} catch(error){}
window.onerror进行自动捕获

什么事JSON

JSON是一种数据格式，本质是一段字符串
JSON格式和js对象结构一致
JSON.stringfy 和JSON.parse可以将数据转换为JSON格式和对象格式

获取当天页面url参数

location.search
const a= URLSearchParams(location.search)
a.get('b')

数组去重

const set = new Set(arr)
[...set]

介绍一下requestAnimationFrame

浏览器会自动进行动画流畅处理，后台隐藏iframe，raf会自动暂停

有序和无序

对象是无序的，数组是有序的
有序操作慢

Map和Object的区别

Map可以以任何类型为key
Map是有序结构

Set和数组的区别

Set元素不能重复，Set是无序结构

WeakMap和WeakSet

弱引用，防止内存泄漏
WeakMap只能用对象作为key
WeakSet只能用对象做key
没有forEach和size，只能用delete、add和has
弱引用不会印象正常数据的销毁的过程

框架基础

React

一、基本使用

1. JSX基本使用

富文本的使用
声明一个对象，对象的属性名为__html,
__html属性的属性值为富文本
在要加载富文本的标签上添加属性 dangerouslySetInnerHTML,将该对象赋值给他

2.事件

事件代理
React的事件在React17之前都是绑定在document上的，并没有挂载到原生的事件对象上
在React17之后，事件挂载到对应的root组件上，有利于多个React版本并存，有利于微前端

3.setState

1.不要直接修改state，使用不可变值
2.函数式编程诞生的不可变值理念
3.在传入的值是对象时，值会被合并，类似于Object.assign

4.组件生命周期

1.单组件生命周期
三个阶段：
挂载时
constructor-进行初始化
render-
 componentDidMount-组件挂载完成
更新时
shouldComponentUpdate
render
componentDidUpdate
卸载时
componentWillUnmount
2.父子组件的生命周期
创建是从外到内，渲染是从内到外
更新是父组件先更新，子组建先更新完
卸载也是父组件先卸载，子组建先完成卸载

二、高级特性

函数组件

函数组件是一个纯函数，输入props，输出JSX
没有生命周期，没有实例，不能扩展其他方法

非受控组件

ref
defaultValue
defaultChecked
非受控组件就是直接操作dom，不将dom的value值和状态进行绑定

Portals传送门

将标签移动到目标位置,ReactDom.createPortal(JSX,目标节点)
不会打乱组件结构，只是在渲染的时候改变位置

异步组件

React.lazy
const ContextDemo = React.lazy(()=>import('./Component'))
React.Suspense
<React.Suspense fallback={loading}>
    <ContextDemo/>
</React.Suspense>

性能优化

shouldComponentUpdate
是个函数，两个参数一个代表props一个代表state和，如果两个值相等的话返回false，不相等返回true，返回 true的时候组件会更新

PureComponent和React.memo
PureComponent 纯组件，在SCU中实现了浅比较，在写类组件的时候继承PureComponent即可，但所有子组建都要是PureComponent
React.memo使用，第一个参数传入组件，第二个参数传入一个函数，这个函数的两个参数，第一个参数代表上一次的props第二个代表现在的，如果两个props传入render后返回的结果相同则返回false

关于组件公共逻辑的抽离

高阶组件HOC
接受一个组件返回一个组件，通过定义多个组件的公共逻辑将结果作为props传给组件，将该组件输出

三、周边工具

Redux使用

基本概念
store state action reducer
单线数据流
react-redux
Provider包裹整个组件
useDispatch useStore
异步action
redux-thunk中间件
中间件

React-router

路由懒加载，动态路由

四、原理

Vdom和diff

狭义的来说，vdom在数据形式上是就是一个js对象，一个描述了DOM节点的js对象
fiber是vdom的实现形式
节点复用需要满足三个条件，层级相同，组件类型相同，key相同

JSX本质

JSK本质是React.createElement，只不过是通过babel进行转译了，函数的第一个参数是标签名，第二个参数是一个对象，保存标签上所有的props，第三个标签是子节点

React合成事件机制

为什么要合成事件机制？
挂在到root组件上，减少内存消耗，避免频繁解绑
方便事件的统一管理
有利于多个react版本并存，例如微前端

setState和batchUpdate机制，transaction事物机制

setState的执行流程
开始将新的state存入pending队列中，检测它是否处于batchupdate，如果true处于则进行暂存，如果不在false，则直接进行数据更新

React渲染和更新过程

五、Hooks

六、面试题

组件之间如何通讯

父子组件通讯用props
redux和context

JSX本质是什么

createElement
执行返回vnode

Context是什么，如何应用

context是创建一个上下文，可以进行状态的分发，让子组建可以使用，常用于保存一些公共的信息，主题色、语言等

shouldComponentUpdate

进行性能优化

html css js基础 React面试总结

面试准备

什么是面试

一.面试的环节和流程

1.HR如何拿到你的简历

2.面试流程

二.JD分析

三.如何写简历

面试之前要准备什么

准备工作和注意事项

前端基础知识体系

CSS HTML

HTML

布局

定位

图文样式

移动端响应式

CSS3

ES语法

原型和原型链

作用域和闭包

异步和单线程

WebApi

DOM和BOM

Ajax和跨域

事件和存储

开发环境

版本管理

调试抓包

打包构建

运行环境

页面渲染

性能优化

Web安全

真题演练

var和let const的区别

typeof返回哪些类型

列举强制类型转换和隐式类型转换

手写深度比较模拟lodash isEqual

split（）和join（）的区别

数组的pop push unshift shift分别做什么

数组的纯函数方法有哪些，返回一个新数组

数组slice 和 splice的区别

[10,20,30].map(parseInt)返回结果是什么

ajax请求get和post的区别

函数call和apply的区别

事件代理（委托）是什么？

闭包是什么，有什么特性？有什么负面影响？

如何阻止事件冒泡和默认行为？

查找、添加、删除、移动DOM节点的方法

如何减少DOM操作

解释jsonp原理，为何它不是真正的ajax

document load和ready的区别

== 和 ===的不同

函数声明和函数表达式的区别

new Object（）和Object.create()的区别

判断字符串以字母开头，后面字母数字下划线，长度6-30

手写trim方法

如何捕获JS程序中的异常

什么事JSON

获取当天页面url参数

数组去重

介绍一下requestAnimationFrame

有序和无序

Map和Object的区别

Set和数组的区别

WeakMap和WeakSet

框架基础

React

一、基本使用

1. JSX基本使用

2.事件

3.setState

4.组件生命周期

二、高级特性

函数组件

非受控组件

Portals传送门

异步组件

性能优化