周陆军博客

Appearance

On this page

网站常问问题 ​

更多链接 ​

目录 ​

网络请求 ​

介绍网络7层架构

介绍协议:IP/ICMP/ARP/TCP/UDP/FTP/SFTP/DNS/TELNET/NFS/SMTP/SLIP/PPP/HTTP/HTTPS

url的组成

从输入一个 URL 地址到浏览器完成渲染的整个过程

介绍强制缓存和协商缓存，相关header和功能

TCP三次握手/HTTP请求过程。TCP 为什么是三次握手，而不是两次或四次？

http状态码和使用场景

websocket与http区别

get/post区别。form-data与x-www-form-urlencoded区别

https请求过程(单向认证，双向认证，两者区别)。Diffie-Hellman密钥交换算法。为什么数据传输是用对称加密？

中间人攻击与防范

重排与重绘区别

普通script/defer/async区别

$ajax的实现，fetch与$ajax/xhr区别

同源策略。实现跨域的方法。JSONP原理。

关闭TCP连接四次挥手过程。为什么是四次挥手,不是三次挥手？

XSS/CSRF/SSRF攻击与防范

介绍CSP内容安全策略

CDN加速原理

正向代理与反向代理区别

OAuth2.0授权场景与实现思路

JWT

同样是重定向，307，303，302的区别？

TCP粘包是怎么回事，如何处理?为什么udp不会粘包？

短轮询、长轮询、SSE 和 WebSocket 间的区别？

html ​

src和href的区别

DOCTYPE(⽂档类型) 的作⽤? 严格模式与混杂模式如何区分？它们有何意义?

script标签中defer和async的区别

常⽤的meta标签有哪些

img的srcset属性的作⽤？

HTML5的离线储存怎么使用，它的工作原理是什么

Canvas和SVG的区别

浏览器乱码的原因是什么？如何解决？

渐进增强和优雅降级之间的区别

Unicode、UTF-8、UTF-16、UTF-32的区别

DOM, DOCUMENT, BOM, WINDOW 区别

css ​

垂直水平居中方法

三角形实现

什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？

px、em、rem的区别及使用场景

flexible原理

高清屏实现真正1px

响应式页面实现方法

less和sass区别

box-sizing中border-box与content-box区别

css 的渲染层合成是什么?浏览器如何创建新的渲染层?

display的block、inline和inline-block的区别。行内元素、块级元素布局规则。css把行内元素变为块级元素的方法。清除浮动的方式和原理

元素的层叠顺序，position的属性有哪些，区别是什么，对 sticky 定位的理解

隐藏元素的方法。display:none与visibility:hidden的区别

transition 和 animation 的区别

css 优先级是怎么计算的?

position 有哪些值，作用分别是什么?

内联元素之间空白节点的成因和解决办法(幽灵空白节点)

单行、多行文本溢出隐藏

对Flex布局的理解及其使用场景

js ​

如何绑定事件?绑定同一元素的执行顺序。绑定层叠元素的执行顺序。冒泡与捕获区别。如何阻止冒泡？介绍事件委托,有什么好处?自定义事件实现。

js的数据类型。变量储存形式--堆栈理解。有了基本类型为什么还要包装类型？什么是装箱和拆箱？介绍隐式调用与隐式转换。

set/weakset/map/weakMap的区别

浏览器事件循环机制。宏任务与微任务的执行顺序。xhr回调/fetch/requestAnimationFrame属于什么任务？浏览器和node的事件循环区别。

setTimeout和setInterval回调中代码执行时间超过指定等待时间，会怎样？

setinterval回调执行时间略小于等待时间，会怎样？连续执行如何解决？

setTimeout和setInterval延时设为0，会怎样？

apply/call/bind区别

闭包的含义与作用。let与var区别。垃圾回收机制。闭包如何造成内存泄漏？内存泄漏监控与解决方法。

严格模式与普通模式区别

LocalStorage/SessionStorage/indexdb/Cookie/Session区别

getBoundingClientRect.top/scrollHeight/clientHeight区别

ES6比ES5有哪些新语法？

MutationObserver与IntersectionObserver区别

blob的使用场景。Blob与ArrayBuffer区别。base64编解码的方法

iframe使用场景。优缺点。复制页面通信方法。

介绍常见的设计模式。观察者模式与发布订阅模式区别。

HLS和DASH区别

FontBoosting的形成原因和解决方法

说一下 web worker

escape、encodeURI、encodeURIComponent 的区别

常见的DOM操作有哪些

ts ​

ts与js区别

ts的数据类型

interface与type区别

ts常用属性与作用

动画 ​

矩阵等数学原理在动画中的作用，四元数与旋转的关系

三维场景需要的最基础的构成

canvas旋转

css动画属性关键字和用法

js动画和css动画优缺点以及适用场景

raf和其他达到60fps的方法

