![[奋斗]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_29.2801857.png)
都给我去看！！！
xxxlgloverd
获得徽章 0
#每天一个知识点# 26 网页重绘repaint和重排reflow有什么区别？
网页只要有变化就会有重绘和重排；
重排比重绘影响更大，消耗也更大，所以进行减少无意义的重排；
重绘repaint
元素外观改变，如颜色、背景色，但元素的尺寸、定位不变，不会影响其他元素的位置；
重排reflow
重新计算尺寸和布局，可能会影响其他元素的位置
如元素高度增加，可能会使相邻元素位置下移；
网页只要有变化就会有重绘和重排；
重排比重绘影响更大，消耗也更大，所以进行减少无意义的重排；
重绘repaint
元素外观改变，如颜色、背景色，但元素的尺寸、定位不变，不会影响其他元素的位置；
重排reflow
重新计算尺寸和布局，可能会影响其他元素的位置
如元素高度增加，可能会使相邻元素位置下移；
展开
评论
点赞
#每天一个知识点# 25 Vue React 为何循环时必须使用 key?
vdom diff 算法会根据 key 判断元素是否要删除
匹配了 key ，则只移动元素 -性能较好
未匹配key ，则删除重建-性能较差
vdom diff 算法会根据 key 判断元素是否要删除
匹配了 key ，则只移动元素 -性能较好
未匹配key ，则删除重建-性能较差
1
点赞
#每天一个知识点# 24移动端H5点击有300ms延迟，该如何解决?
背景：double tap to zoom (轻点两下缩放) fastclick (初期解决方案) width = device-width (标准协议解决，要做响应式 所以没有必要做300ms延迟)
window.addEventListener('load',function(){
FastClick.attach(document.body)
},false)
//FastClick原理
//监听touchend事件（touchstart touchend 会先于click 触发）
//使用自定义DOM事件模拟一个click事件
//把默认的click事件（300ms之后触发）禁止掉
背景：double tap to zoom (轻点两下缩放) fastclick (初期解决方案) width = device-width (标准协议解决，要做响应式 所以没有必要做300ms延迟)
window.addEventListener('load',function(){
FastClick.attach(document.body)
},false)
//FastClick原理
//监听touchend事件（touchstart touchend 会先于click 触发）
//使用自定义DOM事件模拟一个click事件
//把默认的click事件（300ms之后触发）禁止掉
展开
评论
1
#每天一个知识点# 23浏览器和nodejs事件循环（EventLoop）有什么？
js 是单线程的（无论在浏览器还是nodejs）
浏览器中js执行和DOM渲染共用一个线程
异步
浏览器异步——宏任务和微任务
宏任务，如 setTimeout setInterval 网络请求
微任务，如 promise async/await
微任务在下一轮DOM渲染之前执行，宏任务在之后执行
nodejs异步——宏任务和微任务
Nodejs同样使用ES语法，也是单线程，也需要异步
异步任务也分：宏任务 + 微任务
但是，它的宏任务和微任务，分不同类型，有`不同优先级
nodejs 宏任务类型和优先级(高到低)
Timers - setTimeout setInterval
V/O callbacks - 处理网络、流、TCP 的错误回调
Idle, prepare- 闲置状态（nodejs 内部使用）
Poll 轮询 -执行 poll 中的I/0队列
Check 检查 - 存储 setimmediate 回调
Close callbacks - 关闭回调，如 socket.on('close' )
nodejs 微任务类型和优先级
包括：promise, async/await, process.nextTick
注意，process.nextTick 优先级最高
js 是单线程的（无论在浏览器还是nodejs）
浏览器中js执行和DOM渲染共用一个线程
异步
浏览器异步——宏任务和微任务
宏任务，如 setTimeout setInterval 网络请求
微任务，如 promise async/await
微任务在下一轮DOM渲染之前执行，宏任务在之后执行
nodejs异步——宏任务和微任务
Nodejs同样使用ES语法，也是单线程，也需要异步
异步任务也分：宏任务 + 微任务
但是，它的宏任务和微任务，分不同类型，有`不同优先级
nodejs 宏任务类型和优先级(高到低)
Timers - setTimeout setInterval
V/O callbacks - 处理网络、流、TCP 的错误回调
Idle, prepare- 闲置状态（nodejs 内部使用）
Poll 轮询 -执行 poll 中的I/0队列
Check 检查 - 存储 setimmediate 回调
Close callbacks - 关闭回调，如 socket.on('close' )
nodejs 微任务类型和优先级
包括：promise, async/await, process.nextTick
注意，process.nextTick 优先级最高
展开
评论
1
#每天一个知识点# 22如何统一监听Vue组件报错？
1.window.onerror
全局监听所有JS错误
但它是JS级别的，识别不了Vue组件信息
捕捉一些Vue监听不到的错误,比如异步的报错
2.errorCaptured 生命周期 （App.vue）
监听所有下级组件的错误
返回false会阻止向上传播
监听要重要的、有风险的组件错误
3.errorHandler配置 (main.js)
Vue 全局错误监听，所有组件错误都会汇总到这里
但是errorCaptured 返回false，就不会传播到这里
和window.onerror 互斥
异步错误 无法捕获需要用window.onerror
Promise 未处理的catch需要 onunhandledrejection
1.window.onerror
全局监听所有JS错误
但它是JS级别的，识别不了Vue组件信息
捕捉一些Vue监听不到的错误,比如异步的报错
2.errorCaptured 生命周期 （App.vue）
监听所有下级组件的错误
返回false会阻止向上传播
监听要重要的、有风险的组件错误
3.errorHandler配置 (main.js)
Vue 全局错误监听，所有组件错误都会汇总到这里
但是errorCaptured 返回false，就不会传播到这里
和window.onerror 互斥
异步错误 无法捕获需要用window.onerror
Promise 未处理的catch需要 onunhandledrejection
展开
评论
点赞
#每天一个知识点# 21script标签的defer和async有什么区别?
无：HTML暂停解析，下载JS,执行JS,再继续解析HTML
defer：HTML继续解析，并行下载JS,HTML解析完再执行JS
async：HTML继续解析，并行下载JS,执行JS,再解析HTML
执行JS不能并行但是下载JS支持并行
无：HTML暂停解析，下载JS,执行JS,再继续解析HTML
defer：HTML继续解析，并行下载JS,HTML解析完再执行JS
async：HTML继续解析，并行下载JS,执行JS,再解析HTML
执行JS不能并行但是下载JS支持并行
展开
评论
点赞
#每天一个知识点# 20 JS严格模式有什么特点？
'use strict' 全局或者函数引入
全局变量必须先声明
禁止使用with
禁止this指向window
创建eval作用域
函数参数不能重名
'use strict' 全局或者函数引入
全局变量必须先声明
禁止使用with
禁止this指向window
创建eval作用域
函数参数不能重名
展开
评论
点赞
#每天一个知识点# 19如何实现网页多标签通讯
1.WebSocket
无跨域限制，需要服务端支持，成本高；
2.localStorage通讯
同域的A和B两个页面，A页面设置localstorage,B页面可监听到localstorage值的修改（addEventListener监听storage事件）
3.SharedWorker通讯
SharedWorker是WebWorker的一种，WebWorker可开启子进程执行JS,但不能操作DOM,SharedWOrker可单独开启一个进程，用于同域页面通讯(chrome隐私模式开启调试，不支持IE11)
1.WebSocket
无跨域限制，需要服务端支持，成本高；
2.localStorage通讯
同域的A和B两个页面，A页面设置localstorage,B页面可监听到localstorage值的修改（addEventListener监听storage事件）
3.SharedWorker通讯
SharedWorker是WebWorker的一种，WebWorker可开启子进程执行JS,但不能操作DOM,SharedWOrker可单独开启一个进程，用于同域页面通讯(chrome隐私模式开启调试，不支持IE11)
展开
评论
1
#每天一个知识点# 18 工作中遇到过哪些项目难点，如何解决的？
话术模板
描述问题：背景+现象+造成的影响
问题如何被解决：分析+解决
自己的成长：学到了什么+以后如何避免
话术模板
描述问题：背景+现象+造成的影响
问题如何被解决：分析+解决
自己的成长：学到了什么+以后如何避免
3
点赞
#每天一个知识点# 17 HTMLCollection和NodeList有什么区别？
HTMLCollection是Element的集合；
NodeList是Node的集合；
两者不是数组而是类数组；
类数组转换成数组
const arr1=Array.from(list);
const arr2=Array.prototype.slice.call(list)
const arr3=[…list]
HTMLCollection是Element的集合；
NodeList是Node的集合；
两者不是数组而是类数组；
类数组转换成数组
const arr1=Array.from(list);
const arr2=Array.prototype.slice.call(list)
const arr3=[…list]
展开
评论
点赞
#每天一个知识点# 16从输入URL 到网页显示的完整过程？
关键点：网络请求，解析,渲染
DNS查询（得到IP）,建立TCP连接（三次握手）
浏览器发起HTTP请求
收到请求响应，得到HTML源代码
解析HTML过程中，遇到静态资源还会继续发起网络请求，JS、CSS图片 视频等（静态资源有可能强缓存，此时不必请求）
HTML构建DOM树
CSS构建CSSOM树（style tree）
两者结合，形成render tree
解析优化有：CSS放在Head中，不要异步加载CSS,JS放在body最下面（或合理使用defer async）,img提前定义width height；
Render Tree绘制到页面，计算各个DOM的尺寸、定位最后绘制到页面,遇到JS可能会执行（参考defer async因为html和js共用一个线程），异步CSS、图片加载，可能会触发重新渲染；
网络请求：DNS解析，HTTP请求
解析：DOM树，CSSOM树，Render Tree
渲染：计算、绘制，同时执行JS
关键点：网络请求，解析,渲染
DNS查询（得到IP）,建立TCP连接（三次握手）
浏览器发起HTTP请求
收到请求响应，得到HTML源代码
解析HTML过程中，遇到静态资源还会继续发起网络请求，JS、CSS图片 视频等（静态资源有可能强缓存，此时不必请求）
HTML构建DOM树
CSS构建CSSOM树（style tree）
两者结合，形成render tree
解析优化有：CSS放在Head中，不要异步加载CSS,JS放在body最下面（或合理使用defer async）,img提前定义width height；
Render Tree绘制到页面，计算各个DOM的尺寸、定位最后绘制到页面,遇到JS可能会执行（参考defer async因为html和js共用一个线程），异步CSS、图片加载，可能会触发重新渲染；
网络请求：DNS解析，HTTP请求
解析：DOM树，CSSOM树，Render Tree
渲染：计算、绘制，同时执行JS
展开
评论
点赞
#每天一个知识点# 15 npm, yarn, pnpm 有什么区别
npm、yarn和 pnpm都是 JavaScript 包管理工具，用于管理和下载JavaScript依赖项。它们的主要区别在于以下几个方面：
乡性能：yarn 和pnpm相对于npm 来说更快。yarn
使用并行下载和缓存机制来提高性能，而pnpm则使用硬链接和符号链接来减少磁盘空问的使用。
安装依赖项的方式：npm 和yarn 都会将依赖项安
装在本地node_modules 文件夹中，而pnpm会将依
赖项安装在全局缓存中，并使用符号链接将其连接到
项目中。
一锁定依赖项版本的方式：npm使用 package-lock.json文件，yarn使用yarn.lock文件，而pnpm使用shrinkwrap.yaml文件。
必命令差异：虽然npm、yarn和 pnpm 都有类似的命令，但它们的一些命令略有不同。例如，安装依赖项的命令在npm中是“npm install”，在yarn中是
“yarn”，在pnpm中是“pnpm install”。
npm、yarn和 pnpm都是 JavaScript 包管理工具，用于管理和下载JavaScript依赖项。它们的主要区别在于以下几个方面：
乡性能：yarn 和pnpm相对于npm 来说更快。yarn
使用并行下载和缓存机制来提高性能，而pnpm则使用硬链接和符号链接来减少磁盘空问的使用。
安装依赖项的方式：npm 和yarn 都会将依赖项安
装在本地node_modules 文件夹中，而pnpm会将依
赖项安装在全局缓存中，并使用符号链接将其连接到
项目中。
一锁定依赖项版本的方式：npm使用 package-lock.json文件，yarn使用yarn.lock文件，而pnpm使用shrinkwrap.yaml文件。
必命令差异：虽然npm、yarn和 pnpm 都有类似的命令，但它们的一些命令略有不同。例如，安装依赖项的命令在npm中是“npm install”，在yarn中是
“yarn”，在pnpm中是“pnpm install”。
展开
1
1
#每天一个知识点# 14.遍历数组，for 和 forEach 哪个快？
时间复杂度都是O(n)，但是for比forEach更快一些，forEach 每次都要创建一个函数来调用，而for不会创建函数，函数需要独立的作用域，会有额外的开销。
时间复杂度都是O(n)，但是for比forEach更快一些，forEach 每次都要创建一个函数来调用，而for不会创建函数，函数需要独立的作用域，会有额外的开销。
评论
1
#每天一个知识点# 12 浏览器多个窗口共用同一个进程，而每个标签页加载网站都会创建单独的渲染进程。在electron中并不是每开一个窗口就创建一个进程，而是所有窗口都由electron主进程管理。
评论
点赞
#每天一个知识点# 11 TypeScript 5.2 将引入一个新的关键字 - 'using'，当它离开作用域时，你可以使用它来处理任何带有 [Symbol.dispose] 函数的东西。
评论
点赞