Nanyin の 小屋

浏览器架构Chrome 多进程架构 浏览器进程: 地址栏，书签，回退与前进按钮，以及处理 web 浏览器中网络请求、文件访问等不可见的部分 渲染进程: 控制标签页内网站渲染 插件进程: 控制站点使用的任意插件，如 Flash GPU 进程: 处理独立于其它进程的 GPU 任务 多渲染进程带来的优势 稳定性: 一般情况下，浏览器会给每个标签页分配一个渲染进程，从而保证每个标签页能独立运行，互不影响。但由于受设备的内存及 CPU 能力影响，当 Chrome 运行时达到限制时，会开始在同一站点的不同标签页上运行同一进程 沙箱化: 限制与保护进程的特定权限与能力 浏览器内核 内核即 Rendering Engine，渲染引擎，负责对网页语法的解析，比如 HTML、JavaScript，并渲染到网页上 排版渲染引擎 KHTML: HTML 网页排版引擎之一，由 KDE 所开发。后来经苹果扩展开源，衍生出 WebCore 及 WebKit 引擎 WebCore: 如 Safari 浏览器 内核引擎 Trident: IE Gecko: Firefox WebKit: 诞生于...

前言 浏览器插件，简单理解为一段脚本文件。通过 WEB 技术，结合 chrome 提供的相关 api，制作集成为一个可供浏览器直接运行的扩展程序。通常需要以下几个文件 manifest.json: 插件的配置文件，定义插件的基本信息和权限 background.js: 插件的后台脚本，负责执行后台任务 popup.html: 用户点击插件图标时显示的界面 style.css: 用于美化插件界面的样式表 开始制作 参考 官网 manifest.json manifest_version: manifest 的版本，2 或者 3，浏览器会根据这个值去指定该版本拥有的功能。必须 name: 名称。必须 version: 版本。必须 icons: 图标集合 16: 扩展程序页面和上下文菜单中的图标 32: Windows 计算机通常需要此大小 48: 显示在 “扩展程序” 页面上 128: 会在安装过程中和 Chrome 应用商店中显示 action: 浏览器行为 default_popup: 点击扩展程序的操作图标时在弹出式窗口中显示的 HTML...

开发一款设置 vsCode 背景图片的插件 准备 参照 VSC 官方文档, 安装相关依赖 如果打包工具选择 esbuild, 可能会报错 problemMatcher 引用无效: $esbuild-watch, 此时安装插件 esbuild Problem Matchers 重新调试即可 12345# 脚手架npm install -g yo generator-code# 运行yo code 调试成功界面 关键 API window.createStatusBarItem: 创建底部状态栏按钮 window.registerWebviewViewProvider: 创建侧边 webview 图标按钮 window.showInformationMessage: 信息展示相关方法 window.onDidChangeActiveColorTheme: 监听主题变化 window.createQuickPick: 创建快捷选项列表 commands.registerCommand: 注册指令 commands.executeCommand:...