性能优化:节流、restore

怎样在移动端处理加载问题，渲染性能问题？

如何结合native能力优化性能？

如何排查性能问题。对chrome动画、3d、传感器调试

搭建过整套资源加载优化方案，能说明白整体方案的各个细节，包括前端、客户端、服务端分别需要实现哪些功能点、依赖哪些基础能力，以及如何配合。

设计并实现过前端动画引擎，能说明白一个复杂互动项目的技术架构，知道需要哪些核心模块，以及这些模块间如何配合。

有自己实现的动画相关技术方案产出，这套技术方案必须是解决明确的业务或技术难点问题的。为了业务快速落地而封装一个库，不算这里的技术方案。如果有类似社区方案，必须能从原理上说明白和竞品的差异，各自优劣，以及技术选型的原因。

场景 ​

6x7的日历

数据双向绑定

图片懒加载

文件切片上传

大文件切片并行下载

长列表优化

活动倒计时

页面复制文字时自动加版权

微信扫码登录

找到当前页面出现次数最多的HTML标签

页面有哪些通信方式。B 页面正常关闭，如何通知 A 页面?B 页面意外崩溃，又该如何通知 A 页面

禁用外链

禁用控制台

实现刮刮卡

老虎机数字滚动实现

拖拽上传

SPA优化首屏加载时间

单点登录

判断元素是否到达可视区域

效率 ​

代码规范与提交规范

单元测试与自动化测试

codeReview

自动部署与持续集成方案

项目脚手架搭建，及如何以工具形态共享。

数据埋点与错误监控方案。UV/PV/用户停留时间/首屏时间/白屏时间/可见哦户时间TTI统计。Navigator.sendBeacon和xhr哪个更好？

浏览器识别

npm依赖包版本号~和^的区别

介绍package.json常用字段

切换nodejs版本和npm镜像源

babel工作原理

CommonJS/AMD/UMD/ES6 Module区别

为什么：每个模块文件上存在 module，exports，require三个变量，然而这三个变量是没有被定义的，但是我们可以在 Commonjs 规范下每一个 js 模块上直接使用它们？

require大致流程。require如何避免重复加载?require如何避免循环引用?

为什么 exports={} 直接赋值一个对象就不可以呢？必须exports.xxx=***

既然有了 exports，为何又出了 module.exports ?

与 exports 相比，module.exports 有什么缺陷 ？

webpack 与 grunt、gulp 的不同

webpack中Loader 和 Plugin 的不同。有哪些常见的 Loader？有哪些常见的 Plugin？描述一下编写 loader 或 plugin 的思路

webpack运行原理

webpack 的构建流程

如何利用 webpack 来优化前端性能？Tree Shaking原理

项目依赖同一npm包的多版本，会有冲突吗?项目依赖了[email protected]版本。 然后我又引入了B，而B依赖[email protected]版本，这时候会产生冲突吗？

webpack热更新原理

vite与webpack的不同。vite运行和热更新原理

查看代码覆盖率

页面性能优化

Serverless理解

低代码理解

灰度发布

mock方案的通用性、场景覆盖度，以及代码或工程侵入程度。

git进行项目管理有哪些命令？

vue ​

常见的事件修饰符及其作用

v-if与v-show区别

自定义指令的使用和运行原理

vue各生命周期的作用与源码实现

vue双向数据绑定原理

vue与jquery区别

vue-router运行原理。 history 和 hash 两种路由方式的特点。Vue-router跳转和location.href有什么区别

路由懒加载原理

vue组件通信方法

vuex运行原理

style 中 scoped 的作用。深层选择器样式穿透编译原理。

method 与 computed 区别

vue-loader 原理。Vue模版编译原理。

data为什么是一个函数而不是对象？

子组件为什么不可以修改父组件传递的Prop？

v-model是如何实现双向绑定？v-model 可以被用在自定义组件上吗？如果可以，如何使用？

v-for为什么需要key属性？循环不用index为key？dom diff原理。对虚拟DOM的理解？为什么要用虚拟DOM？虚拟DOM的解析过程。

函数式组件与普通组件的区别

Vue3任意传送门Teleport原理

nextTick使用场景和原理

Vue.extend作用和原理

如何实现路由按需加载

如何进行权限管理

slot是什么？有什么作用？原理是什么？

对keep-alive的理解，它是如何实现的，具体缓存的是什么？

$nextTick 原理及作用

Vuex 用途

Vuex中action和mutation的区别

为什么 Vuex 的 mutation 中不能做异步操作？

Redux 和 Vuex 有什么区别

Vue3.0有什么更新？defineProperty和proxy的区别。vue3有什么新特性？diff上的优化

react ​

react数据绑定原理

setState为什么是异步的、什么时候是异步的？能不能同步，什么时候是同步的？调用 setState 之后发生了什么？

react组件通信

