CodingWithAlice

我的一方小天地，如果对你有帮助，那真的太好了

12-1 内存泄漏

12-1 内存泄漏参考文章：深入了解内存泄漏核心要点记录： Chrome 工具：内存 Memory 录制监测内存泄漏：如果这段数据已经不再需要了，但是又没有销毁。几种垃圾回收机制：详情看上一篇垃圾回收机制，标记-清除、标记-整理等算法如何避免内存泄漏： 1、尽可能少地创建全局变量、少用闭包 2、...

Posted by CodingWithAlice on July 3, 2021

821. 字符的最短距离

821. 字符的最短距离题目：输入字符串 s 和字母 c，已知 c 在 s 中出现过。返回一个整数数组 answer ，其中 answer.length == s.length 且 answer[i] 是 s 中从下标 i 到离它最近的字符 c 的距离。备注：两个下标 i 和 j 之间的距离为 abs(i - j) ，其中 abs 是绝对值函数解答： ...

Posted by CodingWithAlice on July 2, 2021

Service worker

Service worker Service Worker 是一种在 Web 浏览器后台运行的脚本，它可以拦截和处理网络请求、实现离线缓存、推送通知等功能。注意：Service worker 中的代码是运行在渲染进程中的当访问一个 URL 开始时，网络线程会根据域名检查是否有 Service worker 会处理当前地址的请求，如果有，则 UI 线程会找到对应的渲染进程去执...

Posted by CodingWithAlice on July 2, 2021

给DOM元素绑定事件

给DOM元素绑定事件 1、利用 addEventListener 绑定【推荐】（DOM2）优点：『可以给同一个元素添加1个/多个事件』 button.addEventListener('click', handleClick); 现代浏览器已经很少使用以下两种 DOM0 的绑定事件的写法了 2、利用 HTML 属性 - onclick （DOM0）注意...

Posted by CodingWithAlice on July 1, 2021

前端路由的两种模式

前端路由的两种模式参考文章：hash模式和 history模式一、hash 模式 - 通过URL中的哈希值实现页面的路由切换，不需要服务端参与 // http://example.com/#/page1 -> #/page1 就是 hash值 - #后面的字符核心方法：『location.hash』特点：改变视图，但不会向后端发出请求，服务器不会接收到哈希值...

Posted by CodingWithAlice on July 1, 2021

事件流 + 事件模型

事件流 + 事件模型一、事件流事件捕获：与事件冒泡相反，事件最开始由不太具体的节点最早接受事件, 而最具体的节点最后接受事件 window -> document -> html -> body -> … 事件冒泡：从下往上的传播方式 - 事件最开始由最具体的元素然后逐渐向上传播到DOM中最高层的父节点二、事件模型通过监听函数对事件作出...

Posted by CodingWithAlice on July 1, 2021

69. x 的平方根

69. x 的平方根题目：计算并返回 x 的平方根，其中 x 是非负整数。由于返回类型是整数，结果只保留整数的部分，小数部分将被舍去。总结：逻辑是一样的，找到区间 [i, i+1) // 方法一：执行时长稍长，但内存占用小 function sqrt(x) { const mid = Math.floor(x/2) + 1; // 优化点，取 floor l...

Posted by CodingWithAlice on June 29, 2021

跨页面通信

跨页面通信两个页面之间的通信会涉及到同源策略的限制，所以按照是否满足同源策略的限制分成两大部分来看。『同源页面通信』： 1、广播式通信 - 监听同一频道 BroadcastChannel 『核心方法：频道.postMessage(‘a’) + 频道.onmessage = (e)=>{}』 2、localStorage - 只响...

Posted by CodingWithAlice on June 29, 2021

子盒子在父盒子中水平垂直居中有几种方法？

子盒子在父盒子中水平垂直居中有几种方法？ <head> <style> .father { width: 800px; height: 650px; } .child { width: 300px; height: ...

Posted by CodingWithAlice on June 29, 2021

CSS性能优化

CSS性能优化一、写法优化简化选择器：id选择器不用嵌套；减少 * 通配符、[hidden=‘true’] 属性选择器；利用继承机制，少写新类名【CSS 选择器是从右向左进行匹配的，避免匹配的开销】尽量避免重排：重新计算元素位置和几何结构减少使用昂贵属性 - 需要浏览器进行操作或计算的属性：box-shadow、border-radius、透明度、:nth-chil...

Posted by CodingWithAlice on June 28, 2021