### Web前端笔试题知识点梳理
#### 一、HTML知识
1. **浏览器加载和渲染HTML的顺序**
- 浏览器从上到下解析HTML文档。
- 首先解析`<head>`部分，然后是`<body>`部分。
- 当遇到外部资源如CSS或JavaScript时，浏览器会暂停当前的HTML解析过程，转而下载这些外部资源。
- 如果这些资源未设置`async`或`defer`属性，浏览器会等待资源下载完成后再继续解析HTML。
- CSS资源优先于JavaScript资源加载。
2. **Doctype的作用及严格模式与混杂模式的区分**
- `Doctype`用于声明文档类型，告诉浏览器以何种模式来解析文档。
- 严格模式：当使用标准的DOCTYPE声明时，浏览器按照W3C的标准解析文档，不兼容某些过时或非标准的特性。
- 混杂模式：使用不正确的DOCTYPE声明时，浏览器采用向后兼容的方式解析文档，可能会出现布局上的问题。
3. **HTML5的离线存储**
- HTML5引入了离线存储功能，主要通过Application Cache (AppCache)实现。
- 工作原理：
- 通过`<html manifest>`属性指定缓存清单文件。
- 清单文件定义了哪些资源需要缓存。
- 当用户访问应用时，浏览器会检查是否有可用的离线版本，并在后台自动更新缓存。
- 用户即使在网络不可用的情况下也能访问应用的某些部分。
4. **Cookies、SessionStorage和LocalStorage的区别**
- **Cookies**：数据保存在客户端，可用于身份验证，大小限制约为4KB，可通过HTTP请求头传输。
- **SessionStorage**：会话级别的存储，关闭浏览器窗口后数据消失，大小限制较大，通常为几MB。
- **LocalStorage**：持久化存储，除非手动清除，否则数据一直存在，大小限制更大，可达5MB以上。
5. **网页验证码的作用**
- 验证码主要用于防止自动化工具（如爬虫）提交表单，确保操作由真实的人类执行。
- 常见形式包括图形验证码、音频验证码等。
- 解决的安全问题主要包括：防止垃圾邮件、保护用户账户安全、防止恶意注册等。
6. **前端页面的三层构成**
- 结构层（Structure）：HTML负责页面结构。
- 表现层（Presentation）：CSS负责页面样式。
- 行为层（Behavior）：JavaScript负责页面交互逻辑。
#### 二、CSS知识
1. **CSS优先级算法**
- 选择器的优先级由四个因素决定：内联样式、ID选择器、类选择器/伪类/属性选择器、元素选择器。
- 具体计算方法为：内联样式 > ID选择器 > 类选择器/伪类/属性选择器 > 元素选择器。
- 当两个选择器具有相同的优先级时，后面定义的选择器会覆盖前面的。
2. **用纯CSS创建三角形的原理**
- 利用`border`属性，通过设置不同方向的边框宽度和颜色，使某些方向的边框不显示，从而形成三角形效果。
- 例如，一个只有左边框显示的元素，可以通过调整边框宽度和颜色来模拟三角形。
3. **`li`之间的空白间隔问题及其解决办法**
- 问题原因在于`display: inline-block;`使得元素间存在默认的空白间隔。
- 解决方法包括：使用`font-size: 0;`或`letter-spacing: -1px;`去除空白间隔；或将`li`元素设置为`display: block;`，并使用`float: left;`。
#### 三、JavaScript知识
1. **`parseInt()`与`parseFloat()`的区别**
- `parseInt()`用于解析整数，如果字符串无法解析为整数，则返回`NaN`。
- `parseFloat()`用于解析浮点数，如果字符串无法解析为浮点数，则返回`NaN`。
- 示例：`parseInt("X8X8")`返回`NaN`，`parseFloat('8')`返回`8`。
2. **`setTimeout`与`setInterval`的区别**
- `setTimeout`：延迟一定时间后仅执行一次函数。
- `setInterval`：每隔一定时间重复执行函数。
- 使用场景：`setTimeout`适用于定时执行一次的任务；`setInterval`适用于需要周期性执行的任务。
3. **事件委托的概念**
- 事件委托是一种优化DOM事件处理的技术，通过监听父元素的事件来处理子元素的事件。
- 实现机制：利用事件冒泡机制，将事件监听器绑定在父元素上，通过事件对象判断触发事件的具体元素。
4. **阻止事件冒泡和默认事件的方法**
- **阻止事件冒泡**：使用`event.stopPropagation()`。
- **阻止默认行为**：使用`event.preventDefault()`。
5. **`==`与`===`的区别**
- `==`（相等比较运算符）：只比较值，会进行类型转换。
- `===`（严格相等比较运算符）：同时比较值和类型。
#### 四、框架知识
1. **MVVM、MVC与MVP架构**
- **MVVM**（Model-View-ViewModel）：ViewModel作为数据模型和视图间的桥梁，通过双向数据绑定技术实现视图与模型的解耦。
- **MVC**（Model-View-Controller）：控制器负责接收用户输入，更新模型，进而更新视图。
- **MVP**（Model-View-Presenter）：Presenter负责处理业务逻辑，控制视图和模型之间的交互。
2. **框架的优缺点**
- **优点**：提高开发效率、易于维护、社区支持广泛。
- **缺点**：学习曲线陡峭、可能带来额外的性能负担、限制灵活性。
#### 五、扩展知识
1. **冒泡排序**
- 冒泡排序是一种简单的排序算法，通过重复遍历要排序的数组，比较每对相邻元素，交换顺序不正确的元素，直到没有元素需要交换为止。
- 示例：对数组`[54, 48, 15, 43, 6, 99, 71, 10]`进行从大到小排序，最终结果为`[99, 71, 54, 48, 43, 15, 10, 6]`。
2. **A、B和C的通信问题**
- 问题描述：A需要通过C将药品安全送达B手中，但是C会偷走未上锁箱子里的物品。
- 解决方案：A将药品放入箱子，并用自己的锁上锁；B再用自己的锁上锁；A取回自己的锁；B取回自己的锁打开箱子。
3. **Web注入攻击原理**
- **XSS（跨站脚本攻击）**：攻击者通过在网页中插入恶意脚本，当其他用户浏览该页面时触发这些脚本，以此来盗取用户信息。
- **CSRF（跨站请求伪造）**：攻击者通过伪装成合法用户，诱使其在已登录的状态下发起恶意请求，从而执行非授权的操作。
4. **最近流行的前端技术趋势**
- React、Vue和Angular等主流框架持续发展。
- TypeScript作为一种强类型JavaScript超集受到越来越多的关注。
- Serverless架构、Progressive Web Apps (PWA)、Web Components等新兴技术的发展。
5. **选择公司的标准**
- 技术栈是否前沿。
- 团队氛围和文化是否适合自己。
- 职业发展空间和培训机会。
- 公司的稳定性和发展前景。
daituyiqi2019-08-01题目比较过时了