Redux主要解决什么问题?redux原理。redux 为什么要把 reducer 设计成纯函数？与vuex/Mobx的不同

Redux 中异步的请求怎么处理?

Redux 中间件是什么？接受几个参数？柯里化函数两端的参数具体是什么？

Redux 请求中间件如何处理并发?

Redux中的connect有什么作用?

fiber作用。渲染流程。diff算法。与vue比较

高阶组件理解

hook原理。Hooks 解决了哪些问题？

为什么"不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们"?

为什么 useState 要使用数组而不是对象?

useEffect 与 useLayoutEffect 的区别

immutable原理和使用场景。vue是否需要immutability?

React.Component 和 React.PureComponent 的区别

React.createClass和extends Component的区别

哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？

React声明组件有哪几种方法，有什么不同？对有状态组件和无状态组件的理解及使用场景。React中什么是受控组件和非控组件？

React中的props为什么是只读的？props改变时更新组件的有哪些方法？怎么检验props？验证props的目的是什么？

React 废弃了哪些生命周期？为什么？

React-Router的实现原理

Link 标签和 a 标签的区别

props.children和React.Children的区别

React的严格模式如何使用，有什么用处？

为什么 React 要用 JSX？React必须使用JSX吗？只用JavaScript是否可以？jsx到javascript的转换过程

angular ​

angular 双向数据绑定原理

rxjs 与 axios 区别

angular组件通信方法

组件和指令的区别

生命周期钩子与用途

Observable与Promise区别

ssr ​

服务器端渲染与单页面应用区别

vue-server-renderer实现原理

nuxt运行过程。nuxt请求到渲染过程。asyncData与fetch区别

nuxt路由生成策略

介绍nuxt缓存机制

nuxt优化

nuxt部署

nodejs ​

Express和Koa框架中间件有什么不同?compose函数实现原理

express中app.get、app.use、app.all的区别

express中response常用方法

nodejs垃圾回收gc机制。GC调优

deno和nodejs区别

node单线程对多核 CPU 使用不足的解决方法。spawn、exec、execFile、fork区别

Node模块机制。为什么每个模块都有__dirname,__filename 属性？exports.xxx=xxx 和 Module.exports={}有什么区别？

node调试方法

node性能检测

混合 ​

uniapp/taro/hippy/RN/Flutter/Kotlin/原生对比

jsBridge是如何做到h5和原生应用的交互?MessageHandler 是什么？

iOS端uiwebview与wkwebview差异；webview资源加载优化方案；webview池管理方案；native路由

uniapp/微信小程序/spa/普通网页的区别

uniapp编译为微信小程序原理。相关文件类型差别

taro编译为微信小程序原理。

微信小程序应用/页面生命周期

bindtap/catchtap区别

rpx换算

页面通讯

性能优化

微前端应用场景与优缺点

为什么不使用iframe做微前端？

qiankun运行流程

沙箱区别:legacySandBox、proxySandBox、snapshotSandBox

qiankun通信方法。Action和Shared的优缺点

electron主进程和渲染进程通信方法。渲染进程之间通信方法

后端 ​

消息队列场景与实现

数据库读写分离。为什么不直接全部用redis存储呢？同步策略

SQL分页

SQL索引原理

数据库查询优化与数据库性能优化

锁的应用场景。悲观锁、共享锁、排他锁、乐观锁、CAS与synchronized、分布式锁、锁降级

线程池作用/使用场景。线程池配置越多越好吗？线程池数量太小会怎样？CPU 密集型 与 I/O 密集型 区别

获取系统并发用户数

高并发处理中缓存、降级、限流技术

外部排序

GraphQL应用场景，与Mysql区别

10万条数据批量插入

智力 ​

只有两个无刻度的水桶，一个可以装6L水，一个可以装5L水，如何在桶里装入3L的水。(本质就是利用两个水桶的已知容量倒来倒去，问题的解法并不唯一。)

25匹马，5个赛道，每次只能同时有5匹马跑，最少比赛几次选出最快的马？

1000瓶药水里面只有1瓶是有毒的，毒发时间为24个小时，问需要多少只老鼠才能在24小时后试出那瓶有毒。(需要老鼠的数量为log_2 1000)

烧一根不均匀的绳，从头烧到尾总共需要1个小时。现在有若干条材质相同的绳子，问如何用烧绳的方法来计时一个小时十五分钟呢?(要知道绳子可以从两头烧)

一共12个一样的小球， 其中只有一个重量与其它不一样(未知轻重)，给你一个天平，找出那个不同重量的球？(采用分治的思想)

你有两个罐子，50个红色弹球，50个蓝色弹球，如何将这100个球放入到两个罐子，随机选出一个罐子取出的球为红球的概率最大？(1/0+49/50,1/2 * 1 + 1/2 * 49 /（49+50）=0.75)