1.html
10.browser-performance
- 性能优化策略
- 如何监控卡顿
- 常用性能指标
- 为什么传统上利用多个域名来提供网站资源会更有效？
- 采用什么工具查找性能问题?
- 如何改善网站滚动性能?
- 你如何对网站的文件和资源进行优化？
- 浏览器同一时间可以从一个域名下载多少资源,有什么例外吗？
- 总结
- 解释 layout,painting,compositing
- css 动画和 js 动画优缺点?
- 请说出三种减少页面加载时间的方法
- 什么是 domain pre-fetching 它如何帮助性能?
- 说一下 Performance API
- 如何计算页面首屏时间
- 如何计算页面白屏时间
- 有哪些前端性能分析工具
- 动画性能如何检测
- 需要详细记录多个操作链路的性能耗时，进行结构化场景分析，该如何做
- 统计全站每一个静态资源加载耗时， 该如何做
- 如何统计用户 pv 访问的发起请求数量（所有域名的）
- 可有办法判断用户的网络条件, 判断网速快慢，网络状态？
- PerformanceObserver 如何测量页面性能
- 如何统计页面的 long task
- 浏览器对队头阻塞有什么优化？
- 图片进行优化？
- css加载会造成阻塞吗
- SPA首屏加载速度慢的怎么解决
- 如何优化 DOM 树解析过程
- 常见图片懒加载
- react 优化
- dom 渲染能使用 GPU 加速吗？
- canvas 性能为何会比 html/css 好？
6.webapi-storage
- XMLHTTPRequest 对象
- XHR 和 Fetch 是否支持取消请求
- ajax fetch
- getComputedStyle用法?
- 解释 cookies session storage local storage 的区别 ?
- IntersectionObserver api?
- ResizeObserver 作用是什么
- HTML5的离线储存怎么使用，工作原理能不能解释一下？
- Cookie和Session区别？
- 如何批量触发多个请求
- Long-Polling、Websockets 和 Server-Sent Event 之间有什么区别？
- 为何现在主流的图表库都是用的 canvas 方案， 而不是使用 svg， 是基于什么因素考量的呢
- canvas 是如何处理复杂事件交互的
- 介绍一下 URLSearchParams API
- 剪切板方法
- localStorage 是同步还是异步
- 如何判断页签是否为活跃状态
- 如何判断用户设备
- navigator.sendBeacon
- dom.contains
- MutationObserver
- drag
- documentFragment api 是什么， 有哪些使用场景
- requestIdleCallback api
- scrollIntoView api
- postmessage
- SSE
- 浏览器的存储有哪些
- IndexedDB 存储空间大小是如何约束的？
- 为何现在市面上做表格渲染可视化技术的，大多数都是 canvas ， 而很少用 svg 的？
- 跨页面通信方式？
- 原生 js 如何进行监听路由的变化
- History API
- requestAnimationFrame
- escape、encodeURI、encodeURIComponent 区别
- Service Worker 是如何缓存 http 请求资源的？
3.elements
- 说一下 HTMl 下有哪些元素
- meta
- HTML5 中 meta 标签作用是啥
- header 的作用
- 请解释 `<script>、<script async> 和 <script defer>` 的区别
- 为什么通常推荐将 CSS `<link>` 放置在 `<head></head>` 之间，而将 JS `<script>` 放置在 `</body>` 之前？你知道有哪些例外吗？
- html 元素类型
- iframe
- 页面导入样式时，使用link和@import有什么区别？
- a 标签保存文件
- HTML 中的 input 标签有哪些 type
- link 标签有 那些属性，作用都是啥？
- web components 了解多少
8.browser-rendering
- 输入 url 到渲染
- 浏览器架构
- html5有哪些新特性移除了那些元素？
- 如何处理HTML5新标签的浏览器兼容问题？
- 如何区分 HTML 和 HTML5?
- url 解析到渲染过程分析?
- 如何构建 DOM Tree 的
- 常见浏览器内核有哪些，有什么区别
- repaint 和 reflow 区别
- 如何避免重拍和重绘
- 浏览器主要组成部分
- 宏任务和微任务
- 事件循环原理?
- 如何实现浏览器内多个标签页之间的通信?
- 常见的浏览器内核有哪些？
- jS 浏览器事循环有哪些使用案例
- 什么是文档的预解析
- 浏览器有读写能力吗？
- 浏览器缓存中 Memory Cache 和 Disk Cache， 有啥区别？
- 浏览器 和 Node 事件循环有区别吗？
- 浏览器渲染进程了解多少？
- gc
- dom tree
- css parser
2.typescript
3.js
5.object
- 原型链？
- 解释一下 原型、构造函、实例、原型链 之间的关系
- 原始封装类型
- 对象的可变和不可变
- 深拷贝和浅拷贝区别?
- instanceof 的使用
- 手写实现四种继承
- Object
- Object.create 实现原型继承
- hasOwnProperty 与 instanceof 区别
- array
- 类数组转换成数组的方法有哪些
- promise
- iterator
- js 编写数组排序
- 找出匹配的数组
- Set
- es6 generator
- Map
- let const var 区别
- WeakSet
- WeakMap
- Proxy
- Reflect
- Reflect.get() 和直接通过对象 [.] 访问获取属性， 有何区别
- getter setter
- Object.keys 与 Object.getOwnPropertyNames() 有何区别
- Javascript 数组中有那些方法可以改变自身，那些不可以
- 防止对象被篡改有哪些方式
- JS 创建对象的方式有哪些？
- 数字千分位
- url 查询字段解码
9.coding
- debounce
- throttle
- 实现 call 或 apply 方法?
- 实现 bind
- 深拷贝和浅拷贝
- 实现 loadash get
- async await 原理， 手写 async 函数？
- 检测对象循环引用
- 实现一个处理长字符串的函数
- 统计前端请求耗时
- 1如何判定一个属性来自于对象本身， 还是来自于原型链
- 创建一个禁止修改的对象， 只能通过指定方法去修改属性
- 洗牌算法
- 铺平嵌套数组
- 判断一个对象是否为空，包含了其原型链上是否有自定义数据或者方法。 该如何判定
- cookies 解析函数， 输出结果为一个对象
- 实现并发异步调度器
- JS 执行 100 万个任务， 如何保证浏览器不卡顿？
- 实现一个 sum 函数，支持任意个参数的累加，在 console.log 时输出结果？
- 实现日期格式化 format 函数
- 实现一个函数， 计算两个日期之间的天数差
- 实现 map 函数
- JS 中数组深对比实现
- JS 中如何实现大对象深度对比
- 根据 path 来解析数组，生成多维度的数组对象
- 如何封装一个请求，让其多次调用的时候，实际只发起一个请求的时候，返回同一份结果
- 实现管道函数
- 模拟new操作
- 手写实现 instanceof
- 手写实现 Object.create
- 实现一个缓存函数
- 使用 Promise 实现一个异步流量控制的函数(限制并发数)
- 手写 JSON.stringify 和 手写 JSON.parse 实现
- 如何将JavaScript代码解析成抽象语法树(AST)
- 如何做 promise 缓存？上一次调用函数的 promise 没有返回， 那么下一次调用函数依然返回上一个 promise
- 数字千分化的实现方式有哪些？用代码实现一下
- 集合运算
- chain-call
- this指向与对象继承数组方法：输出以下代码执行的结果并解释为什么？
- =下面代码中 a 在什么情况下会打印 1 ?
- 手写订阅-发布模式
- ['1', '2', '3'].map(parseInt) 结果是啥，为什么？
- promise.allSettled
- 手写代码实现 promise.all
- 手写代码实现 promise.race
- setObjectValue(obj: object, keys: string[], value: any) 方法， 支持安全设置对象的值
- Promise finally 怎么实现的？
- 如何判断一个数值是整数，实现 isInteger
- Promise.all
- 限制并发的 Promise
- async await 原理，手写 async 函数?
4.css
5.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 了解多少？
6.react
1.component
- 构建组件的方式有哪些
- 为什么 react 组件， 都必须要申明一个 `import React from 'react';`
- react 中如何引入样式
- Class Components 和 Function Components 的区别？
- 组件生命周期
- 父组件调用子组件的方法
- react 组件通信方式
- 请求在哪个阶段发出，如何取消请求
- 受控和非受控组件区别?
- 什么是高阶组件 (Higher-Order Components HOC) ？
- 错误边界组件如何使用
- jsx 返回 null undefined false 区别
- React.Children.map 和 props.children 的区别
- state 和 props 区别
- setState() 是同步还是异步？？
- react 中的 key 有什么作用
- createPortal 了解多少？
- Portals 作用是什么， 有哪些使用场景？
- createElement
- cloneElement 的使用
- forwardRef 的使用
- react 类组件中哪些要保持为纯函数，为什么
7.vue
3.component
- Vue 的组件有哪些类型?
- 组件生命周期?
- 组件包含哪些核心选项？
- 什么是单文件组件, 如何使用？
- 有用过 `<script setup>` 吗, 它和 option 方式有什么区别？
- 什么是函数组件，和 JSX、渲染函数有什么关系？
- JSX 和采用单文件组件编写有哪些区别？
- 什么是异步组件，是如何实现的？
- 组件通信策略和方法有哪些？
- Vue 有哪些内置组件?
- Teleport 组件功能？
- KeepAlive 组件功能？
- component 元素了解么，它是如何实现动态挂载的？
- 讲解一下插槽的使用？
- 了解 Vue 组件的整个渲染流程么，如何处理挂载和更新的？
- Vue3 是怎么实现 template 支持多个根节点的？
- Vue 的 DOM diff 算法是如何实现的？
- SFC 是如何处理的
- 你是如何编写一个组件的？
8.hybird
10.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 是什么
- 什么是正向代理，反向代理
- 数字证书了解多少
11.engineering
4.bundler-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 配置和原理
13.other
- seo
- eslint 该如何配置
- eslint 有哪些实用的插件， 该如何配置
- slint 如何集成到 webpack
- 如何定制化开发一个 eslint 插件， 功能是实现提示检验某一个项目里面的字符串error
- 请解释什么是 ARIA 和屏幕阅读器 (screenreaders)，以及如何使网站实现无障碍访问 (accessible)?
- Polyfill 和 shim ？
- corejs 是做什么用的
- 描述 seo 的最佳实践或你最近使用的技术
- 什么是 FOUC (无样式内容闪烁)？你如何来避免 FOUC？
- 请谈谈你对网页标准和标准制定机构重要性的理解?
- 日志监控：如何还原用户操作流程
- source map 可有办法将请求的调用源码地址包括代码行数也上报上去
- 如何做国际化？
- 站点如何防止爬虫？
- SemVer（Semantic Versioning）
- 如何在前端团队快速落地代码规范
10.monitoring
- 性能优化策略
- 如何监控卡顿
- 常用性能指标
- 为什么传统上利用多个域名来提供网站资源会更有效？
- 采用什么工具查找性能问题?
- 如何改善网站滚动性能?
- 你如何对网站的文件和资源进行优化？
- 浏览器同一时间可以从一个域名下载多少资源,有什么例外吗？
- 总结
- 解释 layout,painting,compositing
- css 动画和 js 动画优缺点?
- 请说出三种减少页面加载时间的方法
- 什么是 domain pre-fetching 它如何帮助性能?
- 说一下 Performance API
- 如何计算页面首屏时间
- 如何计算页面白屏时间
- 有哪些前端性能分析工具
- 动画性能如何检测
- 需要详细记录多个操作链路的性能耗时，进行结构化场景分析，该如何做
- 统计全站每一个静态资源加载耗时， 该如何做
- 如何统计用户 pv 访问的发起请求数量（所有域名的）
- 可有办法判断用户的网络条件, 判断网速快慢，网络状态？
- PerformanceObserver 如何测量页面性能
- 如何统计页面的 long task
- 浏览器对队头阻塞有什么优化？
- 图片进行优化？
- css加载会造成阻塞吗
- SPA首屏加载速度慢的怎么解决
- 如何优化 DOM 树解析过程
- 常见图片懒加载
- react 优化
- dom 渲染能使用 GPU 加速吗？
- canvas 性能为何会比 html/css 好？
12.operate-system
13.paradigm
1.oop
- 什么是面向对象编程（OOP）？它与函数式编程有何区别？
- JavaScript 中的对象和类是如何定义的？请举例说明
- 什么是继承，JavaScript 中的继承机制的实现方式？
- 什么是访问控制， JavaScript 中如何实现访问控制？
- 什么是多态？JS 实现多态有哪些方式？
- 什么是组合？JS 实现组合有哪些方式？
- 什么是 SOLID 原则？
- 什么是依赖注入？它和依赖倒置原则原则区别是什么，在实际开发中如何使用？
- 什么是设计模式？为什么在开发中使用设计模式？
- 解释以下创建型模式单例模式、工厂模式、建造者模式、抽象工厂模式的区别，说明实际开发中如何使用？
- 解释以下结构型模式适配器模式、装饰器模式、外观模式，说明实际开发中如何使用？
- 解释以下行为型模式观察者模式、策略模式、命令模式、状态模式，说明实际开发中如何使用？
- 解释职责链模式，说明实际开发中如何使用？
14.interview
3.normal
- 当和上级或同事意见不同时如何处理?
- 有什么问题问我? ⭐️⭐️⭐️⭐️⭐️
- 你最近遇到过什么技术挑战？你是如何解决的？⭐️⭐️⭐️⭐️⭐️
- 你通过哪些方式获取前端的学习资源？⭐️⭐️⭐️⭐️⭐️
- 在制作一个网页应用或网站的过程中，你是如何考虑其 UI、安全性、高性能、SEO、可维护性以及技术因素的？ ⭐️⭐️⭐️
- 说一下你熟悉的版本控制系统? ⭐️⭐️⭐️
- 描述一下你编写一个页面的工作流程？ ⭐️⭐️⭐️
- 是否有设计过通用的组件？ ⭐️⭐️⭐️⭐️⭐️
- 你昨天和上周学了什么？ ⭐️
- 编写代码的哪些方面能够使你兴奋或感兴趣？ ⭐️
- 如果今年你打算熟练掌握一项新技术，那会是什么？
- 是否细心
- 最得意的项目是什么?
- 组件的实践经验,复用性?
15.coding
3.index
- 长列表渲染解决方案?
- 写一个幻灯片效果
- 实现两个可以拖曳的节点连线
- 实现文本溢出 popover 效果
- 前端如何快速获取页面 url query 参数
- 主题切换
- 查找页面出现次数最多的 HTML 标签
- 实现一个缓存函数
- 大文件上传
- 前端需要加载一个大体积的文件时， 一般有哪些优化思路
- 计算一段文本渲染之后的长度
- 长文本场景，中间显示省略号..., 两端正常展示
- 要实时统计用户浏览器窗口大小，该如何做
- 如何实现鼠标拖拽
- 长文本溢出，展开/收起如何实现
- 在页面关闭时执行方法，该如何做 {#p3-page-close-exe
- 大文件切片上传的时候，确定切片数量的时候，有那些考量因素
- 移动端如何实现下拉滚动加载（顶部加载）
- （电梯导航）该如何实现
- 如何在划词选择的文本上添加右键菜单（划词：鼠标滑动选择一组字符， 对组字符进行操作）
- 富文本里面， 是如何做到划词的（鼠标滑动选择一组字符， 对组字符进行操作）
- 扫码登录？
- 不同标签页或窗口间的 【主动推送消息机制】 的方式有哪些？
- 虚拟列表
- 一次性渲染十万条数据还能保证页面不卡顿
- 下载进度
- 手写创建一个 ajax 请求
- 如何检测网页空闲状态(一定时间内无操作)
- 手写 dom 分段渲染
- 不使用 setTimeout 来实现 setInterval
- 如何拦截 web 应用的请求
- web 网页如何禁止别人移除水印
- 如何实现大文件断点续传
- 如何通过设置失效时间清除本地存储的数据？
- 如何判断dom元素是否在可视区域
- 移动端如何实现上拉加载，下拉刷新？
- 使用 ajax 封装一个上传文件的函数
- ajax 取消请求
- （Ant Design）的 Tooltip 组件是如何实现的
- 如何优化大规模 dom 操作的场景
- 如何实现网页加载进度条？
- 前端如何实现截图？
- 文件上传和上传文件解析的原理是啥？