携程前端实习二面
携程前端实习二面
-
微信小程序页面渲染过程
-
小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。
-
小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了 WebView 进行渲染；逻辑层采用 JsCore 线程运行 JS 脚本
-
-
微信小程序双线程渲染和浏览器有什么不同？
-
网页开发渲染线程和脚本线程是互斥的，也是为什么长时间的脚本运行可能会导致页面失去响应
-
小程序中，逻辑层和渲染层是分开的，双线程同时运行。渲染层的界面使用 WebView 进行渲染；逻辑层采用 JSCore 运行 JavaScript 代码
-
-
微信小程序的视图层和逻辑层如何交互？
-
使用 react 渲染页面的时候，如果某个子组件发生了错误，将会造成整个页面的白屏，如何处理react中的渲染异常？
- 使用componentDidCatch函数，条件化渲染视图
-
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } componentDidCatch(error, info) { this.setState({ hasError: true }); } render() { //渲染出错的降级处理 if (this.state.hasError) { return <h1>Something went wrong.</h1>; } return this.props.children; } }
-
-
nodejs为什么要引入process.nexttick？
-
提供高优先级任务的插队方式，在nodejs事件循环的每一个阶段结束后，都能立即执行process.nextTick所注册的回调
-
-
大量的数据渲染，比如刷短视频这样的场景，该怎么优化？
-
后端对数据进行分页处理，前端每次请求并渲染少量数据
-
维持整个数据列表的一个最大数据上限，类似于一个滑动窗口
-
当用户即将访问窗口底部的数据，请求后端服务加载新的数据并填充
-
当整个窗口的数据量达到我们指定的渲染上限时，移除窗口头部的部分数据
-
确保整个列表容器的总数据量不会太大
-
在渲染数据时，必须确保每一条数据有唯一的标识作为key值，以提升列表渲染性能
-
-
浏览器的垃圾回收机制
-
浏览器不能识别jsx文件，需要怎么办
-
配置@bebel/preset-react，用于处理JSX类型的文件，将其转换为JS文件
-
-
const、var、let的区别
-
移动端适配
-
浏览器的事件循环和nodejs的事件循环
-
==与===的区别
-
==比较前会对两端变量进行隐式数据类型转换
-
===不会对两变量进行数据类型转换，数据类型不同直接返回false
-
- 一道对象深度比对的题目
-
function isObject(obj) { return typeof obj === 'object' && null !== obj } function compare(obj1, obj2) { // 1.判断是不是引用类型，不是引用 if (!isObject(obj1) || !isObject(obj2)) { return obj1 === obj2 } // 2.比较是否为同一个内存地址 if (obj1 === obj2) return true // 3.比较 key 的数量 const obj1KeysLength = Object.keys(obj1).length const obj2KeysLength = Object.keys(obj2).length if (obj1KeysLength !== obj2KeysLength) return false // 4.比较 value 的值 for (let key in obj1) { const result = compare(obj1[key], obj2[key]) if (!result) return false } return true }
