【前端面试题】书、定位问题、困难

看过什么书

《JavaScript 高级程序设计（第 4 版）》（作者：Matt Frisbie）
这是一本深入学习 JavaScript 语言的经典书籍。它详细地涵盖了 JavaScript 的高级特性，包括原型链、闭包、异步编程等复杂概念。以闭包为例，书中通过多个实际场景下闭包的应用，如私有变量的实现、模块模式等，深入剖析了闭包的工作原理和使用方式。还深入讲解了 ES6 及后续版本引入的新特性，如let和const关键字、箭头函数、Promise 对象等内容，帮助读者跟上 JavaScript 语言的发展潮流。
《CSS 权威指南（第 3 版）》（作者：Eric A. Meyer）
作为 CSS 领域的权威书籍，它全面而深入地讲解了 CSS 的各种属性和技术。从基本的选择器和样式规则，到高级的布局模型（如弹性布局flexbox和网格布局grid）都有详细的阐述。在讲解复杂的布局时，书中会通过一些实际的网页布局案例，比如实现一个具有响应式布局的电商网站页面，展示如何巧妙地运用grid布局来划分页面区域，使读者能够深入理解并应用这些布局技术。

如何查看bug问题

以下是一些前端图表定位相关bug的排查方法：

使用浏览器开发者工具

• 检查元素：通过浏览器的“检查”功能，查看图表所在的HTML元素结构，确认元素是否正确渲染、是否存在样式冲突或布局问题。例如，图表的容器元素是否设置了正确的宽度和高度，是否被其他元素遮挡等。
• 查看控制台输出：在控制台中查看是否有与图表相关的JavaScript报错信息，如数据获取失败、图表库加载错误、方法调用异常等。根据报错提示定位问题代码，可能是数据接口调用问题、图表初始化参数错误或代码逻辑错误等。
• 分析网络请求：在“Network”标签页中，查看图表数据的请求情况，包括请求的URL、参数、响应状态码和返回数据等。确保数据请求成功，且返回的数据格式正确、完整。如果数据请求失败或返回的数据不符合预期，可能是后端接口问题或数据传输过程中的错误。

检查图表数据

• 数据格式验证：确认传递给图表的数据格式是否符合图表库的要求。不同的图表库对数据格式有不同的要求，例如，柱状图可能需要一个包含类别和数值的对象数组，折线图可能需要一个包含时间序列和对应数值的数组等。如果数据格式不正确，图表可能无法正常显示或显示异常。
• 数据完整性检查：确保传递给图表的数据完整，没有缺失或多余的字段。例如，图表可能需要每个数据点都包含特定的属性，如果某些数据点缺少这些属性，可能会导致图表显示问题。
• 数据异常处理：检查数据中是否存在异常值或特殊情况，如空值、无穷大等。图表库对这些特殊值的处理方式可能不同，有些可能会导致图表显示异常或报错。可以在数据处理阶段对这些异常值进行适当的处理，如替换为默认值或进行特殊标记。

测试不同场景

• 浏览器兼容性测试：在不同的浏览器和浏览器版本上测试图表的显示效果，确保图表在各种主流浏览器上都能正常显示。不同浏览器对CSS样式和JavaScript的解析可能存在差异，可能会导致图表在某些浏览器上出现显示问题。
• 设备兼容性测试：在不同的设备类型和屏幕分辨率下测试图表，检查是否存在布局错乱、显示不全或性能问题。特别是在移动设备上，由于屏幕尺寸较小和触摸操作的特点，图表可能需要进行特殊的适配和优化。
• 动态数据测试：模拟不同的动态数据情况，如数据实时更新、数据量的增加或减少等，检查图表的响应和显示效果。确保图表能够正确处理动态数据，并且在数据变化时能够及时更新显示，不会出现卡顿或数据丢失等问题。

查看图表库文档和社区

• 查阅官方文档：仔细查阅所使用图表库的官方文档，了解图表的配置参数、方法调用、数据格式等要求，确保自己的代码正确使用了图表库的功能。官方文档通常会提供详细的示例和常见问题解答，可以帮助快速定位和解决问题。
• 搜索社区资源：在相关的技术社区、论坛或问答平台上搜索与图表相关的问题和解决方案。可能会有其他开发者遇到过类似的问题并分享了他们的解决经验，可以从中获取灵感和帮助。

