2017年前端面试题整理汇总100题.pdf

### 前端面试知识点整理 #### 自我介绍与项目介绍 面试中的自我介绍环节，通常需要候选人提供基本信息之外，更多地展现个人的特色和专业优势。面试官希望了解的是候选人的技术特点、团队协作能力、问题解决能力以及工作态度。项目介绍则是展示个人在实际工作中应用前端技能的场景，需要清楚地说明在项目中的角色、使用的技术栈以及解决的关键问题。 #### 前端开发的看法 对于“如何看待前端开发？”这个问题，候选人可以表达对前端工程化、模块化、性能优化、用户交互体验等方面的见解。对前端趋势的了解，比如对响应式设计、前后端分离架构、前端安全等领域的认识，也是面试官期望听到的内容。 #### 学习方法与规划 在面试中，表达学习方法和未来规划能体现候选人的自我驱动力和职业发展方向。可以介绍学习新技术的方法，比如阅读文档、看视频教程、参与开源项目、阅读源码、写博客总结、参与技术社区交流等。对于未来规划，可以描述期望在技术上达到的层次，参与哪些项目，以及对团队或公司有何贡献。 #### CSS布局相关知识点 在面试题中，对于CSS布局的考察一般会涉及position属性的几个不同值的含义： - `position: relative;` 相对定位，是相对于其正常位置进行定位的。 - `position: absolute;` 绝对定位，是相对于最近一个已定位的父元素定位的，如果没有则相对于初始化文档（html元素）。 - `position: fixed;` 固定定位，是相对于浏览器窗口进行定位的，一般用于固定页面某个元素在窗口中的位置。 - `position: sticky;` 粘性定位，元素在滚动到某个位置时，会变成固定定位，直到达到设定的位置。 #### 跨域问题的解决方案 跨域资源共享（CORS）是前端工作中常见的问题。解决跨域问题通常有以下几种方法： - **JSONP**：由于浏览器同源策略限制，JSONP通过动态创建`<script>`标签的方式请求跨域资源，并利用回调函数取得数据。但JSONP只支持GET请求。 - **CORS（跨源资源共享）**：通过在服务器端设置特定的HTTP头部（如`Access-Control-Allow-Origin`）来控制资源可以被哪些域的页面加载。 - **document.domain跨子域**：当两个域属于同一个基础域名时，可以将这两个域的`document.domain`设置为相同的主域来实现跨子域的通信。 - **window.name跨域**：利用window对象的name属性，即使页面被重新加载，只要是在同一个窗口生命周期内，该值就会被保留，可用于跨域数据传输。 - **postMessage**：HTML5提供的一种允许不同源页面间通信的方法，可以安全地实现跨源传递消息。 #### 前端模块化打包工具：Webpack Webpack作为一个模块打包工具，在现代前端开发中占据重要地位。Webpack可以处理HTML、JavaScript、CSS等多种资源，通过各种loader来处理不同类型的文件。Webpack特点包括： - **代码分割（Code Splitting）**：支持自动或手动对代码进行分割，提高应用性能。 - **Loader机制**：Webpack的loader系统允许使用链式传递的方式处理不同类型的静态资源。 - **兼容性**：支持CommonJS、AMD、ES6等多种模块规范，便于旧项目的代码迁移。 - **插件系统**：Webpack具有强大的插件系统，可扩展其功能，如热模块替换（Hot Module Replacement）等。 - **入口和出口配置**：可以明确指定入口文件和输出的文件，及其相关的配置，如publicPath、outputPath等。 - **开发服务器**：Webpack内置开发服务器，支持模块热替换（HMR），提升开发效率。 通过合理使用Webpack，开发者可以更加高效地管理和打包前端资源，同时也使得项目结构更加清晰、模块化、优化性能。 以上是对《2017年前端面试题整理汇总100题.pdf》文件中部分内容的知识点解读。由于文档中的文字是通过OCR技术扫描获得，可能在一些地方存在识别错误或遗漏，这里尽可能地对知识点进行了补充和完善。希望这些知识点的整理能为前端面试准备提供帮助。