随笔分类 - 前端
全栈工程师都普及了，你还在学前端？还是赶紧和咱签订契约变成魔法少女吧！
摘要：今天看面试题看到了这个新名词。。我以前是没有发现过这种状况，应该是我一直都是将加载 CSS 的 link 标签写到 head 里的缘故吧。# 什么是文档样式闪烁（Flash Of Unstyled Content）？我的理解是先渲染了 DOM 然后加载 CSS，因为 CSS 样式的使用遵循层叠的原理，因此 DOM 元素就会多次赋予不同的样式，非常鬼畜。产生的途径可能因为 1. 加载 CSS 的位置...
阅读全文
摘要：# gzip# Brotli比 gzip 压的还厉害> - [How To Enable GZIP & Brotli Compression for Nginx on Linux - Computing for Geeks](https://computingforgeeks.com/how-to-enable-gzip-brotli-compression-for-nginx-on-linu...
阅读全文
摘要：# 请求协议## 请求行：request_line请求数据的第一行，用来说明当前请求的最基本信息。 GET /index.php?p=back HTTP/1.1CRLF由三块组成：1. 方式资源地址（没有域名）2. 协议版本3. `\r\n`（回车换行 CRLF）## 请求头：request_header浏览器需要传输给服务器的属性数据 - 主机，请求的主机。用于标识一台 web...
阅读全文
摘要：# 1. 创建证书进入要建立 HTTPS 服务的目录```bashopenssl genrsa -out key.pem 1024openssl req -new -key key.pem -out csr.pemopenssl x509 -req -in csr.pem -signkey key.pem -out cert.pem```# 2. 启动服务```bashhttp-server -S...
阅读全文
摘要：当发送 GET 请求时浏览器会检查该资源的缓存信息，并决定是否发送 HTTP 请求。如果需发送请求则根据响应决定是否使用原缓存，或不使用原缓存并设置新缓存。# 浏览器处理 HTTP 缓存流程（简化版）## 请求阶段- 该资源是否有缓存？ - 有缓存： - 该资源 `Cache-Control`或`Expires` 是否过期？ - 未过期：直...
阅读全文
摘要：# 1xx Informational（信息）## 100 Continue（继续）## 101 Switching Protocols（交换协议）切换 WebSocket 时，响应状态码，eg： "request": { "bodySize": 0, "method": "GET", "url": "WebSocket URL", "httpVers...
阅读全文
摘要：# DOM Level 0Events：绑定到 DOM 的属性上，找不到官方文档DOM0 是在 W3C 进行标准备化之前出现的，实际上是未形成标准的试验性质的初级阶段的 DOM。```jsvar tdiv = document.createElement('div');// 绑定事件tdiv.onclick = function(d){console.log('click tdiv!')}// 手...
阅读全文
摘要：- Fetch 请求默认是不带 Cookie 的，需要设置 fetch(url, {credentials: 'include'})- 服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。[传统 Ajax 已死，Fetch 永生 - 会影 - SegmentFault 思否](https://segmentfaul...
阅读全文
摘要：[tc39/proposal-hashbang: #! for JS](https://github.com/tc39/proposal-hashbang)某些奇怪的报错可能是因为系统不支持 Shebangs / Hashbang 导致的。貌似 Node.js 已经支持这个新特性了，使用[fork](https://nodejs.org/api/child_process.html#child_p...
阅读全文
摘要：解决：window.open 后设置关闭当前页面 window.opener = null
阅读全文
摘要：# 普通`` 没有 `defer` 或 `async`，浏览器会立即加载并执行指定的脚本，“立即” 指的是在渲染该 `script` 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。# `async``` 有 `async`，加载和渲染后续文档元素的过程将和 `script.js` 的加载与执行并行进行（异步）。# `defer``` 有 `defer`，加载后续文档元...
阅读全文
摘要：iframe：# iframe 内容加载后不改变使用：`onload="this.height=this.contentWindow.document.documentElement.scrollHeight"`例如：```html Document 自适应高度 非自适应高度 ```# iframe 内容加载后改变定时改变 iframe 高度：```jssetInterval(()...
阅读全文
摘要：# 回车和换行JSON 无法处理回车和换行，例如下面的语句会报错```jsJSON.parse({ a: "\r" });```- `\r`: `\x0D`回车 CR (Carriage Return)- `\n`: `\x0A`换行 LF (Line Feed)# JSON.stringify 出现：Converting circular structure to JSON```js//...
阅读全文
摘要：# 背景最近需要改点 neo4j-browser 的代码做个 demo，分析初始化时运行命令的代码时花了很多时间，记录一下。# 目的找出 dispatch `SINGLE_COMMAND_QUEUED` action 的地方。PS: 要是会 [redux-observable](https://redux-observable.js.org/), [Redux](http://github.co...
阅读全文
摘要：JS 使用 IEEE 754 的双精度数表示数字，1 位符号，10 位指数，53 位底数。所以 JS 数字精度近似为 15.95 位 10 进制（`10 ** 15.95`）。也就是说整部加小数部分超过 15 位再用 Number 类型就不合适了，可以使用 JS 的[BigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Re...
阅读全文
摘要：Object 的 key 是排过序的，但这个 Object 的 key 的排序和数组下标不同是有限制的，我在 Node.js（Chrome V8 引擎）测试 Object 的 key 只有在小于`2^32 - 1`时才会排序。要保证 Object 的 key 的顺序的话可以先获取可枚举属性然后排序，参见：[Object.entries() - JavaScript | MDN](https://d...
阅读全文
摘要：# 安装依赖```bashnpm i simplebig```# Node.js 代码```jsconst fs = require("fs");const path = require("path");const S = require("simplebig");// 要转换的文件夹const dirPath = "./test";// 要转换的文件的后缀const extWhiteList =...
阅读全文
摘要：感觉原型真是 JS 中非常复杂的一环。看 MDN 的文档某些地方也不是写的很清楚，下面写一些我对于原型的理解，如有错误望大家指出。感觉`prototype`和`[[Prototype]]`挺容易混的，看 ES 的文档时也是在看到`prototype.constructor`时很蒙。根据我的经验`prototype`一般只有构造函数（函数）有，毕竟她可以创建对象（实例），其他对象，数组，字符串什么的...
阅读全文
摘要：# 栈、堆和队列- 栈：函数调用形成栈- 堆：对象的内容分配在堆中- 队列：一个 JavaScript 运行时包含了一个待处理的消息队列。在事件循环期间依次处理队列中的消息# 事件循环> 之所以称之为事件循环，是因为它经常按照类似如下的方式来被实现：```jswhile (queue.waitForMessage()) { queue.processNextMessage();}``...
阅读全文
摘要：# 一：为私有变量创建`get()`方法这种方式可以创建 “伪” 只读属性。这并不是一种好方法，因为使用_函数_获得只读的_属性_不太符合一般的逻辑。```js/** * Represent a used car. * * @constructor */function Car() { var SELF = this, odometer = 0; /** * Increment th...
阅读全文
浙公网安备 33010602011771号