Sikara
large picture of the cover

面试题记录2

面试题链接:https://juejin.cn/post/7578460753211162651?searchId=20251203160438B9CEA9B56AD78479A50B

前端需要注意哪些SEO

一句话：语义化HTML是地基，元信息是门牌，速度是门槛，图片Alt是说明，SPA要SSR

前端SEO的核心目标：让搜索引擎的爬虫能像人一样读懂你的页面内容
语义化HTML---元信息优化（Title,Description）--优化图片格式添加alt说明--用ssr渲染出适合seo的内容

HTTP的几种请求方法用途

RESTful API设计原则---大致用途

  • CREATE → POST
  • READ → GET
  • UPDATE → PUT（全量）或 PATCH（部分）
  • DELETE → DELETE
    get 和post 参数位置一个在url ，一个在请求体body；
    传输数据大小post 比get多
1. 从浏览器地址栏输入url到显示页面的步骤
  • URL解析（浏览器的"读菜单"
  • DNS解析（"找地址"） 解析顺序：
    1. 浏览器缓存
    2. 操作系统缓存 host 文件
    3. 本地DNS服务器
    4. 根DNS服务器 → 顶级域名服务器 → 权威DNS服务器
  • TCP连接-建立可靠通信通道
  • HTTP请求与响应-客户端向服务器请求资源
  • 页面渲染
    1. HTML解析 → 构建DOM树
    2. CSS解析 → 构建CSSOM树
    3. DOM + CSSOM → 构建Render树
    4. Layout（回流）→ 计算位置和大小
    5. Paint（重绘）→ 绘制像素
    6. Composite（合成）→ 合并图层
      注意点：
      JS可能修改DOM结构，浏览器需要确保JS执行前DOM已构建完成，所以会暂停解析直到JS执行完毕
      CSS加载会阻塞渲染，但不会阻塞DOM构建
1. 如何进行网站性能优化

 1. 减少HTTP请求（基础中的基础）

  • 为什么：每次请求都有DNS、TCP握手延迟（平均100ms+）
  • 怎么做：
    • 合并CSS/JS文件（如Webpack打包）
    • 用CSS雪碧图（Sprite）合并小图标
    • 静态资源用CDN分发（如阿里云CDN）

📌 2. 压缩资源大小（最直接有效）

  • 为什么：带宽有限，小文件传输更快
  • 怎么做：
    • 启用Gzip/Brotli压缩（服务器配置）
    • 图片用WebP格式（比JPEG小30%+）
    • CSS/JS用UglifyJS压缩（删除注释、空格）

📌 3. 合理利用缓存（让浏览器当"熟人"）

  • 为什么：缓存让浏览器直接用本地资源，不用重复请求
  • 怎么做：
    • 设置Cache-Control: max-age=31536000（一年缓存）
    • 静态资源加版本号（如style.v2.css）
    • 首页用Service Worker做离线缓存

📌 4. 优化关键渲染路径（首屏速度是王道）

  • 为什么：用户最关心"首屏加载"，优化首屏能提升感知速度
  • 怎么做：
    • CSS放<head>（避免FOUC闪屏）
    • JS放<body>底部或用async/defer
    • 内联关键CSS（首屏必要样式）

📌 5. 懒加载非关键资源（按需点餐）

  • 为什么：非首屏内容（如图片、视频）不需要立即加载
  • 怎么做：
    • 图片用loading="lazy"（原生懒加载）
    • 滚动时加载（Intersection Observer API）
    • 视频用preload="none"
1. HTTP状态码及其含义
  1.  1xx: 信息性响应（100, 101, 102）
  2.  2xx: 成功（200, 201, 204, 206）
  3.  3xx: 重定向（301, 302, 304, 307, 308）
  4.  4xx: 客户端错误（400, 401, 403, 404, 405, 429）
  5.  5xx: 服务器错误（500, 502, 503, 504
  • 400: 请求格式错误
  • 401: 未认证（需要登录）
  • 403: 已认证但无权限
  • 404: 资源不存在
  • 500: 服务器内部错误（最常见）
  • 502: 网关错误（代理服务器问题）
  • 503: 服务暂时不可用（过载或维护）
  • 504: 网关超时（上游服务响应慢）
  • 301是永久重定向，302是临时重定向
介绍一下你对浏览器内核的理解

内核就是渲染引擎，负责解析和渲染网页
现代浏览器内核分为几个线程共同完成渲染

  1. 网络线程下载HTML/CSS/JS
  2. 主线程解析HTML → DOM树
  3. 主线程解析CSS → CSSOM树
  4. 主线程合并DOM+CSSOM → Render树 → 布局（Layout）
  5. 合成线程将Render树拆分为图层 → 光栅线程转化为像素 → GPU显示
html5有哪些新特性、移除了那些元素

语义化标签
多媒体原生支持 无需Flash
localStorage，sessionStorage
表单增强，输入类型支持数字，邮箱
支持地理位置api，websocket

1. link与@import 的区别
  1.  加载时机：link立即加载，@import延迟加载（CSS解析后才加载）
  2.  兼容性：link兼容所有浏览器，@import在IE8以下不支持
  3.  使用位置：link在HTML中，@import在CSS中
  4.  性能：link提升首屏速度，@import可能卡页面
  5.  优先级：@import可能被覆盖（css里后引入的覆盖先引入），link优先级可控
1. 什么是FOUC?如何避免

FOUC（Flash of Unstyled Content）是浏览器先显示无样式HTML内容，再加载CSS后突然变样，导致页面"闪一下"的糟糕体验

  1. FOUC是CSS加载延迟导致的页面闪烁
  2.  根本原因：CSS未在渲染前加载
  3.  避免方法：CSS放<head> + 内联关键CSS
  4.  禁用@import（它会加重FOUC）
  5.  现代方案：关键CSS内联 + rel="preload"
1. 如何创建块级格式化上下文(block formatting
  1. BFC是独立的布局环境，解决浮动和margin问题
  2.  5种触发方式：浮动 float 不推荐、定位 absolute、fixed、根元素、display如flex grid、overflow
  3.  overflow: hidden是首选方案（安全且不破坏布局）
  4.  BFC与IFC的区别：BFC是块级布局，IFC是行内布局
  5.  实际应用：清除浮动（父元素高度塌陷）、避免上下div的margin重叠
instanceof

instanceof 是用来判断一个对象是否是由某个构造函数（或其父类）创建的实例，其原理是沿着对象的原型链向上查找，看能否找到构造函数的 prototype 对象

对比项typeofinstanceof
用途判断基本类型（string/number/boolean等）判断引用类型（对象是否由某构造函数创建）
返回值字符串（如 "object"）布尔值（true/false）
局限无法区分 Array、Date、null 等（都返回 "object"）只对对象有效，对基本类型一律返回 false

site logo

Sikara

© 2025 Sikara