最近面试发现有一些面试题出现频率挺高的,所以把这些题记录下来做一个复习和总结

SPA页面的缺点

1、首屏加载慢
2、不利于SEO

同构:既能ssr(server side rendering,服务端渲染)也能csr(client side rendering)

shoucomponetUpdate 只要state 或prop有改变就刷新
shoucomponetUpdate接受两个参数:nextProps和nextState,分别表示下一个props和下一个state的值

pureComponent是浅比较,只比较内存地址是否有改变才刷新

css in js 方案
styled-component,
styled-jsx

useEffect相当于componentDidMount、componentDidUpdate生命周期

CSS实现正方形

vw是根据屏幕宽度设置

<div class="square">hello,viewport</div>
<style>
.square {
        width: 50%;
        height: 50vw;
        background: #ccc;
  }
 </style>

设置垂直方向的padding撑开容器(padding可以用百分比,百分比是根据它包含块的width来确定的,也就是父级元素的width)
在这里需要注意一下,如果不写hegith的话,正方形内文字会溢出,溢出的高度正好就是文字所占空间的高度。


CSS三角形

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: orange blue red green;
}

react中的setState是同步还是异步

setState 只在合成事件和钩子函数中是“异步”的,在原生事件和 setTimeout 中都是同步的。

合成事件:就是react 在组件中的onClick等都是属于它自定义的合成事件

原生事件:比如通过addeventListener添加的,dom中的原生事

react合成事件

如果DOM上绑定了过多的事件处理函数,整个页面响应以及内存占用可能都会受到影响。React为了避免这类DOM事件滥用,同时屏蔽底层不同浏览器之间的事件系统差异,实现了一个中间层——SyntheticEvent。

当用户在为onClick添加函数时,React并没有将Click时间绑定在DOM上面。
而是在document处监听所有支持的事件,当事件发生并冒泡至document处时,React将事件内容封装交给中间层SyntheticEvent(负责所有事件合成)
所以当事件触发的时候,对使用统一的分发函数dispatchEvent将指定函数执行。

红任务和微任务

宏任务先于微任务执行。
宏任务包括整体代码script,setTimeout,setInterval;
微任务有Promise,process.nextTick

定义css变量

:root{
    --color-text:#666;
    --color-height-text:#ff5777;
    --color-tint:#ff8198;
    --color-background:#fff;
    --font-size:14px;
    --line-height:1.5;
    --large-size:1.5;
}  

react和vue的优缺点

reacrt:
1、单向数据流 2、 虚拟DOM帮助解决了跨浏览器问题,并为我们提供了标准化的API 3、代码一切皆是组件,更加模块化,重用代码更容易,可维护性高 4、使用虚拟DOM的概念,性能好,速度快。

缺点:
React用于构建用户界面的 JavaScript 库
React本身只是一个V而已,并不是一个完整的框架,所以如果是大型项目想要一套完整的框架的话,基本都需要加上ReactRouter和Redux才能写大型应用
JSX语言:允许js和html的混写

vue-router 钩子

全局导航钩子
beforeEach
路由独享的钩子
beforeEnter
组件内钩子

  beforeRouteEnter(to, from, next) {
        // do someting
        // 在渲染该组件的对应路由被 confirm 前调用
    },
    beforeRouteUpdate(to, from, next) {
        // do someting
        // 在当前路由改变,但是依然渲染该组件是调用
    },
    beforeRouteLeave(to, from ,next) {
        // do someting
        // 导航离开该组件的对应路由时被调用
    }

vue组件name的作用

1、当项目使用keep-alive时,可搭配组件name进行缓存过滤


2、vue-devtools调试工具里显示的组见名称是由vue中组件name决定的

前端路由实现

hash实现
hash 使用锚点(#) 改变url 不会引起刷新

监听hashchange事件,判断location.hash 进行对应视图的改变

history实现
history提供了 pushState 和 replaceState这两个方法,改变url不会引起页面刷新

监听popState事件,并且判断location.pathname 进行对应视图的改变

注意: 使用history实现时,需要取消a标签的默认跳转行为,另外该方式不支持file协议

GET和POST的区别?

两者之间最重大的区别就是:
GET产生一个TCP数据包;POST产生两个TCP数据包。

具体点说来就是:

对于GET方式的请求,浏览器会把http header和data一并发送出去,服务器响应200(返回数据);
而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200
ok(返回数据)。

sessionStorage与localStorage的区别
https://www.jianshu.com/p/3983af7c380a

浏览器渲染原理和过程
https://www.jianshu.com/p/e6252dc9be32

事件循环机制:
https://www.cnblogs.com/yugege/p/9598265.html

Promise.all()异常处理

切入点 1:
由于Promise.all(request).then(…).catch(…) 会在所有request都resolve时才会进then方法,并且把所
有结果以一个数组返回,只要有一个失败,就会进catch。而如果在单个请求中定义了catch方法,那么就
不会进Promise.all的catch方法。因此,可以在单个的catch中对失败的promise请求做处理,可以使
成功的请求正常返回

切入点 1:
出现错误请求之后不进行reject操作,而是继续resolve('error), 之后同意交给promise.all()进行处理

Promise 优缺点

有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。

Promise 也有一些缺点。首先,无法取消 Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。第三,当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

解决了什么问题:1、解决了层层嵌套,代码地狱回调 2、代码可读性更强

作用域,是指变量的生命周期(一个变量在哪些范围内保持一定值)

promise和await/async

https://segmentfault.com/a/1190000016788484

async fnc()=>{
return 'result'
}
//fnc 相当于返回Promise.resolve('result')

受控组件和非受控组件

https://juejin.im/post/6844903629493633038

CSS优先级

内联 > ID选择器 > 类选择器 > 标签选择器

无跨越session,cookie
跨域token

let {data:res} = result
解构重命名data为res

格式化执行的文件.prettierrc

本地分支(dev)推送到远程
git push -u origin (远程分支名)