03 2022 档案
摘要：描述 普通script标签会阻塞dom解析，致浏览器必须加载并且执行脚本，之后才能继续解析，一些耗时操作会让页面出现白屏，而defer属性和async属性能够消除解析阻塞，并行请求脚本。 差异 存在async属性的脚本会并行请求，并尽快解析和执行，不保证顺序； 存在defer属性的脚本会阻塞DOMC
阅读全文
摘要：缓存术语 命中：在缓存中找到数据； 不命中/穿透：在缓存中未找到数据； 命中率：命中次数/总次数； 强缓存 Cache-Control用于在 http 请求和响应中，通过指定指令来实现缓存机制。 可选值 可缓存性： public：所有方可以缓存； private：只有浏览器可以缓存； no-cach
阅读全文
摘要：原生表单 前端 原生表单需要设置 3 个属性： action属性，即提交地址； method属性指定表单提交请求类型； get post put delete ... enctype属性指定表单提交内容类型； application/x-www-form-urlencoded：默认值 multipa
阅读全文
摘要：一些常见头部 Content-Length：发送的 body 内容长度（字节），存在 请求头 和 响应头 一个 byte 是 8bit UTF-8 编码的字符 1-4 个字节（所以不能确定里面到底有多少个字符）； User-Agent：帮助区分客户端特性的字符串，存在 请求头 操作系统； 浏览器；
阅读全文
摘要：虽然大部分开发都没有严格遵守这套规则，但还是记录一下。 1xx：提供信息 100 continue； 101 switch protocol（切换协议，例如：websockey）； 2xx：成功 200 OK 201 Created 已创建，更多和 post 请求一起； 202 Accepted 已
阅读全文
摘要：URL 同一资源定位符，也称网址。 DNS (Domain Name System) 域名系统 DNS 查询：将 host(域名) 解析为 IP 地址。 解析过程 本机 host 文件； 本地服务商：有则返回记录，无则请求根服务器； 根服务器（Root server）：不保存具体记录，返回该地址对应
阅读全文
摘要：简介 类似 OSI 模型，一种网络协议概念模型 应用层：提供应用间通讯能力； 传送层：提供主机对主机（host-to-host）传输，TCP/UDP 协议，端口 网络层：提供地址到地址（ip-to-ip）传输； IP 协议 -链路层：设备对设备传输（mac-to-mac）传输； 物理层：光电信号传输
阅读全文
摘要：开放式系统互联通信参考模型（英语：Open System Interconnection Reference Model，缩写为 OSI），简称为 OSI 模型（OSI model），一种概念模型，由国际标准化组织提出，一个试图使各种计算机在世界范围内互连为网络的标准框架。 应用层：用户数据 展示层
阅读全文
摘要：如何用纯 css 实现页面滚动停靠效果 效果图 以前要实现页面滚动停靠效果需要借助 js 来操作 dom，类似于fullpage.js插件，现在纯 css 也能做到同样的事。 scroll-snap-type scroll-snap-type 属性定义元素容器的滚动方式。该属性不能作用于body标签
阅读全文
摘要：window.__POWERED_BY_QIANKUN__ = true; let module = null; export const registerMicroApps = (apps = []) => { const _pushState = history.pushState; histo
阅读全文
摘要：传统方式 监听 scroll 事件，调用指定元素 getBoundingClientRect 方法，再判断元素是否在视口内；如果是嵌套滚动，则需要多级监听，多级判断，计算量很大，可能影响性能。 (function () { const target = document.querySelector(
阅读全文
摘要：前置知识 对象：location、history ； 事件：popstate、hashchange 作为前端路由，路由操作一定不能刷新页面，这一点很重要！ hash 路由 原理 修改 location.hash 值（页面不会刷新），如果修改前后值不一致，则往 history 中增加一条记录；当 ha
阅读全文
摘要：手写代码 function Promise(executor) { const self = this; self.state = 'pending'; self.data = undefined; self.resolvedCb = []; self.rejectedCb = []; functi
阅读全文
摘要：根据我的个人理解，与实际有偏差 术语 Promise 是一个拥有 then 方法的对象或函数； thenable 是一个定义了 then 方法的对象或函数； value 指任何 JavaScript 的合法值（包括 undefined , thenable 和 promise）； exception
阅读全文
摘要：Generator 生成器函数，返回一个迭代器对象，可以手动调用 next 方法来控制执行，throw 方法抛出错误，return 方法来提前结束，也可以使用 for...of 自动遍历遍历。 function* gen() { yield 1; yield 2; yield 3; } let g
阅读全文
