面经-2022-秋招-腾讯wxg二面

[TOC]

1.你为什么选择做前端？

1. 个人兴趣和爱好：自己对设计、用户体验等方面有浓厚的兴趣。
2. 职业发展前景好：随着前端技术的不断发展和演变，前端开发的职业发展前景越来越广阔，未来可以从初级前端开发工程师成长为资深前端架构师或团队负责人等。

2.前端和其他方向相比，比如机器学习，有什么区别和特点

前端开发和机器学习是两个不同的领域。

区别：

1. 关注点不同：前端开发主要关注用户界面的构建和实现，以及与后端的通信和数据交互，而机器学习则关注利用算法让机器自动学习和优化。
2. 技术要求不同：前端开发需要掌握HTML、CSS、JavaScript等前端技术，以及响应式设计和跨平台开发等能力，而机器学习则需要掌握数学、统计学、算法和编程等技能。
3. 应用场景不同：前端开发主要应用于网页、移动应用等界面开发领域，而机器学习则广泛应用于语音识别、图像处理、自然语言处理等人工智能相关领域。

特点：

1. 前端开发具有交互性高、用户体验重要的特点，需要关注界面设计、交互设计和用户体验等方面，以提高用户满意度和忠诚度。
2. 机器学习具有数据驱动、自动化学习的特点，需要利用大量数据进行训练和学习，通过算法不断优化和改进模型，实现自动化的预测和决策。

3.怎么样才算前端做得比较好？

要达到前端领域的优秀水平，我觉得需要具备以下几个方面的能力和素质：

1. 技术熟练度：熟练掌握HTML、CSS、JavaScript等前端技术，能够高效地构建和实现用户界面，解决各种技术难题。同时，了解和熟悉前端框架、响应式设计、跨平台开发等方面的技术，能够快速响应和适应新的技术变化。
2. 设计能力：前端开发不仅仅是技术实现，还需要关注界面设计、交互设计和用户体验等方面。因此，具备良好的设计能力和审美观，能够将设计理念转化为具体的界面实现，提供用户友好的交互体验。
3. 解决问题的能力：在前端开发过程中，经常会遇到各种问题和挑战，如浏览器兼容性、性能优化、安全性等。优秀的前端开发者需要具备解决问题的能力，能够快速定位和解决各种技术难题。同时，也要具备创新思维和解决问题的能力，能够提出新的解决方案和优化思路。

4.有做过性能优化吗？怎么做得？

在前端开发中，性能优化是一个重要的环节。我遇到一些常见的性能优化方法和技巧：

2. 使用CDN：将静态资源部署在CDN上，可以让用户从最近的节点获取资源，加快加载速度。
3. 图片优化：采用适当的图片格式、压缩图片、使用图片懒加载等技术，可以减少图片大小，加快加载速度。
4. 避免阻塞渲染：将JavaScript文件放在底部、避免使用CSS选择器等技巧，可以避免阻塞渲染，提高页面加载速度。
5. 使用Web Worker：通过Web Worker可以将耗时的任务放在后台线程中执行，避免阻塞主线程，提高页面加载速度。
6. 减少HTTP请求次数：通过合并文件、使用CDN等方式，可以减少HTTP请求次数，提高页面加载速度。
7. 使用HTTP/2：通过使用HTTP/2协议，可以实现多路复用、头部压缩等技术，提高页面加载速度。

5.小程序是怎么跑在客户端的?

1. 开发阶段： 开发者使用特定的小程序开发工具，如微信开发者工具或支付宝开发者工具，编写小程序的代码、样式和逻辑。
2. 代码上传： 完成开发后，开发者将小程序的代码、资源文件等上传到微信开发平台或支付宝开发平台。上传后，平台会进行代码审核，确保小程序符合相关规范和政策。
3. 发布： 通过审核后，开发者可以将小程序发布到相应的应用商店，如微信小程序发布到微信小程序商店，支付宝小程序发布到支付宝应用市场。
4. 用户下载： 用户通过应用商店下载并安装小程序。一旦安装完成，小程序的图标会出现在用户的设备上，用户可以随时启动小程序。
5. 运行阶段： 用户启动小程序后，小程序框架会在客户端解析和执行小程序的代码。小程序框架通常是由平台提供的运行环境，它负责解释和执行小程序的代码，同时提供访问设备功能和接口的能力。
6. 页面渲染： 小程序框架根据小程序的代码逻辑，将页面渲染在用户的设备上。小程序框架通常使用一种类似于 WebView 的组件，用于显示小程序的界面。
7. 事件响应： 当用户与小程序交互时，小程序框架会捕获相应的事件，执行相应的逻辑。这包括用户的点击、滑动、输入等操作。

