大厂前端经典面试题汇总（百度篇）

百度前端经典面试题汇总及解析

1. 常见标签语义及默认display值与区别

p：段落，display: block;
li：列表项，display: block;
ul：无序列表，display: block;
form：表单，display: block;
b：粗体文本，display: inline;
img：图片，display: inline-block;

区别：

block元素：
宽度默认填满父容器，可设置宽高。
垂直方向margin/padding生效，水平方向自动扩展。
独占一行，前后元素换行显示。
inline元素：
宽度由内容决定，不可直接设置宽高。
垂直方向margin/padding无效，水平方向生效。
不换行，与其他inline元素共处一行。
inline-block元素：
结合两者特性，可设置宽高且不换行。

2. 隐藏元素的三种方法

display: none;
元素不占据空间，不响应事件。
visibility: hidden;
元素占据空间，不响应事件。
opacity: 0;
元素透明但占据空间，可响应事件。

3. 跨域概念及实现方式

跨域：不同域名、端口或协议间的资源访问限制。实现方式：

JSONP：利用<script>标签无跨域限制，通过回调函数获取数据。
CORS：服务器设置Access-Control-Allow-Origin: *允许跨域。
代理服务器：通过内部服务器转发请求。
标签属性：<img>、<script>等通过src/href跨域加载资源。

4. JSONP原理

通过动态创建<script>标签，指定回调函数名，服务器返回数据时调用该函数。例如：

function handleData(data) { console.log(data); }const script = document.createElement('script');script.src = '

http://example.com/api?callback=handleData';document.body.appendChild

(script);5. 轮播插件设计思路（伪代码）class Slider { constructor(container, items, interval = 3000) { this.container = container; this.items = items; this.currentIndex = 0; this.interval = interval; this.timer = null; } start() { this.showItem(this.currentIndex); this.timer = setInterval(() => { this.currentIndex = (this.currentIndex + 1) % this.items.length; this.showItem(this.currentIndex); }, this.interval); } showItem(index) { // 隐藏所有项，显示当前项 this.items.forEach((item, i) => { item.style.display = i === index ? 'block' : 'none'; }); }}6. 前端本地存储方式及特点

localStorage：
永久有效，同源共享。
容量约5MB。
sessionStorage：
窗口关闭后失效，仅当前窗口可见。
cookie：
可设置过期时间，容量约4KB。
每次HTTP请求携带，影响性能。
Web SQL：
已废弃，支持结构化数据存储。

7. 常见HTTP状态码

200：请求成功。
404：资源未找到。
500：服务器内部错误。

8. 事件代理原理

利用事件冒泡机制，在父元素上绑定事件处理函数，通过event.target判断子元素触发事件。例如：

document.getElementById('parent').addEventListener('click', (e) => { if (e.target.matches('.child')) { console.log('子元素被点击'); }});9. 类创建、继承与闭包

类创建：ES6中通过class关键字定义。
继承：使用extends和super关键字。
闭包：函数内部访问外部变量，形成私有作用域。例如：

function createCounter() { let count = 0; return function() { return ++count; };}10. 通用组件设计经验

Dialog组件：
接口：open()、close()、setTitle(text)。
细节：遮罩层、动画效果、ESC关闭。
Suggestion组件：
接口：setData(list)、onSelect(item)。
细节：防抖、键盘导航。

11. 组件接口设计示例（Dialog）

接口：
show(options)：配置标题、内容、按钮。
hide()：关闭弹窗。
调用过程：

const dialog = new Dialog();dialog.show({ title: '提示', content: '确认操作？' });

细节问题：
遮罩层z-index管理。
弹窗定位与动画性能。

12. 页面加载流程

DNS解析：将域名转为IP地址。
TCP连接：建立三次握手。
HTTP请求：发送请求头与数据。
服务器处理：返回HTML文件。
渲染页面：
解析HTML生成DOM树。
解析CSS生成CSSOM树。
合并为渲染树并布局绘制。
执行JS：解析并执行脚本，可能触发重绘。

13. "use strict"作用与影响

好处：
禁止未声明变量，提升代码健壮性。
禁止重复参数名，避免潜在错误。
坏处：
部分旧代码需修改（如with语句失效）。

14. Doctype作用与模式区分

作用：声明文档类型，触发标准模式。
严格模式：遵循最新标准，如盒模型为content-box。
混杂模式：向后兼容，盒模型为border-box。
区分方式：
正确Doctype触发严格模式。
缺失或错误Doctype触发混杂模式。

15. document.write与innerHTML区别

document.write：
直接写入内容流，会覆盖整个页面（若在页面加载后调用）。
innerHTML：
修改指定DOM元素的内部内容，支持部分更新。

16. 响应式设计原理

设备特征检测：通过User-Agent、屏幕宽度、CSS媒体查询（@media）适配不同设备。
实现方式：
前端：媒体查询调整布局。
后端：根据设备返回不同HTML模板。

17. CSS盒模型

标准盒模型：
总宽度 = width + padding + border + margin。
怪异盒模型（box-sizing: border-box）：
总宽度 = width + margin（width包含padding和border）。

18. GET与POST请求区别

参数位置：
GET：URL或Cookie。
POST：请求体。
安全性：
POST数据不显示在地址栏，更安全。
数据量：
GET受URL长度限制，POST无限制。
缓存：
GET请求可被缓存，POST默认不缓存。

您可能感兴趣问答

Collapsible

热门标签

热点问答