前端笔试题涵盖HTML+CSS、JavaScript以及Vue.js三个主要领域，以下是这些知识点的详细解析：
1. **左侧定宽，右侧自适应布局**：一种常见布局模式，可以通过以下三种方式实现：
- 使用浮动（float）：左侧元素`float:left`，右侧元素`float:right`，并设置`width: calc(100% - 200px)`。
- 使用Flexbox：容器设置`display:flex`，左侧子元素`flex: 0 0 200px`，右侧子元素`flex: 1`。
- 使用Grid布局：容器设置`display:grid`，左侧子元素`grid-column: 1 / 2`，右侧子元素`grid-column: 2 / -1`。
2. **link 和 @import 区别**：`link`是HTML标签，用于引入外部CSS文件，可实现异步加载，支持浏览器缓存，同时可以实现DNS预解析，加载性能更好；`@import`是CSS语法，只能在CSS文件内部使用，会阻塞页面渲染直到所有CSS加载完成。
3. **垂直居中**：
- 单行文字：使用`line-height`等于元素高度。
- 多行文字：使用Flexbox，设置`align-items:center`。
- div居中：使用Flexbox，设置`justify-content:center; align-items:center`。
4. **实现△**：使用CSS的伪元素`::before`或`::after`，结合`content: " "`, `border`和`transform: rotate()`实现。
5. **Array.prototype.map()**：遍历数组，对每个元素执行函数并返回新数组，不改变原数组。ES6中新增的数组方法包括：`find()`, `findIndex()`, `includes()`, `fill()`, `entries()`, `keys()`, `values()`等。
6. **冒泡排序**：逐轮比较相邻元素，交换位置，直至没有交换发生。代码实现略。
7. **字符串转换**：使用`replace()`方法替换连字符为空格，再将首字母大写：`str.replace(/-/g, ' ').split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('')`
8. **数组拷贝**：可使用`slice()`, `concat()`, 或 `Array.from()`，或扩展运算符`...`。
9. **跨域方式**：JSONP、CORS、IFrame、WebSocket等。JSONP通过动态插入`<script>`标签实现，CORS服务器端设置允许跨域头，IFrame利用不同源策略，WebSocket协议自带跨域功能。
10. **控制台输出**：输出5个9，因为`setTimeout`是异步执行，`for`循环先执行完再依次打印`i`。
11. **有序数组查询**：线性查找（效率低）、二分查找（效率高，需保证有序）。
12. **统计字符串中最多字符出现次数**：使用对象存储每个字符的出现次数，最后找出最大值。代码略。
13. **前端性能优化**：分页加载、懒加载、减少HTTP请求、压缩资源、利用缓存、优化图片、减少DOM操作等。
14. **Vue生命周期**：包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed等。可以在`mounted`、`updated`、`beforeDestroy`中操作DOM。
15. **Vue双向数据绑定**：依赖注入和发布订阅模式，通过`data`属性、`v-model`指令、`getter`和`setter`实现。Vue使用`Object.defineProperty()`监控数据变化。
16. **Virtual DOM算法**：主要包括创建虚拟DOM树、对比新旧虚拟DOM树、生成补丁（diff）和应用补丁到真实DOM。
17. **Vue中axios跨域**：配置Vue的proxyTable或使用后端设置CORS。
18. **高德地图信息窗体**：使用高德地图API，结合Vue的组件化思想，自定义信息窗口内容，添加交互事件监听。
19. **Vue.js template编译**：template首先被转换成AST抽象语法树，然后编译成render函数，最后执行render函数生成真实DOM。
20. **Vuex实现原理**：状态管理库，核心是store，包含state、mutations、actions、getters，通过dispatch和commit操作状态，保证状态改变的可控性。
评论0