阿里高德暑期实习前端二面

#我的实习求职记录#
4.13
1、自我介绍
2、了解前端那些前沿技术
3、未来前端可以做那些东西
4、看过什么源码

5、除了uniapp还有那些跨平台开发框架

除了UniApp之外，还有一些其他流行的跨平台开发框架，其中包括但不限于：

1. React Native：由Facebook开发的开源框架，使用React语法，可以使用JavaScript和React构建原生应用。React Native允许开发者使用相同的代码库构建iOS和Android应用，并且提供了大量的第三方组件和库。

2. Flutter：由Google开发的开源框架，使用Dart语言，可以构建高性能、美观的原生应用。Flutter具有热重载、丰富的UI组件和自定义渲染引擎等特点，可以快速构建跨平台应用。

3. Ionic：使用Web技术（HTML、CSS、JavaScript）构建混合移动应用的开源框架。Ionic提供了大量的UI组件和工具，可以帮助开发者快速构建跨平台应用，并且支持多个平台，包括iOS、Android、Web等。

4. Xamarin：由Microsoft推出的开源框架，使用C#语言，可以构建原生iOS、Android和Windows应用。Xamarin使用.NET平台和Mono运行时，在性能和功能方面与原生应用相当。

5. Weex：由阿里巴巴开发的开源框架，使用Vue.js语法，可以构建高性能、原生体验的跨平台应用。Weex支持iOS、Android和Web等多个平台，具有热重载、组件化开发等特点。

这些跨平台开发框架各有特点，选择适合自己项目需求的框架可以帮助开发者快速、高效地构建跨平台应用。

6、了解webpack的原理吗。。。

Webpack是一个现代的静态模块打包工具，它主要用于将多个模块打包成一个或多个静态资源文件，通常用于构建前端项目。Webpack的原理可以简单概括为以下几个步骤：

1. 入口起点分析：

   • Webpack首先会从指定的入口文件开始分析项目的依赖关系，找到所有的模块依赖关系。

2. 模块解析：

   • 在分析依赖关系时，Webpack会根据配置文件中的规则解析模块路径，包括相对路径、绝对路径、模块路径等。

3. 依赖图构建：

   • 根据入口起点和模块解析结果构建依赖图，确定模块之间的依赖关系。

4. 模块转换：

   • Webpack会对每个模块进行转换处理，根据配置文件中指定的loader对模块进行加载、解析、转换、编译等操作。例如，将ES6/ES7代码转换成ES5代码，将SCSS文件转换成CSS文件等。

5. 代码分割：

   • 根据配置文件中的规则，Webpack可以将代码拆分成多个块（chunk），以实现按需加载、提高页面性能的目的。

6. 静态资源处理：

   • 处理项目中的静态资源文件，如图片、字体等，可以通过url-loader、file-loader等loader进行处理，并且可以根据配置文件中的规则进行优化和压缩。

7. 输出结果：

   • 根据处理后的模块和资源，Webpack会生成一个或多个静态资源文件，并将其输出到指定的目录。

8. 模块热替换（Hot Module Replacement，HMR）：

   • 在开发模式下，Webpack支持模块热替换功能，可以在应用运行时替换、添加或删除模块，而无需刷新整个页面，提高开发效率。

总的来说，Webpack的原理就是根据配置文件和入口起点分析项目的依赖关系，通过loader和插件对模块进行处理和优化，最终输出打包后的静态资源文件。Webpack具有丰富的功能和灵活的配置选项，可以满足各种项目的需求，并且在现代前端开发中得到广泛应用。

7、了解一个需求从落地整个研发过程中的一些技术原理吗 当了解一个需求并将其落地到研发过程中时，需要考虑一系列技术原理和步骤。下面是一个简单的研发流程，以及涉及的一些技术原理：

1. 需求分析：

   • 确定需求的功能和业务逻辑。
   • 分析需求的技术难点和可行性。
   • 制定实施计划和时间表。

2. 技术选型：

   • 根据需求特点和团队技术栈选择合适的开发框架、库和工具。
   • 考虑到性能、可维护性、安全性等因素进行技术选型。

3. 架构设计：

   • 设计系统的整体架构，包括前端、后端和数据库等。
   • 划分模块和组件，定义各个模块之间的交互和通信方式。