以下是一些常见的排查bug的方法：

前端bug排查方法

1. 理解和复现问题：明确bug的具体表现和出现条件，如在哪些页面、操作步骤、输入数据等情况下会出现问题。尝试在不同的浏览器、设备及浏览器版本上复现bug，以便更准确地定位和解决问题。
2. 使用浏览器开发者工具：利用Chrome DevTools等浏览器自带的开发者工具进行调试。
   • 查看控制台输出：在Console标签页中查看JavaScript报错信息，包括语法错误、运行时错误、未捕获的异常等，根据错误提示定位问题代码。
   • 检查元素：通过Inspect功能查看页面元素的HTML结构、CSS样式以及绑定的事件等，检查元素是否存在样式冲突、布局异常、属性设置错误等问题。
   • 监视网络请求：在Network标签页中查看页面的网络请求情况，包括请求的URL、参数、响应状态码、返回数据等，判断是否存在请求失败、数据加载异常等问题。
3. 分析代码逻辑：仔细检查相关的HTML、CSS和JavaScript代码，查找可能导致bug的地方，如变量命名错误、语法错误、逻辑错误、遗漏的代码块等，并使用代码缩进、注释等方式增强代码可读性。
4. 添加日志输出：在关键代码部位添加console.log等日志输出语句，以便在运行时查看变量的值、条件执行路径等，这有助于揭示在bug出现时代码的状态。
5. 检查兼容性问题：对于不同浏览器的解析行为和CSS支持差异，可使用CSS前缀、Polyfill、条件注释等方法来解决兼容性问题。在多个浏览器和设备上进行测试，确保页面在各种环境下都能正常显示和交互。
6. 单元测试和回归测试：编写合适的单元测试，涵盖关键功能和边界情况，通过单元测试来验证代码的正确性。在修复bug后，进行回归测试，确保修改不会引入新的问题。
7. 查询文档和社区：利用搜索引擎、技术文档和开发者社区的资源，查找类似问题的解决方案和经验分享，可能会发现有人遇到相似的问题并提供了解决方案。

移动端bug排查方法

1. 查看设备日志：在移动设备上，可以通过连接设备到电脑，使用相应的开发工具查看设备的日志输出，如Android的Logcat和iOS的Xcode Console，从中获取错误信息和异常堆栈跟踪。
2. 抓包分析：使用Fiddler、Charles等抓包工具捕获移动应用与服务器之间的网络请求和响应，分析请求和响应的头部信息、数据等，确定是否存在异常。
3. 设备和环境测试：在不同的设备型号、操作系统版本、屏幕分辨率等条件下进行测试，检查是否存在兼容性问题。
4. 内存和性能分析：使用性能分析工具，如Android的Profiler和iOS的Instruments，监测应用的内存使用情况、CPU占用率、帧率等性能指标，查找可能导致卡顿、崩溃等问题的原因。
5. 复现和操作记录：详细记录bug出现的操作步骤、场景和输入数据等，尝试多次复现问题，以便更好地定位问题。

如何理解学习xxxx

1. 文档
2. 技术博客
3. 参与技术社区和交流
4. 实践操作与项目练习

最大的困难

0到1项目开发：
项目初期需求不明确，我通过与产品和设计团队多次沟通，梳理清晰需求，并将项目拆解为多个阶段，逐步推进。

ECharts 配置不熟悉：
由于不熟悉 ECharts，最开始对它的配置不熟悉。我查阅文档并进行实践，掌握了图表配置、数据绑定和交互实现，逐渐解决了配置和渲染问题。

图表渲染报错：
在图表渲染时遇到报错，主要是由于数据格式不匹配。我通过仔细检查数据源格式，确保数据和 ECharts 配置的匹配，并加上错误处理机制，避免渲染失败。

图表交互卡顿：
图表拖动和切换时出现卡顿，我通过优化渲染策略，使用 setOption 进行局部更新，并引入防抖和节流来提升性能。