1688面试题汇总

1. 你对跨域问题的理解

答案：

跨域问题是指在Web开发中，浏览器的安全策略（即同源策略）限制了一个源（origin，通常由协议、域名、端口三部分组成）的文档或脚本与另一个源的资源进行交互。当一个网页尝试通过JavaScript发起请求访问另一个源（如不同域名、不同端口或不同协议）的资源时，浏览器会根据同源策略对这种跨域操作进行限制，以防止恶意网站窃取其他网站的数据。解决办法：

（1）、CORS（Cross-Origin Resource Sharing，跨源资源共享）

就是指后端设置响应头允许跨域。

（2）JSONP

JSONP是一种利用<script>标签不受同源策略限制的特点实现跨域数据获取的方式。原理是服务端返回一段JavaScript代码，其中包含调用的回调函数以及要传递的数据。客户端预先定义好这个回调函数，当<script>标签加载并执行这段返回的代码时，就会调用回调函数处理数据。JSONP只适用于GET请求，且存在安全性较低（无法使用HTTPS）、错误处理困难等缺点。

1. 、客户端设置代理

就是本地设置代理（vue/webpack的proxy等）

2、vue双向数据绑定

Vue.js 的双向数据绑定是其核心特性之一，它使得界面元素（视图）和应用程序数据（模型）之间能够自动保持同步。用户在界面上的操作（如填写表单、选择选项等）会立即反映到数据模型中，而数据模型的变更又会实时更新到界面上。这种自动化同步极大地简化了开发流程，提升了开发效率，并确保了数据状态的一致性。Vue实现双向数据绑定的主要机制是通过vue响应式机制（数据变化反馈到界面）+表单元素监听事件（如input的监听文本框内容变化事件）获取数据反馈给响应式变量完成。

3、v-model指令实现原理

利用vue本身的响应式机制完成数据变化反映到表单元素里，再利用表单元素的监听事件（如input的监听文本框内容变化事件）获取数据结合自定义事件给响应式变量赋值。

参考资料：组件基础 — Vue.js (vuejs.org)

4、鸿蒙动画问题

鸿蒙动画有：属性动画、转场动画、组件动画。

注：这个面试官会让你结合项目中使用过的动画进行回答,也可引申出其他技术栈项目中的动画使用经验。

5、多端适配问题

这题面试官风乘是从前端（他大概率对鸿蒙不熟）的视角来问的，所以也可从前端或其他非鸿蒙技术栈的角度回答，如果对鸿蒙多端适配了解，能回答出鸿蒙独有的适配案例则更优。

6、鸿蒙lazyforeach的理解

LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。

7、鸿蒙卡片

根据自己的经验回答，这题出现次数不少。

8、项目中遇到的比较深刻的难点

根据自己的经验回答

9、获取activity下除了activity的所有子view数量

利用递归解决

10、定时器原理

事件循环（Event Loop）：JavaScript 是单线程的，它使用事件循环来处理异步任务。定时器的实现就是依赖于事件循环机制。

任务队列（Task Queue）：事件循环中有多个任务队列，其中之一就是定时器队列。当调用 setTimeout 或 setInterval 时，会将定时器的回调函数放入定时器队列中。

计时器线程：浏览器会有一个计时器线程，用于计算时间，当计时器到期后，会将对应的回调函数添加到任务队列中。

事件循环的执行：当主线程空闲时，事件循环会从任务队列中取出任务执行。如果任务队列中有定时器的回调函数，且到达了指定的时间间隔，那么就会执行对应的回调函数。

注：核心是任务队列及JS的事件循环机制

11、鸿蒙ui渲染过程

根据生命周期回答，每个生命周期干了什么事。

12、如何保证APP快速启动，对于启动瞬间的白屏如何处理

这个其实主要考虑启动的时候不要做非必要的高负荷工作，尽量在启动之后空闲的时候做

白屏问题一般可以通过配置启动屏主题背景或者设置默认背景的方式去处理

13、如何设计启动屏广告的业务逻辑

这个问题主要考虑的是广告数据什么时候去加载，且什么时候展示，展示的逻辑点在哪里

一般广告属于低优先级的业务逻辑，广告数据需要在应用启动后，在一个空闲的时间段去加载广告数据到数据库或缓存里面，

待应用启动时根据广告是否在有效期内且广告数据是否已经加载到了本地进行展示

14、性能优化需要从哪些方面着手处理

从CPU,内存，渲染方面考虑

15、鸿蒙瀑布流如何实现：WaterFlow实现

16、首页主模块依赖AB两个子模块，首页tab是在主模块，每个tab内容是在AB两个子模块，实现双击tab将对应tab内容滚动到顶部并且刷新对应模块，如何实现。

（各抒己见，注册回调监听，或者试用eventbus，注意监听类和eventbus定义的事件类要放到更底层的一个模块，首页-> A、B->base）

17、List懒加载的实现以及复用的原理

关键点lazyforeach的使用方式，原理，@Reusable注解的使用，cachecount的使用

18、线程池taskpool的使用方式，注意事项

taskpool的使用方式自己熟悉一下，注意事项是taskpool不能超过3分钟这个事情，其他的看下和worker的对比

19、web组件jsbridge交互

应用侧可以通过runJavaScript()方法调用前端页面的JavaScript相关函数。

