2.html
22.编程题 / 编程题
- 长列表渲染解决方案?
- 写一个幻灯片效果
- 实现两个可以拖曳的节点连线
- 实现文本溢出 popover 效果
- 前端如何快速获取页面 url query 参数
- 主题切换
- 查找页面出现次数最多的 HTML 标签
- 实现一个缓存函数
- 大文件上传
- 前端需要加载一个大体积的文件时， 一般有哪些优化思路
- 计算一段文本渲染之后的长度
- 长文本场景，中间显示省略号..., 两端正常展示
- 要实时统计用户浏览器窗口大小，该如何做
- 如何实现鼠标拖拽
- 长文本溢出，展开/收起如何实现
- 在页面关闭时执行方法，该如何做 {#p3-page-close-exe
- 大文件切片上传的时候，确定切片数量的时候，有那些考量因素
- 移动端如何实现下拉滚动加载（顶部加载）
- （电梯导航）该如何实现
- 如何在划词选择的文本上添加右键菜单（划词：鼠标滑动选择一组字符， 对组字符进行操作）
- 富文本里面， 是如何做到划词的（鼠标滑动选择一组字符， 对组字符进行操作）
- 扫码登录？
- 不同标签页或窗口间的 【主动推送消息机制】 的方式有哪些？
- 虚拟列表
- 一次性渲染十万条数据还能保证页面不卡顿
- 下载进度
- 手写创建一个 ajax 请求
- 如何检测网页空闲状态(一定时间内无操作)
- 手写 dom 分段渲染
- 不使用 setTimeout 来实现 setInterval
- 如何拦截 web 应用的请求
- web 网页如何禁止别人移除水印
- 如何实现大文件断点续传
- 如何通过设置失效时间清除本地存储的数据？
- 如何判断dom元素是否在可视区域
- 移动端如何实现上拉加载，下拉刷新？
- 使用 ajax 封装一个上传文件的函数
- ajax 取消请求
- （Ant Design）的 Tooltip 组件是如何实现的
- 如何优化大规模 dom 操作的场景
- 如何实现网页加载进度条？
- 前端如何实现截图？
- 文件上传和上传文件解析的原理是啥？
3.node
2.npm
- commonjs 规范
- commonjs 模块化中 module.exports 与 exports 有什么区别
- package.json 配置了解多少？
- npm
- package.json 依赖申明的方式有哪些， 他们有何却别
- package.json 里面，表示导出包内容的配置有哪些
- 说一下你对 npm hook 的理解
- npm workspaces 是什么概念， 主要是解决什么问题
- pnpm install 和 npm install 有何区别
- monorepo 工程有哪些工具架构， 该如何选型
- 141 如何组织 monorepo 工程？
- 幽灵依赖是什么
- pnpm、npm、yarn 特性
- npx 了解多少？
- npm lock 文件了解多少？
- npm script 了解多少？
4.css
4.布局系统
- display
- display:none和visibility:hidden的区别？
- CSS定位有哪些方式？
- 什么是Flexbox布局？
- 什么是Grid布局？
- CSS定位有哪些方式？
- 什么是CSS浮动？
- 什么是CSS层叠上下文？
- 什么是CSS Grid布局？
- 什么是CSS Flexbox布局？
- CSS 如何实现固定长宽比的元素
- css 如何实现分栏布局
- 有哪些清除浮动的技术，都适用哪些情况？
- 重置 css 和标准化 css 的区别?你会选择哪种?为什么?
- 瀑布流布局
- 栅格布局是什么，如何实现
- css 中 三栏布局的实现方案 的实现方案有哪些？
- Flex 布局有哪些属性？
- Grid 布局有哪些属性？
- CSS 选择器优先级如何计算？
- 媒体查询
- z-index: 999 元素一定会置于 z-index: 0 元素之上吗
- position 属性
- 885 如何做静态资源预加载【热度: 696】
- float
- custom-property
- display属性有哪些常用值？
- display:none和visibility:hidden有什么区别？
- break 用在什么场景？
9.编码题
- 水平垂直居中
- 如何实现页面文本不可选中，不可复制
- 三角形 border
- CSS3实现卡片翻转?
- 常见布局实现
- 实现阿拉伯数字转中文
- 实现 table header 吸顶
- CSS 文档流 是什么概念？
- CSS 中 position 常见属性有哪些，大概讲一下？
- 未知高度和宽度元素的水平垂直居中的方案有哪些？
- CSS 中隐藏元素的方法有哪些?
- css 实现打字机效果
- css 实现翻牌效果
- 全局样式命名冲突和样式覆盖问题怎么解决？
- CSS 如何实现文本溢出？
- 实现页面顶部， 自定义滚动进度条样式
- css 隐藏元素的方法有哪些
- H5 如何解决移动端适配问题
- 实现 table header 吸顶， 有哪些实现方式？
- CSS 文档流 是什么概念？
- CSS 中 position 常见属性有哪些，大概讲一下？
- 未知高度和宽度元素的水平垂直居中的方案有哪些， 简单手写一下？
5.react
1.核心概念
- 什么是 JSX?
- JSX 支持哪些功能？
- 什么是 Virtual DOM, 它的作用是什么?
- Elements 和 Components 有什么区别？
- 什么是 ReactNode 它和 Element 的区别是什么？
- 什么是高阶组件 (Higher-Order Components HOC) ？
- state 和 props 区别是什么
- 什么是 Context 如何使用?
- 什么是渲染属性(render props) ?
- 什么是 React Hooks，它解决什么问题？
- 什么是 Reconciliation?
- 什么是 合成事件(synthetic event) ，它有什么作用?
- React Fiber 是什么，解决什么问题?
- React 中纯函数的概念是什么？
- React 和 Vue 有什么区别？
2.组件
- 构建组件的方式有哪些?
- 类组件继承 Component 和 PureComponent 有什么区别？
- 类组件 和 Function Components 的区别？
- 受控和非受控组件区别?
- React 有哪些内置组件？
- 说一下 Suspense 和 lazy 的使用场景？
- createPortal 了解多少？
- 说一下 ViewTransition 的使用 ?
- 组件生命周期
- 父组件如何调用子组件的方法?
- react 组件通信方式
- 请求在哪个阶段发出，如何取消请求？
- jsx 返回 null undefined false true 区别？
- JSX 如何渲染 HTML 注释节点 ？
- React.Children.map 和 props.children 的区别
- setState() 是同步还是异步？？
- react 中的 key 有什么作用
- react 中如何引入样式
3.钩子
- React 内置了哪些 hooks ?
- 说一下 useState 的使用？
- 说一下 useRef？
- useReducer 的作用，和 useState 有什么区别？
- 说一下 useEffect?
- useLayoutEffect 和 useEffect 有什么区别?
- useCallback 和 useMemo 有什么区别，如何使用？
- useContext 的作用是什么 ？
- useReducer 和 useState 有什么区别？
- useInsertionEffect 有什么用？
- useActionState 和 useFormStatus 有什么区别?
- useDeferredValue 和 useTransition 的区别?
- useImperativeHandle 的作用?
- useSyncExternalStore 的作用?
- useOptimistic 的作用?
- useId 的作用?
- useDebugValue 的作用?
8.vue
3.组件
- Vue 的组件有哪些类型?
- 组件生命周期?
- 组件包含哪些核心选项？
- 什么是单文件组件, 如何使用？
- 有用过 `<script setup>` 吗, 它和 option 方式有什么区别？
- `<style scope>` 是怎么做的样式隔离的
- 什么是函数组件，和 JSX、渲染函数有什么关系？
- JSX 和采用单文件组件编写有哪些区别？
- 什么是异步组件，是如何实现的？
- 组件通信策略和方法有哪些？
- Vue 有哪些内置组件?
- Teleport 组件功能？
- KeepAlive 组件功能？
- component 元素了解么，它是如何实现动态挂载的？
- 讲解一下插槽的使用？
- 了解 Vue 组件的整个渲染流程么，如何处理挂载和更新的？
- Vue3 是怎么实现 template 支持多个根节点的？
- Vue 的 DOM diff 算法是如何实现的？
- SFC 是如何处理的
- 你是如何编写一个组件的？
9.engineering
6.性能
- 性能优化策略
- 如何监控卡顿
- 常用性能指标
- 为什么传统上利用多个域名来提供网站资源会更有效？
- 采用什么工具查找性能问题?
- 如何改善网站滚动性能?
- 你如何对网站的文件和资源进行优化？
- 浏览器同一时间可以从一个域名下载多少资源,有什么例外吗？
- 总结
- 解释 layout,painting,compositing
- css 动画和 js 动画优缺点?
- 请说出三种减少页面加载时间的方法
- 什么是 domain pre-fetching 它如何帮助性能?
- 说一下 Performance API
- 如何计算页面首屏时间
- 如何计算页面白屏时间
- 有哪些前端性能分析工具
- 动画性能如何检测
- 需要详细记录多个操作链路的性能耗时，进行结构化场景分析，该如何做
- 统计全站每一个静态资源加载耗时， 该如何做
- 如何统计用户 pv 访问的发起请求数量（所有域名的）
- 可有办法判断用户的网络条件, 判断网速快慢，网络状态？
- PerformanceObserver 如何测量页面性能
- 如何统计页面的 long task
- 浏览器对队头阻塞有什么优化？
- 图片进行优化？
- css加载会造成阻塞吗
- SPA首屏加载速度慢的怎么解决
- 如何优化 DOM 树解析过程
- 常见图片懒加载
- react 优化
- dom 渲染能使用 GPU 加速吗？
- canvas 性能为何会比 html/css 好？
11.编译器和打包器 / webpack
- 有用过 webpack 或其他打包工具么，它们有什么特点解决什么问题？
- webpack 的主要配置项有哪些
- module、chunk 、output 的区别
- loader 和 plugin 是什么，有什么区别, 用过哪些 loader 和 plugin
- 如何写一个 loader
- 如何写一个 plugin ？
- webpack 原理
- webpack 输出的 bundle 是如何实现加载顺序不影响运行的
- 了解 tapable 么？
- webpack 优化
- 说下异步加载
- tree-shaking
- sideEffects 属性的作用是啥
- webpack externals 是如何加载外部依赖的
- DllPlugin
- webpack5 Module Federation
- webpack热更新原理是什么？
- webpack-dev-server 的功能
- source map 配置和原理
9.杂项
- seo
- eslint 该如何配置
- eslint 有哪些实用的插件， 该如何配置
- slint 如何集成到 webpack
- 如何定制化开发一个 eslint 插件， 功能是实现提示检验某一个项目里面的字符串error
- 请解释什么是 ARIA 和屏幕阅读器 (screenreaders)，以及如何使网站实现无障碍访问 (accessible)?
- Polyfill 和 shim ？
- corejs 是做什么用的
- 描述 seo 的最佳实践或你最近使用的技术
- 什么是 FOUC (无样式内容闪烁)？你如何来避免 FOUC？
- 请谈谈你对网页标准和标准制定机构重要性的理解?
- 日志监控：如何还原用户操作流程
- source map 可有办法将请求的调用源码地址包括代码行数也上报上去
- 如何做国际化？
- 站点如何防止爬虫？
- SemVer（Semantic Versioning）
- 如何在前端团队快速落地代码规范
11.typescript
12.编程范式
1.面向对象
- 什么是面向对象编程（OOP）？它与函数式编程有何区别？
- JavaScript 中的对象和类是如何定义的？请举例说明
- 什么是继承，JavaScript 中的继承机制的实现方式？
- 什么是访问控制， JavaScript 中如何实现访问控制？
- 什么是多态？JS 实现多态有哪些方式？
- 什么是组合？JS 实现组合有哪些方式？
- 什么是 SOLID 原则？
- 什么是依赖注入？它和依赖倒置原则原则区别是什么，在实际开发中如何使用？
- 什么是设计模式？为什么在开发中使用设计模式？
- 解释以下创建型模式单例模式、工厂模式、建造者模式、抽象工厂模式的区别，说明实际开发中如何使用？
- 解释以下结构型模式适配器模式、装饰器模式、外观模式，说明实际开发中如何使用？
- 解释以下行为型模式观察者模式、策略模式、命令模式、状态模式，说明实际开发中如何使用？
- 解释职责链模式，说明实际开发中如何使用？
13.operate-system
14.network
4.http
- http 基本流程
- 常见的请求头和响应头
- http 缓存控制
- http 缓存 header 中的 Date 与 Last-Modified 有什么不同
- http 缓存中 no-cache 与 no-store 的区别是什么 「
- http content-type
- ETag
- http 向 https 做重定向应该使用哪个状态码
- 什么是跨域资源共享 (CORS)？它用于解决什么问题？
- cookie
- 站点是如何保持登录状态
- session
- http1、2、3区别
- url 的长度限制
- ajax 工作原理？
- JSONP原理,回调过程？
- 状态码
- 请描述以下 request 和 response headers?
- 什么是 HTTP method？请罗列出你所知道的所有 HTTP method，并给出解释?
- http 请求中 GET 和 POST 有什么区别
- http 中 CSP 是什么
- 如何从 http1.1 迁移到 http2 ?
- http1.1 的 keep-alive 和 http2 的多路复用 有什么区别？
- http2 多路复用
- http2 中的首部压缩是什么
- 为何 http2 非常快速的就过度到了 HTTP3 ？
- http3 有哪些核心的新特性
- https
- https 层可以做哪些性能优化
- TLS 和 SSL 分别是什么，有何区别
- HTTPS 安全协议
- 重定向
- 如果在网络带宽一定的情况下， 切片上传感觉和整体上传， 消费的时间应该是差不多的。 这种说法正确吗
- http 中 HSTS 是什么
- 什么是正向代理，反向代理
- 数字证书了解多少
- 浏览器对队头阻塞有什么优化？
15.interview
3.通用问题
- 当和上级或同事意见不同时如何处理?
- 有什么问题问我? ⭐️⭐️⭐️⭐️⭐️
- 你最近遇到过什么技术挑战？你是如何解决的？⭐️⭐️⭐️⭐️⭐️
- 你通过哪些方式获取前端的学习资源？⭐️⭐️⭐️⭐️⭐️
- 在制作一个网页应用或网站的过程中，你是如何考虑其 UI、安全性、高性能、SEO、可维护性以及技术因素的？ ⭐️⭐️⭐️
- 说一下你熟悉的版本控制系统? ⭐️⭐️⭐️
- 描述一下你编写一个页面的工作流程？ ⭐️⭐️⭐️
- 是否有设计过通用的组件？ ⭐️⭐️⭐️⭐️⭐️
- 你昨天和上周学了什么？ ⭐️
- 编写代码的哪些方面能够使你兴奋或感兴趣？ ⭐️
- 如果今年你打算熟练掌握一项新技术，那会是什么？
- 是否细心
- 最得意的项目是什么?
- 组件的实践经验,复用性?