前端知识

一、HTML/CSS核心

  1. 盒模型与布局

    • 标准盒模型(content-box)与怪异盒模型(border-box)的区别及box-sizing的作用

    • Flex布局实现三栏等高布局(flex-grow分配剩余空间)

    • Grid布局的fr单位与隐式轨道定义

  2. CSS高级特性

    • BFC触发条件:浮动、绝对定位、overflow非visible等,用于解决外边距合并问题

    • 伪类(:hover)与伪元素(::before)的区别:伪类描述状态,伪元素创建虚拟元素

    • CSS动画优化:优先使用transformopacity触发GPU加速


二、JavaScript深度

  1. ES6+特性

    • let/const的块级作用域与暂时性死区(TDZ)现象

    • 可选链(?.)与空值合并运算符(??)的短路特性

    • Promise.allSettledPromise.any的区别:前者等待所有完成,后者首个成功即返回

  2. 核心机制

    • 闭包的内存泄漏场景:未清理的DOM引用或定时器

    • 事件循环中微任务(Promise.then)优先于宏任务(setTimeout)执行

    • 手写深拷贝函数需处理循环引用(使用WeakMap缓存)


三、框架专项(React/Vue)

  1. React 19

    • Server Components原理:服务端渲染零客户端Bundl

    • useTransition优化交互:标记非紧急更新(如搜索输入防抖)

    • Fiber架构的可中断渲染:链表结构+优先级调度

  2. Vue 4.0

    • Composition API逻辑复用优势:解耦功能代码,替代Mixin

    • Teleport组件实现模态框跨DOM层级渲染

    • 响应式原理:Proxy拦截 vs Vue2的Object.defineProperty


四、工程化与优化

  1. 构建工具

    • Vite的ESM按需编译:开发环境无需打包

    • Webpack Tree Shaking条件:ES Module静态分析+SideEffects标记

  2. 性能优化

    • 岛屿架构(Astro):仅激活交互区域的Partial Hydration

    • CDN动态加速:边缘节点缓存API响应

    • 首屏优化:SSR+CSR混合渲染+流式HTML


五、2025新兴考点

  1. WebGPU

    • 3D渲染性能对比WebGL提升5倍+,支持计算着色器

  2. AI集成

    • GitHub Copilot生成代码片段,需人工校验安全性

  3. 微前端

    • qiankun2.0的样式隔离方案:Shadow DOM+CSS命名空间


标签:

相关文章

如何高效学习

努力和技巧的能力。以下是一些可以帮助你高效学习的方法:制定学习计划:制定一个清晰的学习计划,包括学习内容和时间表,有助于你更好地组织自己的学习并提高学习效率。创造良好的学习环境:在学习时,尽可能避免干...

PHP的现状

一、技术演进与性能提升‌版本迭代‌PHP 8.4版本提前于2024年11月19日发布,引入了更成熟的JIT编译器和Fibers异步编程特性,代码执行速度接近原生水平性能优化持续发力,PHP 8.x系列...

React介绍

一、环境准备与项目创建‌安装 Node.js‌官网下载 LTS 版本(建议 v18+):https://nodejs.orgnode -v  # 验证安装(应显...

PHP 8.x的性能提升有哪些?

PHP 8.x 在性能方面实现了显著提升,主要归功于以下核心改进:1. JIT 编译器引入PHP 8 通过引入 ‌Tracing JIT‌ 编译器,将热点代码动态编译为机器码,使计算密集型任务(如数学...

PHP核心笔记

一、语言基础 1. 语法结构 脚本标记:<?php ... ?>(标准)、<% ......

Vue核心概念笔记

一、基础概念1.1 框架定位渐进式框架‌:可逐步采用,从简单功能到复杂应用核心思想‌:数据驱动视图,数据变化自动更新界面双向绑定‌:数据与视图自动同步更新1.2 核心特性响应式系统‌:数据变化自动触发...