6.双线程架构有什么好处呢？

1. 响应性： 将UI和工作分开可以提高用户界面的响应性。
2. 避免卡顿： 在单线程架构中，如果有耗时的任务在UI线程中执行，可能会导致界面卡顿，用户会感受到程序的不流畅。通过将耗时任务放在独立的工作线程中执行，可以避免阻塞UI线程，保持界面的流畅性。
3. 并行处理： 双线程架构允许UI线程和工作线程并行执行，从而充分利用多核处理器的优势。这对于处理大规模数据、复杂计算等任务可以提高整体性能。

7.如果不使用双线程架构会怎么样？在技术指标上会有什么变化?

1. 响应性差： 单线程架构可能导致应用在执行耗时任务时变得不响应，因为所有任务都在同一个线程中执行。用户可能会感受到界面卡顿、输入延迟等问题，降低了用户体验。
2. 阻塞UI线程： 单线程执行所有任务的情况下，如果有耗时的操作（如网络请求、大量计算）在UI线程中执行，就会导致UI线程阻塞，影响用户界面的流畅性。
3. 性能瓶颈： 单线程执行可能成为性能瓶颈，尤其在处理大规模数据、复杂计算或需要同时进行多个任务的情况下。多核处理器的优势无法被充分利用，导致性能下降。
4. 难以维护和扩展： 单线程架构可能导致代码集中在一个线程中，使得代码难以维护和扩展。所有逻辑都混合在一起，不易进行模块化设计和单元测试。

8.体验卡顿问题？一帧大概多少毫秒？

流畅的用户体验需要在每秒 60 帧或以上，即每帧大约 16.67 毫秒完成。如果应用程序的帧率低于这个阈值，用户可能会感到卡顿、不流畅，尤其是在高度交互的应用场景中。

9.JS和渲染，你觉得一帧各占多少毫秒比较合适？

确保良好的用户体验通常需要保持每帧的执行时间在16毫秒（60帧/秒）以内

1. JavaScript 执行时间： 10毫秒以内。在这个时间内，JavaScript 引擎需要执行脚本代码，处理事件等。长时间的 JavaScript 执行可能导致界面卡顿。
2. 渲染时间： 6毫秒以内。渲染时间包括布局计算（Layout）、样式计算（Style）、绘制（Paint）和合成（Composite）等阶段。优化 CSS 和布局结构，以及减少页面元素的复杂性，有助于降低渲染时间。

10.说一说各种跨端的方式？JSB是怎么进行桥接的？

1. Web技术栈（HTML/CSS/JavaScript）:
   • React Native： 使用React框架构建原生应用，底层通过JavaScript Bridge与原生模块通信。
   • Flutter： 使用Dart语言，通过Flutter框架构建应用，通过自有渲染引擎进行渲染。
   • Vue Native、Weex： 基于Vue.js框架，通过渲染引擎将Vue组件渲染成原生组件。
   • Angular + NativeScript： 使用Angular框架，通过NativeScript与底层API通信，生成原生UI。
2. 小程序：
   • 微信小程序： 使用WXML（类似HTML）、WXSS（类似CSS）、JavaScript构建小程序，通过微信提供的框架运行。
   • 支付宝小程序： 使用AXML、ACSS、JavaScript构建小程序，通过支付宝提供的框架运行。
3. JSB（JavaScript Bridge）：
   • Cocos2d-JS： 使用JavaScript脚本语言开发游戏，通过JSB桥接层将JavaScript与C++游戏引擎进行交互。
   • React Native桥接： React Native通过JavaScript Bridge连接JavaScript和原生模块，使得JavaScript代码可以调用原生模块的功能。

JSB的工作原理通常包括以下步骤：

