快手 前端实习面经

快手前端实习面试常见问题及解答如下：

• 自我介绍：需简洁清晰，涵盖姓名、学校、专业、相关前端项目经历（如开发过什么类型网站、小程序，使用了哪些技术栈，解决了什么问题）、掌握的前端技能（如 HTML、CSS、JavaScript 熟练程度，是否熟悉框架如 Vue、React 等）、个人优势（如学习能力、团队协作能力等）。
• 到岗时间及其他基础信息：如实说明自己能到岗的时间，对于其他基础信息如工作地点偏好等也按实际情况回答。

• 常见的三列布局实现方案

  浮动布局：将三个元素都设置为向左浮动，然后通过设置合适的宽度（如每个元素宽度为 33.33%）和边距来实现三列布局。不过浮动布局可能会影响文档流，需要清除浮动。示例代码如下：

• 怎么让一个元素不可见

  visibility: hidden：元素不可见，但仍然占据文档流中的空间，即其他元素会把它当作仍然存在一样进行布局。

  display: none：元素不可见，并且不占据文档流中的空间，就好像该元素不存在一样，其他元素会重新布局。

  opacity: 0：元素不可见，但仍然占据空间，并且可以响应鼠标事件（如点击等），只是视觉上看不到。

• 相对定位和绝对定位

  相对定位（position: relative）：元素相对于其原本在文档流中的位置进行定位，通过设置 top、right、bottom、left 属性来调整其位置，但原本的空间仍然会被保留。

  绝对定位（position: absolute）：元素相对于最近的已定位（即 position 值不是 static 的元素）祖先元素进行定位，如果找不到已定位的祖先元素，则相对于初始包含块（通常是视口）进行定位。绝对定位的元素会脱离文档流，不占据原本的空间。

• var、let、const 的区别

  作用域：var 是函数作用域，在函数内部声明的变量在整个函数内部都有效；let 和 const 是块级作用域，只在声明所在的代码块（如 if 语句块、for 循环块等）内有效。

  变量提升：var 声明的变量会进行变量提升，即在声明之前就可以访问到该变量（值为 undefined）；let 和 const 声明的变量不会进行变量提升，在声明之前访问会报错（暂时性死区）。

  重复声明：var 可以重复声明同名变量；let 和 const 不允许重复声明同名变量。

  赋值：var 和 let 声明的变量可以重新赋值；const 声明的常量一旦赋值后不能重新赋值（对于对象类型的常量，其属性可以修改）。

• 作用域：作用域是指程序源代码中定义变量的区域，它决定了变量的可见性和生命周期。JavaScript 中有全局作用域、函数作用域和块级作用域（ES6 引入 let 和 const 后）。变量在其作用域内可被访问，超出作用域则无法访问。
• 浏览器重排和重绘

  触发重排的情况：当 DOM 元素的几何属性（如宽度、高度、位置等）发生变化时，浏览器需要重新计算元素的几何属性，然后重新布局页面，这个过程会触发重排。例如，改变元素的宽度、添加或删除可见的 DOM 元素、改变元素的字体大小等。

  触发重绘的情况：当 DOM 元素的外观属性（如颜色、背景色、边框样式等）发生变化，但不影响元素的几何属性时，浏览器只需要重新绘制元素的外观，而不需要重新布局页面，这个过程会触发重绘。例如，改变元素的颜色、背景图片等。重排一定会触发重绘，但重绘不一定会触发重排。

• 浏览器 render 进程：浏览器的 render 进程（渲染进程）主要负责页面的渲染工作，包括解析 HTML、CSS，构建 DOM 树和 CSSOM 树，合成渲染树，进行布局和绘制等操作。一个标签页通常对应一个 render 进程，它包含多个线程，如 GUI 渲染线程、JavaScript 引擎线程、事件触发线程、定时器线程等，这些线程相互协作完成页面的渲染和交互。
• 找出 html 上所有的节点并实现：可以通过 document.querySelectorAll('*') 方法来获取 HTML 文档中所有的节点。该方法返回一个包含所有匹配元素的 NodeList 对象。示例代码如下：

• 常见的 http 编码

  URL 编码：用于对 URL 中的特殊字符进行编码，以确保 URL 的合法性和安全性。例如，空格会被编码为 %20。

  Base64 编码：常用于在需要以文本形式传输二进制数据（如图片、音频等）时，将二进制数据编码为 ASCII 字符序列。

  HTML 实体编码：用于在 HTML 文档中表示特殊字符，如 < 编码为 &lt;，> 编码为 &gt;，以避免这些字符被解析为 HTML 标签。

• http 响应：HTTP 响应由状态行、响应头、空行和响应体组成。状态行包含 HTTP 版本、状态码和状态消息，如 HTTP/1.1 200 OK；响应头包含服务器的一些信息，如服务器类型、内容类型、缓存控制等；空行用于分隔响应头和响应体；响应体则是服务器返回的实际数据，如 HTML 页面、JSON 数据等。

• 遇到过安全问题么：可以列举一些常见的前端安全问题，如 XSS（跨站脚本攻击）、CSRF（跨站请求伪造）等。例如，XSS 攻击是通过在网页中注入恶意脚本，当用户访问该页面时，恶意脚本会在用户的浏览器中执行，从而窃取用户的信息或进行其他恶意操作。防范 XSS 攻击的方法包括对用户输入进行过滤和转义、使用 CSP（内容安全策略）等。

• 快排：快速排序是一种分治的排序算法，它的基本思想是通过选择一个基准元素，将数组分为两部分，使得左边部分的元素都小于等于基准元素，右边部分的元素都大于等于基准元素，然后递归地对左右两部分进行排序。示例代码如下：