开发者使用Web组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。

注册应用侧代码有两种方式，一种在Web组件初始化调用，使用javaScriptProxy()接口。另外一种在Web组件初始化完成后调用，使用registerJavaScriptProxy()接口。

20、页面渲染的流程，如何优化（鸿蒙题，含优化）

应用启动到UI页面展示过程包含框架初始化、页面加载和布局渲染三个步骤。

页面加载主要流程为执行页面文件，生产页面节点数，页面节点数挂在

布局渲染主要流程未布局，渲染，展示

可以考虑使用：

1）避免在自定义组件的生命周期内执行高耗时操作

2）按需注册组件属性

3）使用@builder函数代替自定义组件

来优化

21、H5与原生应用的交互，web性能如何优化

在鸿蒙应用端，可以基于webView封装JsBridge模块，实现鸿蒙应用与H5页面之间的双向通信。具体实现如下：

1)应用侧可以通过runJavaScript()方法调用前端的JavaScript函数。

2)前端页面调用原生应用侧函数：使用Web组件将应用侧代码注册到前端页面中，注册完成之后，

前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。

注册应用侧代码有两种方式，一种在Web组件初始化调用，使用javaScriptProxy()接口。

另外一种在Web组件初始化完成后调用，使用registerJavaScriptProxy()接口。

3) 建立应用侧与前端页面数据通道：前端页面和应用侧之间可以用createWebMessagePorts()接口创建消息端口来实现两端的通信。

应用侧在创建消息端口后，使用postMessage()接口把其中一个端口发送到前端页面，便可以在前端页面和应用之间互相发送消息。

可以考虑使用预加载和预解析的方式来优化性能：

预加载：

提前初始化webview：在应用启动时，提前创建一个隐藏的webview实例，并设置其缓存模式和其他配置。这样可以提前加载webview所需的资源，减少后续webview首次加载的时间。

提前加载指定URL：可以在应用启动或者其他时机，异步加载需要预加载的URL，但不显示WebView。这样可以使WebView在用户打开时更快地呈现已经加载好的内容。

缓存WebView内容：可以将WebView加载的内容进行缓存，下次打开WebView时，优先读取缓存内容，减少网络请求时间。

预解析：

用prepareForPageLoad接口，预解析dns，预链接socket优化加载速度

用prefetchPage接口提前下载页面所需的资源，包括主资源子资源，但不会执行网页javaScript代码或呈现网页

22、用户行为埋点的实现（安卓）

做的安卓项目中，安卓机顶盒的项目由于只有遥控器输入一个入口，采取的方案是手动代码埋点，在统一入口定义事件，捕捉事件，上报事件

移动端项目则是集成埋点的SDK

23、开屏广告的实现（安卓场景）

安卓机顶盒的项目中实现过开屏广告的功能，主要的方案是在应用心跳接口中获取并更新开屏广告的资源信息，并持久化保存到本地，

包含展示内容，跳转内容，有效期等多种信息，在开屏时直接加载本地保存的广告信息，避免网络加载延迟带来的坏体验

场景题

1.js 实现一个方法来检测该字符串是否合法，其规则为'()'、'{}'、'[]'必须互相匹配，可嵌套（如'{[]}'这种也是合法的）

function isValidBracketSequence(str) {

  const bracketPairs = {

    '(': ')',

    '{': '}',

    '[': ']'

  };

  const stack = []; // 用于存储未闭合的左括号

  for (let char of str) {

    if (bracketPairs[char]) { // 如果字符是左括号

      stack.push(char); // 将其压入栈中

    } else if (stack.length === 0 || bracketPairs[stack.pop()] !== char) { // 如果字符是右括号，且栈为空或与栈顶左括号不匹配

      return false; // 返回非法

    }

  }

  return stack.length === 0; // 如果遍历完字符串后栈为空，说明所有括号都已正确配对，返回合法

}

2.css 动画，animation，实现一个透明度切换

keyframes关键帧是CSS动画的核心，它们定义了动画过程中元素样式随时间变化的具体规则。关键帧通过@keyframes规则来声明，并给予一个唯一的名字以便后续引用。关键帧内部可以设置多个百分比标记点，每个标记点对应动画过程中的一个特定时刻，定义此时元素的样式。

3.例如，创建一个名为fade-in-out的动画，使元素在2秒内从完全透明渐变到完全不透明，再回到完全透明：

@keyframes fade-in-out {

  0%, 100% {

    opacity: 0;

  }

  50% {

    opacity: 1;

  }

}

4.数组实现栈

思路：主要实现栈的一些特性，如入栈（push）、出栈（pop）、查看栈顶元素（peek）、以及检查栈是否为空（isEmpty）

5.生成指定范围的随机整数
/**
* 说明：实现一个方法，根据指定的范围，生成随机整数
* 示例：
* randomRange(0, 10); // 4
* randomRange(10, 100); // 89
*/

function randomRange(min, max) {
return Math.floor(Math.random()*(max-min+1))+min

}

6.数组实现栈，并且求出栈内最大值，复杂度O(1)

注：自行百度吧

7.计算一个Activity页面中所有没有文本的组件和图像组件个数

注：自行百度吧

8.计算activity中的非容器类的view数量（笔试题）