ssh
## 为什么需要监控？ web 的性能一定程度上影响了用户留存率，Google DoubleClick 研究表明：如果一个移动端页面加载时长超过 3 秒，用户就会放弃而离开。BBC 发现网页加载时长每增加 1 秒，用户就会流失 10%。 ## 监控什么？ google 开发者提出了一种 RAIL 模型来衡量应用性能，即：Response、Animation、Idle、Load，分别代表着 web 应用生命周期的四个不同方面。并指出最好的性能指标是：100ms 内响应用户输入；动画或者滚动需在 10ms 内产生下一帧；最大化空闲时间；页面加载时长不超过 5 秒。 ### first paint (FP) and...
## Window 视图属性 ### innerWidth 属性和 innerHeight 属性 innerWidth 表示获取 window 窗体的内部宽度，不包括用户界面元素，比如窗框。 ### outerWidth/outerHeight 表示整个浏览器窗体的大小，包括任务栏等。 ### pageXOffset 和 pageYOffset 表示整个页面滚动的像素值（水平方向的和垂直方向的）。 ### screenX and screenY 浏览器窗口在显示器中的位置，screenX 表示水平位置，screenY 表示垂直位置。  ## Screen...
如果 data 是 `{ data: { msg: 'Hello ' } }` 这种对象形式的话，在初始化 initData 的时候，会在这个对象上挂上一个 `new Obsever`， `Observer` 的形态是这样的： ``` { value: { data: { msg: 'Hello' } }, dep: new...
https://juejin.im/post/5dba5a39e51d452a2378348a ## 代码错误 `window.onerror` `window. onunhandledrejection` ## 资源加载错误 `object.onerror`：dom对象的onerror事件 `performance.getEntries()`： ```js var allImgs = document.getElementsByTagName('image') var loadedImgs = performance.getEntries().filter(i => i.initiatorType === 'img') ``` 最后 `allIms` 和 `loadedImgs` 对比即可找出图片资源未加载项目。 ##...
## SSL TLS 协议握手阶段 http://www.ruanyifeng.com/blog/2014/02/ssl_tls.html 总览： （1） 客户端向服务器端索要并验证公钥。 （2） 双方协商生成"对话密钥"。 （3） 双方采用"对话密钥"进行加密通信。 ### 1. 客户端发起请求（确认协议、算法） 客户端需要像服务端提供： （1） 支持的协议版本，比如 TLS 1.0 版。 （2） 一个客户端生成的随机数，稍后用于生成"对话密钥"。 （3） 支持的加密方法，比如 RSA 公钥加密。 （4） 支持的压缩方法。 ###...
https://developers.google.com/web/fundamentals/performance/http2 ## 二进制分帧层 HTTP/2 将所有传输的信息分割为更小的消息和帧，并采用二进制格式对它们编码。 ## 数据流、消息和帧 - 数据流：已建立的连接内的双向字节流，可以承载「多条消息」。 - 消息：与请求或响应对应的完整的「一系列帧」。 - 帧：HTTP2 通信的最小单位，帧会包含帧头，会标识出当前「所属的数据流」。 这些概念的关系总结如下： - 所有通信都在「一个 TCP 连接」上完成，此连接可以承载任意数量的「双向数据流」。 - 每个「数据流」都有一个唯一的「标识符」和可选的「优先级」信息，用于承载双向消息。 - 每条「消息」都是一条「逻辑 HTTP 消息」（例如请求或响应），包含「一个或多个帧」。 - 帧是最小的通信单位，承载着特定类型的数据，例如 HTTP 标头、消息负载等等。 来自不同数据流的帧可以交错发送，然后再根据每个帧头的数据流标识符重新组装。...
## XSS 攻击的类型 http://blog.poetries.top/browser-working-principle/guide/part6/lesson34.html XSS 全称是 Cross Site Scripting，为了与“CSS”区分开来，故简称 XSS，翻译过来就是“跨站脚本”。 ### 存储型 XSS 攻击 首先黑客利用站点漏洞将一段恶意 JavaScript 代码提交到网站的数据库中；然后用户向网 站请求包含了恶意 JavaScript 脚本的页面；当用户浏览该页面的时候，恶意脚本就会将用 户的 Cookie 信息等数据上传到服务器。 ### 反射型 XSS 攻击 黑客可能会把一段脚本藏在 url 中诱骗用户打开，然后服务端利用...
# Fiber https://juejin.im/post/5dadc6045188255a270a0f85 演讲 https://www.youtube.com/watch?v=ZCuYPiUIONs ## 结构 ```js export type Fiber = { // Fiber 类型信息 type: any, // ... // ⚛️ 链表结构 // 指向父节点，或者render该节点的组件 return: Fiber | null, //...
# 进程 http://blog.poetries.top/browser-working-principle/guide/part1/lesson01.html 1. 一个进程就是一个程序的运行实例。详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。 2. 当一个进程关闭之后，操作系统会回收进程所占用的内存。 3. 进程之间的内容相互隔离。如果需要通信，则要用到「进程间通信（IPC）」的机制。 # 线程 1. 线程是依附于进程的，而进程中使用多线程并行处理能提升运算效率。 2. 进程中的任意一线程执行出错，都会导致整个进程的崩溃。 3. 线程之间共享进程中的数据。 
给你 n 个非负整数 a1，a2，...，an，每个数代表坐标中的一个点 (i, ai) 。在坐标内 画 n 条垂直线，垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0)。找出其中的两条线， 使得它们与 x 轴共同构成的容器可以容纳最多的水。 说明：你不能倾斜容器，且 n 的值至少为 2。  ## 思路 这题利用双指针去做，i 指向最左边，j 指向最右边。当发现左边比较高的时候，保持左边...