前端杂谈

1. SPA优缺点？

• 缺点：
  不利于SEO ----> 服务端渲染 SSR
  首屏渲染时间长 ----> 预渲染
• 优点：
  减轻服务器端压力；
  无刷新切换内容，用户体验高；
  后端接口数据可复用

2. 浏览器缓存？

image.png

3. 如何在数据库中存储密码更安全？

image.png

4. React的HOC和render props

• HOC：高阶组件 ，（静态组合方式）在组件外部执行，感知不到组件的生命周期。可能导致JSX嵌套地狱、props属性命名冲突和被篡改问题
• render props：（动态组合方式）更加高效和简洁的代码复用方式。但可能导致callback嵌套地狱问题，以及与react purecomponent产生冲突引发性能问题

5. 如何设计秒杀服务的限流策略？

image.png

6. 为什么React要声明key?

原则：稳定和唯一

• key属性是在启发算法中被用来唯一标识组件，能够提升React的渲染性能并避免组件的状态丢失
• 启发算法对React组件作了假设和预判，将React的算法复杂度由O(n^3)降到 O(n)
• 假设 -> 若组件或者DOM的类型不同，将会渲染出完全不同的数；预判 -> 任意一个父组件每一次渲染，相同key属性值的子组件应该是稳定的
  不建议使用数组下标作为key，除非以下场景：
  【数据和组件都是静态的，首次渲染后不会再变化】
  【列表不会重排或筛选】

7. 如何实现前端Router？

依赖三个特性：

• 在修改url时，浏览器不正真发起请求重新加载页面
• 浏览器中需要保存历史记录，可以前进后退
• 有相应的事件来监听url的变化

我们所了解的hash和history API都具备这三个特性，但是：

• hash：有#，看上去比较丑；刷新浏览器后端收到的都是同一个地址，跳转到同一个页面
• history：刷新浏览器，后端接收到不同的路径，需要服务端配合将路径重定向到同一个html资源