4. 开发实现：

   • 前端开发：根据UI设计稿实现页面和交互功能，使用HTML、CSS和JavaScript等技术。
   • 后端开发：实现业务逻辑和数据处理，搭建API接口，使用Java、Python、Node.js等后端语言和框架。
   • 数据库设计和开发：设计数据库表结构，实现数据存储和查询功能，使用MySQL、MongoDB等数据库。

5. 测试和调试：

   • 编写单元测试、集成测试和端到端测试，确保代码质量和功能正确性。
   • 进行功能测试、性能测试和安全测试，发现和修复问题。

6. 部署上线：

   • 将代码部署到测试环境进行测试，确保系统稳定性和可用性。
   • 完成测试后，将代码部署到生产环境并上线。
   • 监控系统运行情况，及时处理线上问题和反馈。

在整个研发过程中，还涉及到版本控制、代码 review、文档编写、团队协作等技术和工程实践。同时，需要不断学习和掌握新的技术和工具，以保持竞争力并提高工作效率。

8、有没有什么解决问题的难点
9、怎么学习前端的
10、为什么选择前端
反问：
有什么建议：不要以为你在学校那些什么技术负责人或者经验有什么特别的，在企业里面都没什么，
建议你不要太飘了，要虚心学习，
我的人生是迷茫的

作者：放学路上
链接：www.nowcoder.com/feed/main/d…
来源：牛客网

阿里灵犀互娱前端一面凉经

刚开始学前端基础不好 又是第一次面试 好在面试官人很好很温柔
上来先是自我介绍
然后让我介绍项目
项目中遇到那些困难 怎么解决的
为什么选择前端
为什么选择vue而不是React 对React了解多少

vue虚拟DOM

Vue.js使用虚拟DOM（Virtual DOM）来提高渲染性能和优化更新机制。虚拟DOM是一个轻量级的JavaScript对象树，它对应着真实DOM的结构，但是不会直接操作浏览器中的DOM节点，而是通过对比虚拟DOM的变化，最终只对实际变化的部分进行更新，从而减少了浏览器的重绘和回流，提高了性能。

Vue.js中虚拟DOM的工作原理可以概括为以下几个步骤：

1. 初始化阶段：

   • 当Vue组件首次渲染时，会根据组件的模板（template）生成虚拟DOM树。
   • 每个虚拟DOM节点都是一个JavaScript对象，包含节点的标签名、属性、子节点等信息。

2. 更新阶段：

   • 当Vue组件的数据发生变化时，Vue会重新计算虚拟DOM树。
   • Vue使用了一种称为“响应式”的机制，当数据发生变化时，Vue能够自动检测到变化并触发重新渲染。

3. 虚拟DOM Diff算法：

   • 在重新计算虚拟DOM树后，Vue会通过Diff算法比较新旧虚拟DOM树的差异。
   • Diff算法的目标是尽可能高效地找出两棵虚拟DOM树之间的最小变化集合，从而最小化实际DOM操作的次数。

4. 更新实际DOM：

   • 根据Diff算法的结果，Vue会将变化的部分应用到实际DOM树上。
   • 这些变化可能包括节点的创建、删除、更新等操作，但由于Diff算法的优化，实际DOM操作的次数通常是最小化的。

使用虚拟DOM可以提高Vue组件的渲染性能，尤其是在大型应用中，数据变化频繁时，虚拟DOM能够帮助减少不必要的DOM操作，提升用户体验。同时，虚拟DOM的使用也使得Vue具有了更灵活的更新机制，开发者可以更方便地管理组件的状态和数据，编写更优雅、高效的代码。

js定时器setTimeout和setInterval的区别

setTimeout和setInterval都是JavaScript中用于定时执行代码的函数，它们之间有一些区别：

1. setTimeout：

   • setTimeout用于在指定的时间后执行一次代码。
   • 它接收两个参数：要执行的代码和延迟的毫秒数。
   • 例如，setTimeout(func, 1000)会在1秒后执行func函数。

2. setInterval：

   • setInterval用于每隔一定时间重复执行一次代码。
   • 它接收两个参数：要执行的代码和重复执行的间隔时间（毫秒数）。
   • 例如，setInterval(func, 1000)会每隔1秒执行一次func函数。

主要区别在于执行方式和效果：

• setTimeout执行一次代码后会停止，需要重新调用setTimeout才能再次执行，因此适用于只需要执行一次的场景。
• setInterval会根据指定的间隔时间反复执行代码，直到页面被关闭或者使用clearInterval停止执行。适用于需要重复执行的场景，如定时刷新数据、轮播图等。

