前端基础知识5

如果页面出现白屏应该做哪些优化，从哪里发现问题？

1、css文件加载需要一些时间，在加载的过程中页面是空白的。 解决：可以考虑将css代码前置和内联。

2、首屏无实际的数据内容，等待异步加载数据再渲染页面导致白屏。 解决：在首屏直接同步渲染html，后续的滚屏等再采用异步请求数据和渲染html。

3、首屏内联js的执行会阻塞页面的渲染。 解决：尽量不在首屏html代码中放置内联脚本。

页面出现长时间的白屏要怎样排查问题？_发呆的薇薇°的博客-CSDN博客_页面白屏时间长

如果你正在使用系统时，突然权限发生了变更，是强制退出重新登录还是怎么解决？ 

• 登录：当用户填写完账号和密码后调用后端的登录接口进行验证，验证通过，服务端会返回一个token，拿到token之后（将这个token存贮到cookie中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个获得用户信息的接口来获取用户的详细信息（如用户权限，用户名等等）。
• 权限验证：通过token获取用户对应的 role，动态根据用户的 role 算出其对应有权限的路由，通过 router.addRoutes 动态挂载这些路由。

登录成功后，服务端会返回一个token，之后将token存储在本地cookie中，这样下次打开页面或者刷新页面的时候能记住用户的登录状态，不用再去登录页面重新登录了。

注意：后台所有token有效期都是Session，就是当浏览器关闭了就丢失了。重新打开浏览器都需要重新登录验证，后端也会固定一个时间点重新刷新token，让后台用户全部重新登录一次，确保后台用户不会因为电脑遗失或者其它原因被人随意使用账号。

后台切换用户后前端会报路由重复的错误，所以我们要在注销登录时把原本的路由信息清空。比较容易想到的是通过刷新页面清空路由，但是这样页面就会有明显的卡顿或空白，所以我们尝试利用别的方法清空路由。

常见的方法是：

新建一个路由，包含不需动态加载的默认路由信息
设置当前路由的 matcher 为新路由的 matcher
网上关于替换 matcher 的解释如下：

替换当前路由实例的 matcher 之所以能实现删除动态添加的路由，是因为替换当前路由的 matcher 本质 上是 替换了现有的路由实例的路由映射容器。新的 matcher 始终 仅仅 包含路由实例化时的路由，而 不会包含 后期被 addRoutes 方法添加的路由，那么替换当前路由的 matcher 就可实现删除通过 addRoutes 添加的路由。
原文链接：https://blog.csdn.net/Neuf_Soleil/article/details/103603726

浏览器的缓存机制 

浏览器缓存分为强缓存和协商缓存，当存在缓存时，客户端第一次向服务器请求数据时，客户端会缓存到内存或者硬盘 当中，当第二次获取相同的资源，强缓存和协商缓存的应对方式有所不同。

强缓存：当客户端第二次向服务器请求相同的资源时，不会向服务器发送请求，而是直接从内存/硬盘中间读取。缓存 由服务器的响应头里 cache-control 和 expires 两个字段决定。

协商缓存：当客户端第二次向服务器请求相同的资源时，先向服务器发送请求"询问"该请求的文件缓存在ben'd与服 务器相比是否更改，如果更改，则更新文件，如果没有就从内存/硬盘中读取。协商缓存由 last-modified 和 etag两个字段决定。 

移动端如何适配 

 方法1：媒体查询

 方法2：百分比

 方法3：flex弹性布局

 方法4：viewport适配

 方法5：rem+less(sass)