2021面试准备2

最新推荐文章于 2022-01-22 12:04:40 发布

是梦梦啊

最新推荐文章于 2022-01-22 12:04:40 发布

阅读量144

点赞数

分类专栏：前端学习记录文章标签： javascript vue.js reactjs

本文链接：https://blog.csdn.net/TanMengyi/article/details/116483351

版权

前端同时被 2 个专栏收录

66 篇文章 1 订阅

订阅专栏

学习记录

37 篇文章 0 订阅

订阅专栏

1、async、await和promise

2、map和set

3、骨架屏

目前大部分项目都是使用Vue、React、Angular框架开发，而这三个框架都是JS触发UI渲染，在JS代码下载解析完成之前，页面不会展示任何内容，这就产生了大家熟知的白屏问题。解决优化白屏问题成为前端必须要关注的问题，以下有几种常规的解决方案：

Loading + 客户端渲染（CSR）
骨架屏（Skeleton）+ 客户端渲染（CSR）
预渲染（PreRender）
服务端渲染（SSR）

目前这几种方案里，SSR效果最好，但是实现成本与维护成本太高，需要搭建SSR架构并且要解决好三高问题（高并发、高性能、高可用），在服务端与运维方面要投入更多成本；预渲染使用场景有限，一般使用在一些静态页面上；Loading实现成本低，易于控制，是采用最广泛的，但是Loading传递给用户的信息过少，在网络延迟的情况下体验很差；骨架屏可以提供给用户结构化的视觉，预先获取用户的关注点，并且可以自然的过渡到真实页面，因此骨架屏便成为了一种折中的方案。

现有骨架屏实现方案：
1、手写骨架屏并与业务耦合
2、手写骨架屏并预渲染到HTML中、手写骨架屏并通过webpack插件将骨架屏代码注入到HTML中
3、自动生成骨架屏
自动生成骨架屏通过在node环境下使用puppeteer打开页面，分析页面结构并深度遍历页面DOM，通过一定的规则来生成对应的骨架屏代码，并通过webpack插件将骨架屏代码注入到HTML中

饿了么开源的插件 page-skeleton-webpack-plugin
还有个插件 vue-skeleton-webpack-plugin，它将插入骨架屏的方式由手动改为自动，原理在构建时使用 Vue 预渲染功能，将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点中，将样式内联到 head 标签中。这个插件可以给单页面的不同路由设置不同的骨架屏，也可以给多页面设置，同时为了开发时调试方便，会将骨架屏作为路由写入router中，可谓是相当体贴了。

4、防抖和节流

在工作中，我们可能碰到这样的问题：
用户在搜索的时候，在不停敲字，如果每敲一个字我们就要调一次接口，接口调用太频繁，给卡住了。
用户在阅读文章的时候，我们需要监听用户滚动到了哪个标题，但是每滚动一下就监听，那样会太过频繁从而占内存，如果再加上其他的业务代码，就卡住了。

防抖：就是指触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
防抖函数分为非立即执行版和立即执行版。

在触发点击事件后，如果用户再次点击了，我们会清空之前的定时器，重新生成一个定时器。意思就是：这件事儿需要等待，如果你反复催促，我就重新计时！

场景：
有个输入框，输入之后会调用接口，获取联想词。但是，因为频繁调用接口不太好，所以我们在代码中使用防抖功能，只有在用户输入完毕的一段时间后，才会调用接口，出现联想词。

节流：指定时间间隔内只会执行一次任务。
应用：懒加载要监听计算滚动条的位置，使用节流按一定时间的频率获取。
用户点击提交按钮，假设我们知道接口大致的返回时间的情况下，我们使用节流，只允许一定时间内点击一次。

自己的理解：防抖就是会有一个定时器，每次点击都会先清空，再重新计时，如果点击的时间间隔大于设定的时间间隔，事件才会触发；节流不受点击的影响，在指定时间内只执行一次。

这样，在某些特定的工作场景，我们就可以使用防抖与节流来减少不必要的损耗。

“为什么说上面的场景不节制会造成过多损耗呢？”

OK，这就涉及到浏览器渲染页面的机制了……

5、重绘和回流

重绘：元素颜色，背景色的改变
回流又叫重排：元素大小、尺寸、宽高的改变
回流必定触发重绘，重绘不一定会触发回流。重绘开销相对于回流更小，回流更大。