网易有道日常，前端一面（1h）

网易有道一面（1h）

1、自我介绍

2、移动端，页面上用手机号，邮件格式的文字，会被手机标识为超链接，如何解决

当该 HTML 页面在手机上浏览时，该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。

比如：

在 iPhone 上默认值是：

<meta name="format-detection" content="telephone=yes"/>

如果你不希望手机自动将网页中的电话号码显示为拨号的超链接，那么可以这样写：

<meta name="format-detection" content="telephone=no"/>
viewport 控制手机全屏
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

3、了解微前端的概念吗

前言

在软件开发中，逐渐出现了类，模块化，组件化，设计模式等来解耦和拆分我们的代码，使得代码更易读，易维护。而微前端架构其实也是一种新的思想来帮助我们更好的拆分一些现在方式无法解决的问题而已。

什么是微前端

微服务的架构思想在前端的映射和落地
针对复杂且大型的web前端的整体架构和组织结构问题，将单体的前端拆分成更小，更简单的模块，使其可以独立开发，测试和部署，最后将其整合到一起。

4、垂直居中的几种方式

5、flex布局，space-around，space-between的区别

space-around 空白分布到元素两侧

space-between 空白均价分布到元素间

6、说下JS中事件循环（eventLoop）的了解

7、箭头函数和普通函数的区别，还有适用场景

8、箭头函数可以用call，apply，bind函数改变this吗

9、js动画跟css动画的优缺点

10、前端性能优化手段

11、写Vue代码时做了什么优化（代码层面的优化）

12、组件化开发，组件按功能拆分好，还是按业务拆分好

13、说一下Vue3对于Vue2哪些方面做了优化

Fragment标签，Teleport标签，Suspense标签

数据响应式的优化

用TS重新构建了Vue3，代码体积减少，拆包，代码管理方式变更

编译优化，新增了一个静态节点标记，静态节点，页面更新时不会处理，提升渲染速度

14、Vue3新增了一个静态节点标记的概念，了解过吗

15、Vue3.2新增了什么内容（有什么优化）

16、reactHook，为什么必须按顺序、不能在条件语句中调用，Vue3的hook可以这样写

吗

react的数据结构是链表的结构，如果在条件判断语句中，不能确定其hook的状态，会导致next指针丢失，不能准确的指向一个确定的hook，容易导致页面出错，所以react在源码上就规定不允许这样使用

不要在循环，条件或嵌套函数中调用 Hook，确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。

17、react，fiber架构了解过吗，如何实现空闲时运行，忙碌时暂停

18、链表数据结构了解过吗，说说它的特点

19、实现一个二分查找算法

20、如何适配移动端的设备

21、项目中遇到的问题如何解决的

22、window上scroll属性上有个实现动画滚动效果知道吗

scroll() 与 scrollTo 方法是用于在给定的元素中滚动到某个特定坐标的 Element 接口。

语法如下：

scroll/scrollTo(x, y)
- x：元素要移动的位置横坐标。
- y：元素要移动的位置纵坐标。
scroll/scrollTo(options)
options支持属性有left，top以及behavior

top：元素要移动的位置横坐标。
left：元素要移动的位置纵坐标。
behavior：元素的运动模式，如果是auto，则没有动画效果，如果是smooth，则是平滑滚动。

let scrollOptions;

const form = document.querySelector("form");
const leftInput = document.getElementById("left");
const topInput = document.getElementById("top");
const scrollInput = document.getElementById("scroll");

form.addEventListener("submit", e => {
  e.preventDefault();
  scrollOptions = {
    left: leftInput.value,
    top: topInput.value,
    behavior: scrollInput.checked ? "smooth" : "auto"
  };

  window.scrollTo(scrollOptions);
});