前端面试宝典：200道精选问题及答案解析

前端面试宝典：200道精选问题及答案解析

一、HTML5基础篇

1. HTML5有哪些新特性？

HTML5带来了许多新特性和API，包括但不限于：

• 新的语义标签：如<article>、<footer>、<header>、<nav>、<section>等，使文档结构更清晰。
• 表单控件：新增了email、url、date、time等输入类型，提高了表单的易用性和验证能力。
• 图形和多媒体：通过<canvas>和<video>、<audio>标签支持图形绘制和多媒体播放。
• 离线存储：提供localStorage和sessionStorage，实现本地数据持久化和会话级数据存储。
• Web Workers：允许在后台线程中运行脚本，不会阻塞用户界面。
• WebSocket：实现客户端与服务器的全双工通信。

2. 如何使用HTML5的拖放API？

HTML5的拖放API主要通过draggable属性、dragstart、dragenter、dragover、drop、dragleave和dragend等事件来实现。例如：

<div draggable="true" ondragstart="dragStartFunction(event)">拖我</div>
<div ondrop="dropFunction(event)" ondragover="allowDrop(event)">放这里</div>

二、CSS3进阶篇

1. CSS3中的Flexbox布局是什么？

Flexbox（弹性盒模型）是一种CSS布局方式，旨在提供一种更有效的方式来布局、对齐和分配容器中项目的空间，即使它们的大小未知或是动态变化的。主要属性包括flex-direction、flex-wrap、justify-content、align-items等。

2. 如何使用CSS3创建动画？

CSS3提供了@keyframes规则和animation属性来创建动画。例如，创建一个简单的淡入效果：

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
.fade-in {
  animation: fadeIn 2s;
}

三、JavaScript核心篇

1. JavaScript中的作用域和闭包是什么？

作用域决定了变量在何处可见和生命周期。JavaScript采用词法作用域，即函数的作用域基于函数声明的位置确定。

闭包是函数和声明该函数的词法环境的组合，允许函数访问并操作函数外部的变量。

2. 解释一下JavaScript的原型链？

JavaScript的原型链是实现继承的一种机制。每个对象都有一个指向其原型（prototype）的内部链接。当访问一个对象的属性时，如果该对象本身没有这个属性，则会去它的原型对象中查找，以此类推，直到找到或到达原型链的顶端（通常是Object.prototype）。

四、前端框架与库

1. React与Vue的异同点？

React：

• 强调组件化开发，组件逻辑使用JSX或纯JavaScript编写。
• 数据流主要通过props和state管理。
• 虚拟DOM提高渲染性能。

Vue：

• 同样支持组件化开发，但模板语法更为灵活。
• 使用Vuex进行状态管理。
• 响应式系统基于Object.defineProperty实现。

2. 如何优化React应用的性能？

• 避免不必要的渲染：使用React.memo、shouldComponentUpdate或React.PureComponent。
• 代码拆分：使用动态导入来分割代码，按需加载。
• 使用React.lazy和Suspense：实现组件级别的懒加载。
• 优化服务端渲染：减少首屏加载时间。

五、前端安全与开发实践

1. 如何防范XSS攻击？

• 转义输出：对用户输入进行HTML转义。
• 设置Content-Security-Policy：减少XSS攻击的风险。
• 使用HTTP Only的Cookie：防止通过JavaScript访问Cookie。