1. JavaScript调用： JavaScript代码通过JSB接口调用底层的原生API或模块。
2. 桥接层： 桥接层负责将JavaScript调用转发到底层的原生环境。
3. 原生调用： 原生环境中的原生API或模块接收调用，并执行相应的功能。
4. 结果返回： 原生执行完后，将结果返回给桥接层。
5. JavaScript响应： 桥接层将结果返回给JavaScript，使得JavaScript层能够继续执行相应的逻辑。

11.除了JSB还有什么连接方式吗？

1. 原生模块调用： 在某些跨端框架中，允许开发者编写原生模块，通过框架提供的机制进行调用。
2. 插件机制： 一些框架或平台提供插件机制，允许开发者编写插件，通过插件系统将原生功能引入到 JavaScript 环境中。
3. Webview通信： 在某些场景下，可以通过在应用中嵌入Webview实现跨端通信。

12.做过性能优化，有哪些操作？首屏渲染优化了多少秒？达到目标了吗？达到你自己的目标了吗？

有图片优化、懒加载、异步加载等，可以显著改善首屏加载速度。

13.各个操作分别优化了多少毫秒？

没有具体统计

CDN的原理？为什么资源加载快？

CDN的原理

1. 内容缓存和分发： 原始网站的静态资源（如图片、样式表、脚本文件等）会被缓存到CDN的服务器节点上。这些节点分布在全球不同的地理位置。
2. 就近访问： 当用户请求访问某个资源时，CDN会自动选择距离用户最近的服务器节点来提供服务。这可以通过DNS解析时返回距离用户最近的IP地址，使得用户能够就近访问资源。
3. 减少网络延迟： 由于资源存储在距离用户更近的服务器上，减少了网络传输的距离，从而减少了延迟。这样可以显著提高资源加载速度，尤其是对于全球范围内的用户。
4. 负载均衡： CDN会根据不同的请求负载情况，自动将用户请求分配到不同的服务器节点上，以保证服务器的负载均衡，提高整体性能和稳定性。

为什么资源加载快呢？

1. 就近访问、减少服务器负担、缓存机制、负载均衡和智能路由

如果你是一个CDN服务商，你会怎么设计你的CDN来吸引开发者。

1. 高性能： 提供快速、可靠的网络传输，确保低延迟和高吞吐量。优化服务器架构，采用高效的缓存策略和负载均衡机制，以确保资源能够快速响应用户请求。
2. 全球分发网络： 在全球各大洲和主要城市建立分布式节点，以确保用户能够就近访问资源。一个广泛分布的网络可以提供更快的响应时间，减少加载时间。
3. 简单易用的API： 提供简单且功能强大的API，使开发者能够轻松地管理和配置CDN服务。良好的文档和示例代码也是吸引开发者的关键因素。
4. 实时分析和监控： 提供实时的性能分析和监控工具，让开发者可以了解他们的资源如何被使用，以及有哪些优化的机会。这可以帮助开发者更好地优化他们的应用。

什么情况下会存在跨域问题？

1. 不同协议： 当请求的协议不同（例如，从 http://example.com 请求 https://api.example.com）。
2. 不同域名： 当请求的域名不同，即使是相同的协议（例如，从 http://example.com 请求 http://api.another.com）。
3. 不同端口： 当请求的端口不同，即使是相同的协议和域名（例如，从 http://example.com 请求 http://example.com:8080）。
4. 子域名不同： 当请求的是不同的子域名（例如，从 http://sub1.example.com 请求 http://sub2.example.com）。
5. Ajax跨域请求： 使用Ajax进行跨域请求时，浏览器会强制执行同源策略，限制跨域请求。
6. Web Fonts跨域： 在一些浏览器中，使用 @font-face 引用的字体文件如果不在同一域下，可能会遇到跨域问题。
7. 图片跨域： 当使用 img 标签加载跨域图片时，如果服务器未正确设置跨域响应头，会存在跨域问题。
8. 嵌套的浏览上下文： 在iframe或者嵌套的浏览上下文中，由于安全策略，存在跨域问题。

你在字节感受怎么样？为什么会选择来微信？

向往微信

你觉得首屏渲染多少秒是一个合格的标准？

2~5秒

之前有投递过腾讯吗？为什么没有来？

略

反问环节、业务介绍

技术栈，部门业务

作者：前端LeBron
链接：https://juejin.cn/post/7025793782998106149