前端面试题记录

原创已于 2025-07-29 17:01:38 修改 · 1.7k 阅读

40 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #面试

于 2025-07-02 14:15:23 首次发布

参考了网上很多资料，打算自己跟着敲一下（写个笔记加深下印象吧）缓慢更新...

前端面试高频题，八股文精华篇前端的面试高频率的题目，附带解析。八股文你都不了解一下吗？那还怎么面试，怎么知道自己的深浅。 - 掘金

浏览器和协议

1. 从输入url到展示页面加载的过程

输入网址 + 回车： 用户发起请求。
DNS 解析： 把域名（网站名）翻译成服务器的真实 IP 地址。
TCP 连接： 浏览器和服务器建立可靠的网络连接。
发送 HTTP 请求： 浏览器告诉服务器它想要什么。
服务器处理： 服务器准备被请求的资源（找文件或动态生成）。
返回 HTTP 响应： 服务器把资源（主要是 HTML）送回给浏览器。
浏览器解析 HTML： 浏览器读取 HTML，理解页面结构。
加载解析 CSS/JS/资源： 获取样式表、脚本、图片等其他文件。
构建渲染树： 结合结构和样式，计划如何显示。
布局 (Layout/Reflow)： 计算每个元素的位置和大小。
绘制 (Painting)： 把内容画到屏幕上。
JS 执行： 运行 JavaScript 脚本（可能随时发生，影响步骤 7-11）。
页面加载完成： 所有内容显示完毕并可用。

2、TCP三次握手和四次挥手

关键点总结 (三次握手)：

目的： 同步初始序列号，建立可靠的双向通信通道。
次数： 3 次交互。
标志： SYN -> SYN + ACK -> ACK。
作用： 避免历史重复连接（防止上次未关闭的连接干扰）、协商初始序列号、确保双方收发能力正常。

http和https的区别

http是明文传输，因此不够安全

https是加密传输，更加安全

跨域的解决方案

设置代理，拦截器顺带处理

常见的服务器返回的code意义

200 请求成功、400请求失败、405客户端请求的0方法、407 客户端缺少代理、430客户端所发起的请求被拒绝、404没有找到请求的网页地址或者请求的路径不存在

HTML

语义化标签：这是HTML5的核心特性，能够更清晰布局结构

严格模式和混杂模式

开启严格模式

<!DOCTYPE html>

iframe的优缺点

能够完整展示出内置的页面来

提高页面代码的复用性，避免广告等的加载问题

解决了部分的跨域问题

缺点：

iframe会阻塞主页面的onload事件

无法被一些搜索引擎索引

页面会增加许多html庆七，会产生很多页面

在出现区域的上下、左右以内滚动条，会挤占空间

CSS

盒模型

一个标准的盒模型是有padding\magin\border\content四部分所组成的

常用选择器

!important（从上至下优先级变低）

行内

id

class

标签

子选择器

伪类

防抖和节流的实现

防抖（多次输入情况下只执行最后一次输入）

function debounce(fn, wait) {
  var timer = null;  // 准备一个计时器（初始为空）

  return function() { // 返回一个"带防抖功能的新函数"
    var context = this;       // 记住当前场景（比如按钮的点击事件）
    var args = [...arguments]; // 保存所有参数（比如事件对象）

    // 如果已有计时器在运行 → 说明有人"手抖"连续操作了！
    if (timer) {
      clearTimeout(timer);  // 取消之前的等待（重置倒计时）
      timer = null;         // 清空计时器
    }

    // 新建一个倒计时器（关键！）
    timer = setTimeout(() => {
      fn.apply(context, args); // 倒计时结束 → 真正执行目标函数
    }, wait); // 等待时间（比如1秒）
  };
}

节流（按照设定时间执行）

//时间戳写法
function throttle(fn, delay) {
  var preTime = Date.now(); // 上次执行时刻

  return function() {
    var context = this,
      args = [...arguments],
      nowTime = Date.now(); // 当前时刻

    // 时间间隔达标了吗？
    if (nowTime - preTime >= delay) {
      preTime = nowTime; // 刷新计时器
      return fn.apply(context, args); // 立即执行！
    }
    // 未达标？直接忽略操作
  };
}
//定时器写法
function throttle (fun, wait){
  let timeout = null; // 冷却计时器
  
  return function(){
    let context = this
    let args = [...arguments]
    
    // 如果当前没有执行计划
    if(!timeout){
      timeout = setTimeout(() => {
        fun.apply(context, args) // 延迟执行
        timeout = null // 执行后重置开关
      }, wait)
    }
    // 已有计划？啥都不做
  }
}