需要注意的是，使用setInterval时要注意间隔时间是否合适，避免因为执行时间过长导致函数堆积而影响页面性能。通常建议在使用setInterval时在代码执行完毕后再次设置下一个定时器，而不是在定时器中执行可能耗时较长的操作。

flex布局有什么用

Flex布局（Flexbox）是一种用于在容器中进行布局的新型布局模式，它使得在容器中的子元素能够按照灵活的方式进行布局，特别适用于创建响应式和自适应的页面布局。Flex布局有以下几个主要的用途和优点：

1. 灵活的布局方式：

   • Flex布局提供了一种灵活的布局方式，可以通过设置容器和子元素的属性来控制布局的方向、对齐方式、排列顺序等，使得页面布局更加灵活多样化。

2. 响应式设计：

   • Flex布局可以很好地适应不同尺寸和分辨率的设备，使得页面可以在不同的屏幕尺寸上都能够呈现良好的布局效果，从而实现响应式设计。

3. 自适应性：

   • Flex布局可以根据容器的大小和内容自动调整子元素的大小和位置，使得页面布局更加自适应和灵活，不再需要手动设置固定的宽度和高度。

4. 简化布局代码：

   • 相比传统的布局方式（如浮动和定位），Flex布局使用简单、直观，可以大大简化布局代码，减少了对浮动和定位等复杂属性的依赖。

5. 更好的对齐和分布控制：

   • Flex布局提供了更加灵活的对齐和分布控制方式，可以轻松实现水平居中、垂直居中、等高布局、自适应宽度等效果，提高了页面布局的灵活性和美观度。

总的来说，Flex布局是一种强大而灵活的布局方式，能够帮助开发者更加轻松地实现复杂的页面布局效果，提高了页面的响应性、自适应性和可维护性。

Promise了解多少

用户浏览器打开网页的生命周期

用户在浏览器中打开网页的生命周期可以概括为以下几个主要阶段：

1. 输入URL或点击链接：

   • 用户在浏览器地址栏中输入URL或点击链接，触发浏览器发送请求给服务器。

2. 发送HTTP请求：

   • 浏览器向服务器发送HTTP请求，请求页面的HTML、CSS、JavaScript等资源。

3. 接收和解析HTML：

   • 服务器接收到请求后，返回HTML文档给浏览器。
   • 浏览器开始解析HTML文档，构建DOM树（Document Object Model）。

4. 加载和渲染CSS和JavaScript：

   • 浏览器解析HTML时，遇到<link>标签和<script>标签，会发出新的HTTP请求，加载并解析对应的CSS和JavaScript文件。
   • CSS文件加载完成后，浏览器开始渲染页面的外观样式。
   • JavaScript文件加载完成后，浏览器执行JavaScript代码，可能会对页面进行修改、动态加载其他资源等操作。

5. 构建渲染树：

   • 浏览器根据DOM树和CSSOM树（CSS Object Model）构建渲染树（Render Tree），用于确定页面中每个节点的渲染方式和位置。

6. 布局和绘制：

   • 浏览器根据渲染树计算每个节点的布局（Layout）和位置，确定页面中每个元素的大小和位置。
   • 浏览器根据布局信息对页面进行绘制（Painting），将页面渲染到屏幕上。

7. 加载和渲染其他资源：

   • 浏览器可能还会加载其他类型的资源，如图片、字体等。
   • 这些资源加载完成后，会被添加到渲染树中，并对页面的外观和布局产生影响。

8. 交互和事件处理：

   • 页面加载完成后，用户可以与页面进行交互，如点击链接、输入表单等操作。
   • 浏览器会监听用户的操作，触发相应的事件，并执行相应的JavaScript代码。

9. 页面卸载：

   • 当用户关闭页面或者跳转到其他页面时，浏览器会执行页面卸载操作，释放页面占用的资源，并触发unload事件。

以上是用户在浏览器中打开网页的主要生命周期过程，不同阶段涉及到不同的操作和技术原理，需要开发者根据具体情况进行优化和调整。

Node.js了解多少
实习过程中的收获
工作成果是怎么交付的
职业生涯有什么期待
谈谈对前端未来方向的理解
三次握手

作者：Nico_qwq
链接：www.nowcoder.com/feed/main/d…
来源：牛客网