字节 tiktok泛架构 前端1面，面伤了

答案概述：以下针对字节TikTok泛架构前端一面中涉及的知识点及题目进行详细解答，涵盖自我介绍、前端方向、DNS解析、Flex布局、HTTPS原理、跨域、浏览器事件循环、代码题及反问环节相关内容。

• 自我介绍：需简洁清晰，涵盖姓名、学校、专业、相关技能（如掌握的前端技术栈，HTML、CSS、JavaScript、React/Vue等）、项目经验（突出成果与收获）、个人优势（如学习能力、问题解决能力等）。例如：“我叫[姓名]，来自[学校][专业]，熟练掌握HTML、CSS、JavaScript，熟悉React框架，曾参与[项目名称]，通过优化代码使页面加载速度提升[X]%，具备较强学习能力和问题解决能力。”
• 实习经历介绍：按时间顺序或项目重要性依次介绍，说明实习公司、岗位、主要工作内容、成果。如“在[实习公司]担任前端开发实习生，负责[项目名称]前端页面搭建与交互功能开发，通过使用[技术/工具]解决[具体问题]，项目上线后用户活跃度提升[X]%。”

• 兴趣驱动：对界面设计与交互体验有浓厚兴趣，喜欢通过代码将设计稿转化为生动页面，看到用户使用自己开发的页面有良好体验会很有成就感。
• 发展前景：前端技术发展迅速，涵盖领域广泛，如Web、移动端、小程序等，且与用户直接接触，能直接影响产品用户体验，职业发展空间大。
• 自身优势匹配：自身具备一定审美能力、逻辑思维能力与学习能力，适合从事前端开发工作，能快速掌握新技术并应用到项目中。

• Web前端开发：负责网站页面结构、样式与交互逻辑开发，使用HTML、CSS、JavaScript等技术，关注页面性能优化、兼容性处理等。
• 移动端前端开发：针对手机、平板等移动设备开发应用前端界面，可使用原生开发（如Android的Java/Kotlin，iOS的Swift/Objective - C）或跨平台框架（如React Native、Flutter）。
• 小程序开发：开发微信、支付宝等平台的小程序，具有轻量、便捷特点，开发技术栈与Web前端有相似之处，但也有平台特定API与规范。
• 大数据可视化开发：将复杂数据以直观图表、图形形式展示，使用ECharts、D3.js等库，需具备一定数据处理与分析能力。
• 全栈开发：不仅掌握前端技术，还熟悉后端开发（如Node.js、Python等），能独立完成整个项目开发，对技术广度与深度要求较高。

• 客户端发出查询请求：浏览器或应用程序向本地DNS服务器（如ISP提供的DNS服务器）发送域名解析请求。
• 本地DNS服务器查询缓存：本地DNS服务器先检查自身缓存，若有对应IP地址，直接返回给客户端；若没有，则向根DNS服务器发送查询请求。
• 根DNS服务器响应：根DNS服务器不直接返回域名对应IP地址，而是告知本地DNS服务器该域名顶级域名服务器地址。
• 本地DNS服务器向顶级域名服务器查询：本地DNS服务器向顶级域名服务器发送查询请求，顶级域名服务器返回负责该域名二级域名服务器地址。
• 本地DNS服务器向二级域名服务器查询：本地DNS服务器向二级域名服务器发送查询请求，二级域名服务器返回域名对应IP地址。
• 本地DNS服务器缓存并返回结果：本地DNS服务器将IP地址缓存起来，以便下次查询，同时将结果返回给客户端。

• CNAME（Canonical Name）即别名记录，用于将一个域名指向另一个域名。例如，有一个域名A，设置CNAME记录将其指向域名B，当访问域名A时，实际会访问域名B对应服务器。常用于将多个域名指向同一网站，方便管理与维护，也用于CDN加速场景，将域名指向CDN提供商域名。

• flex：1含义：在Flex布局中，flex: 1是flex-grow、flex-shrink、flex-basis三个属性简写，等同于flex: 1 1 0%。表示元素在主轴方向上可伸缩，会占据剩余空间，且伸缩比例为1，即与其他设置flex: 1元素平均分配剩余空间。
• 其他布局

  Table布局：通过display: table、display: table-row、display: table-cell等属性模拟表格布局，适用于需要表格形式展示数据场景，但语义化较差，灵活性不如其他布局。

  Grid布局：二维布局系统，通过定义行与列创建复杂网格结构，能精确控制元素在网格中位置与大小，适用于整体页面布局规划，如杂志式布局、卡片式布局等。

• HTTP缺陷：HTTP协议以明文传输数据，存在安全风险，如数据被窃取、篡改，无法验证通信双方身份。
• HTTPS原理：HTTPS在HTTP基础上加入SSL/TLS协议，实现数据加密与身份验证。过程为：客户端向服务器发起HTTPS请求，服务器返回SSL证书（包含公钥）；客户端验证证书有效性（如证书是否过期、是否由可信机构颁发），若有效则生成随机密钥，用服务器公钥加密后发送给服务器；服务器用私钥解密得到随机密钥，后续通信用该密钥加密数据，确保数据传输安全。

• 跨域原因：浏览器同源策略限制，当协议、域名、端口任一不同时，即视为跨域，会阻止跨域请求获取数据，保障用户信息安全。
• 解决方法

  CORS（跨域资源共享）：服务器设置响应头Access-Control-Allow-Origin，指定允许跨域请求域名，也可设为*允许所有域名，还可设置其他相关响应头控制跨域请求行为。

  Proxy代理：在同源服务器上设置代理接口，前端请求代理接口，代理接口再请求跨域接口，将结果返回给前端，避免浏览器同源策略限制。

• 执行栈与任务队列：JavaScript是单线程语言，代码执行在执行栈中顺序执行，同步任务直接进入执行栈执行；异步任务（如定时器、网络请求、用户交互事件等）由浏览器其他线程处理，完成后将回调函数放入任务队列（分为宏任务队列与微任务队列）。
• 事件循环过程：执行栈清空后，先检查微任务队列，依次执行微任务，直到微任务队列为空；再检查宏任务队列，取出第一个宏任务执行，执行过程中可能产生新微任务与宏任务，重复上述过程。

• 一堆console.log,promise,setTimout打印输出顺序：同步任务优先执行，先输出所有console.log；然后执行微任务，输出Promise回调结果；最后执行宏任务，输出setTimeout回调结果，即同步 -> 微任务 -> 宏任务。
• 不用promise.all，实现一个和promise.all功能相同的函数：

• n*m矩阵每行升序排列，找到矩阵中所有数字topk的数字返回：可先将每行最后一个元素（该行最大值）取出组成数组，找到数组中第k大元素作为阈值，然后遍历矩阵，统计大于等于阈值元素个数，根据情况调整阈值，最后再次遍历矩阵收集topk元素。

• 技术选型：了解使用React哪个版本，是否结合TypeScript开发，状态管理使用Redux、MobX还是Context API，UI组件库选择Ant Design、Material - UI还是自定义组件库。
• 项目架构：询问项目整体架构设计，如采用分层架构（视图层、业务逻辑层、数据层），还是模块化架构，各模块职责与通信方式。
• 性能优化：了解在前端性能优化方面采取措施，如代码分割、懒加载、缓存策略、图片优化等。
• 开发流程与协作：询问开发流程（如敏捷开发、瀑布模型），与后端、测试团队协作方式，代码规范与评审流程。