前置准备初始化 安装 node, 建议 16 以上的版本 新建一个文件夹，npm init 初始化，并在 package.json 文件中添加 bin 字段声明命令，指向命令执行的 js 文件 1234567891011121314{ "name": "ny-cli", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", ...

变量变量类型 int: 二进制 (0b100); 八进制 (0o100); 十六进制 (0x100); 十进制 (100) float: 数学写法 (123.456); 科学计数法 (1.23456e2) str: ‘’; “” bool: True; False 变量命名 惯例 1：受保护的变量通常用单个下划线开头 惯例 2：私有的变量通常用两个下划线开头 操作变量方法 type(a): 检查类型 <class 'int'> iint(): 将一个数值或字符串转换成整数，可以指定进制 float(): 将一个字符串转换成浮点数 str(): 将指定的对象转换成字符串形式，可以指定编码方式 chr(): 将整数转换成对应的字符串 ord():...

基础请求 - 请求标头 - 报文主体 基础请求：url | method | dest 请求标头：配置 + 拦截器 => 权限、身份 Accept - 请求内容的期望格式类型 text/ html: HTML 格式 / plain: 纯文本格式 / xml: XML 格式 image/ gif: gif 格式 / jpeg: 图片格式 / png: png 格式 video/ mpeg / quicktime application/ xhtml+xml / atom+xml / json / pdf / msword / x-www-form-urlencoded Accept-Encoding - 期望返回内容被压缩 gzip, deflate, br，表示请求的返回希望被压缩，减少网络流量，提升性能。需要服务端支持，响应头中 Content-Encoding：gzip Accept-Language - 浏览器所支持的语言 => 国际化、多语言包 zh 表示中文，zh-cn 表示简体中文；en、fr Connection - TCP...

promise 描述 promise 框架 - 规范 promise 有哪些状态？对应值有哪些 - pending、fulfilled、rejected new Promise 执行器 executor()，执行器参数是？ - resolve、reject promise 的默认状态是？promise 状态的流转？ - 默认 pending，pf，pr promise，value 保存成功状态的枚举？- undefined/thenable/promise promise，失败状态值？- reason 保存失败 描述 promise 接口 promise 一定会有 then，then 接收来源，两个回调 onFulfilled(value) +...

箭头函数与普通函数区别 箭头函数 this 不可修改（call、apply、bind），在定义时决定：指向外层第一个普通函数。 不能被 new 没有 prototype 没有 arguments new 一个箭头函数 会报错，提示： function is not a constructor; babel 编译时，会把 this 转成 (void 0); 哪些不能用箭头函数 arguments yield 构造函数的原型方法上 1234567891011121314151617181920const Person = function (age, name) { this.age = age; this.name = name; const obj = { 0: 18, 1: "luyi", 2: "teacher", 3: "esnext" }; console.log(arguments.callee); obj.length = 4; ...

作用域及作用域链 规定变量和函数的可使用范围称作作用域 当访问一个变量时，编译器在执行这段代码时，会首先从当前的作用域中查找是否有这个标识符，如果没有找到，就会去父作用域查找，如果父作用域还没找到继续向上查找，直到全局作用域为止,，而作用域链，就是有当前作用域与上层作用域的一系列变量对象组成，它保证了当前执行的作用域对符合访问权限的变量和函数的有序访问。 在特定的场景下，特定范围内，查找变量的一套规则 一般情况下特指：词法作用域、静态作用域 一般是代码层面上的 作用域链：内部可以访问外部的变量，反之不行 变量提升机制 分类 全局作用域 函数作用域 ：在函数内声明的所有变量，在函数体内是始终可见的，可以再整个函数范围内复用 块作用域 ：是一个用来对之前的最小授权原则进行扩展的工具，将代码在函数中隐藏信息扩展为在块中 eval 作用域 优先级：声明变量 > 声明普通函数 > 参数 > 变量提升 123456789101112131415161718192021222324function Foo() { getName =...

面向对象 —— 逻辑迁移更加灵活、代码复用性高、高度的模块化 构造函数原型 实现 js 的面向对象。一个能面向对象的语言必须要做到：能判定一个实例的类型。原型的存在避免了类型的丢失。 new 不支持对象共享属性和方法，原型支持 函数拥有 prototype，对象拥有 __proto__ 原型链 作用：让某一个构造函数实例化的所有对象可以找到公共的属性和方法 每个对象都有一个原型，并从原型上继承属性和方法。原型本身也是一个对象，也有自己的原型，形成一个链式结构 把原型串联起来，最顶端是 null 查找规则 对象本身 ==> 构造函数 ==> 对象原型 ==> 构造函数原型 ==> 对象上一层原型 12345678910111213function Fun() { this.a = "查找第二步";}Fun.prototype.a = "查找第四步";let obj = new Fun();obj.a = "查找第一步";obj.__proto__.a =...