依据自己的理解纯记录,没复制可能有错误,不正确的地方请大佬指出拜谢

html

1 css的link 和 @import() 有什么区别

首先link属于html 标签, 他可以和其他资源同时一起加载,而且他不止加载一个css ,还能加载其他类型的文件
@impport是css 提供的, 他需要等待页面加载完成后才能加载它引用的css, 他只能加载css 文件, 必须得写在css 里,所以一般不建议使用

JS

1 type of

type of 是一元操作符除了对象类型其他可用判断出具体类型

2 this

this的绑定优先级
new 绑定 > 显式绑定 > 隐式绑定 > 默认绑定

function foo(arg){
    this.a = arg;
    return this
};

var a = foo(1);
var b = foo(10);

console.log(a.a);    [1]// 
考点 全局污染
console.log(b.a);

3 闭包

闭包链接函数内外部的就叫闭包,拥有外部函数变量的函数就是闭包

4 作用域

作用域
js是静态作用域他的作用域在变量或函数定义的时候就已经确定

5 执行上下文栈和变量提升

执行上下文栈和变量提升
函数执行栈会在运行中产品内部如果没有子函数执行就会进行出栈如果有子函数在内部调用,会在执行数组中新创建一个子函数执行栈,然后依次执行后,再依次出栈

6 js函数的参数传递

js函数的参数传递按值传递
单函数参数传入的是基本类型,传递会拷贝一份,如果是引用类型,会传递副本或地址不做拷贝,也叫共享传递

7 new关键字

new 关键字做了什么 1 创建一个空对象
2 将构造函数设为这个对象的原型
3 执行构造函数，将this绑定到GIA对象上
4 返回对象，并判断返回值的类型

8 继承

继承
使用原型继承,原型上的属性被所有实例共享,公用

9 原型链

所有的引用类型都可以自定义添加属性
所有的引用类型都有自己的隐式原型（proto）
函数都有自己的显式原型（prototype）
所有的引用类型的隐式原型都指向对应构造函数的显示原型
使用引用类型的某个自定义属性时，如果没有这个属性，会去该引用类型的__proto__（也就是对应构造函数的prototype）中去找

10

react

1 为什么要用状态管理库?

为什么要用状态管理库?redux等 react,数据流向是单向的从上至下,不可同级或反向,项目变得越来越大时,管理state的回调和事件会越来越多,state难管理,一个component的变化可能会引起其他的model的变化,单一的state变化可能会引起多个model 的 render.当系统变得非常大时,加一个功能都会变得举步维艰,redux提供了一个store的统一存储库,组件直接通过dispatch获取数据不通过其他组件,也能从store获取到其他数据的变化,这样简单清晰明了,容易维护

2 redux流程

首先view层用户触发一个事件,这个事件向redux的actions发送一个dispatch函数,然后reducer通过获取内的dispatch函数参数去判断调用那个方法修改store,store只做存储,修改完成后返回的新的store,更新完成通过connect去通知view层数据更新了,然后触发渲染

3 redux的中间件是什么

中间件是view发起dispatch时,动作到达reducer前的一个扩展点
例子:
view -→> action -> reducer -> store
加中间件后 applyMiddleware
view -> action -> middleware -> reducer -> store
他接收的参数为一个对象{dispatch和getstate}

4 Redux 中间件是怎么拿到store 和 action? 然后怎么处理?

本质上就是一个函数柯里化,中间件函数通过接收getstate和dispatch 来获得store和actions 然后返回颗粒后的新的dispatch 可以再需要的时候直接调用actions 例（{ getState，dispatch })=> next => action。

5 connect有啥用

获取store

通过getstore获取整个store

封装组件传入store和actions

监听store的变化对比两次

      const [subscription, notifyNestedSubs] = useMemo(() => {
        if (!shouldHandleStateChanges) return NO_SUBSCRIPTION_ARRAY
        const subscription = createSubscription(
          store,
          didStoreComeFromProps ? undefined : contextValue!.subscription
        )
        const notifyNestedSubs =
          subscription.notifyNestedSubs.bind(subscription)

        return [subscription, notifyNestedSubs]
      }, [store, didStoreComeFromProps, contextValue])

6 hooks和class组件有什么不同

首先class 通过继承reactClass实例

拥有生命周期

class 通过继承拥this，可以根据this做各种事情

class需要经过一系列的new 才可以render 元素而hooks不需要

7 为什么hooks不能在循环和if里用

由于hooks 使用链表存储数据，每个hooks 定义时都有自己的顺序编号，updata时通过遍历定义好的链表的hooks，一一更新，如果在循环或if语句里这个hooks的顺序就会变得不可控，导致取值或更新出错
图例

8 虚拟DOM到底是什么

虚拟dom其实就是一个JS对象，他是通过印射文档的节点，生成的一个虚拟对象，这个对象并不操作页面，也不进行render，他做的就是和真实dom通过diff对比差异，然后取出差异去更新页面，怎么更新页面？待了解，有些情况下。并不需要这个虚拟dom，比方一些少交互单页面，或者一些纯展示的官网，因为要引入react 打包体积会变大，也不需要去生成虚拟dom，性能反而变差

9 React diff 算法的原理

首先为什么需要这个算法：react和vue都是使用了虚拟dom方式，如果每次虚拟dom更新就全量render页面性能会变得很差，所以引进diff，state更新 react会缓存上一次的虚拟，然后把虚拟dom更新成state变化之后的，两者对比取才更新差异部分

diff 三策略

之前面试有面到记录下
策略一：忽略节点跨层级操作场景，提升比对效率。（基于树进行对比）意思就是只对比同层次的父节点，如果他消失了，就直接把这个父节点以及子节点删完
策略二：如果组件的 class 一致，则默认为相似的树结构，否则默认为不同的树结构。（基于组件进行对比）含义：对比两个组件的类型，如果是统一类型就继续比对，否则就直接更新组件。类型啥类型？？？函数和类？待了解
策略三：同一层级的子节点，可以通过标记 key 的方式进行列表对比。（基于节点进行对比）

10 react的状态提升是什么

浏览器类

多页面通讯的方式

一，websockets 通过服务端去保持通信

二，postMessage 页面通过channl

三，通过从写 localstorage 的setItem 事件去监听

服务端渲染与服务端渲染的区别

2 URL 的组成

graph TD
http/https --> 协议
www.baidu --> 域名
80/默认隐藏 --> 端口
/apps/home --> 虚拟目录
#号开始到最后的 --> 锚点部分
?id=123 --> 参数部分

性能优化

code优化

1：UglifyJsPlugin等压缩
2：import()或者react.lazy()
3：code-tree-shaking

页面优化

懒加载和预加载

懒加载：下拉加载，降首屏时间,降压力
预加载：未显加载，提升交互体验，提压力

节流和防抖

防抖防抖是在一段时间一个事件只执行一次，如果多次触发只执行最后一次
节流节流是一段时间一个事件只执行一次，执行的是这端第一个触发防抖的事件，如果有其他事件进入会被阻止并reture掉，他和防抖不同是，防抖一直触发会一直更新，只会走最后一个，而节流是只要超过设定的时间，他的下次事件就会进入流程

前端怎么进行seo优化

1 合理的title，keywords合理的关键词
2 重要的内容不用js输出，服务端渲染
3 语义化的html
4 重要的内容放在html头部
5 优化加载速度
6 图片加alt
7 少用iframe

前端的spa网页怎么seo优化

1 pre-Render 在打包时就把首屏渲染完毕，然后客户端请求index。html就是一个渲染好的页面。插件：prerender-spa-plugin

1000个div加入dom怎么优化

1 fragment
2

JS类面试题记录