快手前端面试：Promise、网络模型与协议解析

"快手主站前端笔试题目及网络协议相关知识" 本次快手主站前端的笔试涉及了多个前端开发和网络协议方面的知识点，包括CSS属性理解、JavaScript语法特性、Promise和异步处理、以及网络七层模型等核心概念。下面我们将逐一详细探讨这些内容。 1. CSS属性： - `padding-top`百分比：百分比值是相对于包含块的宽度计算，而不是高度。 - `z-index`与层叠上下文：只有当元素具有`position`值不为`static`时，才会创建层叠上下文。`z-index`用于决定在同一层叠上下文中元素的堆叠顺序。 - `opacity`、`visibility`和`display`的区别：`opacity:0`使元素透明但保持占据空间；`visibility:hidden`元素不可见但保留位置；`display:none`元素完全移出文档流，不占据任何空间。 - `margin`垂直重叠问题：根据CSS规范，同级元素的外边距可能会合并，解决方法包括设置`clearfix`类或使用`border`或`padding`。 2. JavaScript： - `var`和`let`的应用差别：`var`作用域为函数或全局，存在变量提升；`let`作用域为块级，不存在变量提升，且存在暂时性死区。 - `Promise`和`setTimeout`的顺序：在异步执行中，Promise会先于`setTimeout`执行。 - `async/await`配合Promise：`async`函数返回一个Promise，`await`用于等待Promise解析，使得异步代码可以像同步代码一样编写。 3. 手写实现： - 数组扁平化、去重、排序：可以通过递归、`reduce`或`concat`等方式实现数组扁平化，利用Set去重，再用`sort()`进行排序。 - `Array.prototype.reduce`：reduce函数用于对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。 - `Promise.all`：Promise.all接收一个Promise对象的数组，当所有Promise都解析成功时返回一个新的Promise。 4. 网络协议： - 网络七层模型：OSI模型分为物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。HTTP、SMTP、WebSocket、TCP和IP分别位于应用层、应用层、应用层、传输层和网络层。 - HTTP状态码：200表示请求成功，304表示客户端有缓存且资源未更新。 - HTTP版本区别：HTTP/1.0引入持久连接，1.1优化了连接管理，2.0引入多路复用，3.0进一步降低延迟。 - TCP与UDP：TCP提供可靠的数据传输，保证数据顺序和完整性；UDP是无连接的，速度快但不保证数据传输。 5. 额外手写题目： - 随机生成HEX颜色：利用`Math.random()`生成0-15的随机数，转化为16进制字符，构建HEX颜色字符串。 - 随机生成RGB颜色：生成0-255之间的随机整数作为红、绿、蓝分量，组合成RGB颜色字符串。 以上内容涵盖了前端开发面试中的常见技术点，对于准备此类面试的开发者来说，理解和掌握这些知识点至关重要。