{"componentChunkName":"component---src-templates-blog-index-js","path":"/","result":{"data":{"allMarkdownRemark":{"totalCount":35,"edges":[{"node":{"id":"527efad4-58c8-517f-ab75-ebe4b151ee84","timeToRead":1,"frontmatter":{"title":"","date":null,"spoiler":null,"tags":null},"fields":{"slug":"/learn-browser/exe/"},"excerpt":"js 代码是怎么执行的（先编译，再执行） JavaScript 代码执行过程中，需要先做变量提升，而之所以需要实现变量提升，是因为 JavaScript 代码在执行之前需要先编译。在编译阶段，变量和函数会被存放到变量环境中，变量的默认值会被设置为 undefined…"}},{"node":{"id":"2b552746-24c4-5152-a0e5-d8cc0e7b175a","timeToRead":1,"frontmatter":{"title":"","date":null,"spoiler":null,"tags":null},"fields":{"slug":"/learn-browser/gc/"},"excerpt":"垃圾回收 新生代（存放比较小，很快被回收）[副垃圾回收器] 经历两次新生代就放进老生区（对象晋升策略） Scavenge…"}},{"node":{"id":"1200d1d9-266e-5f87-98bf-b89ecce3ef9f","timeToRead":4,"frontmatter":{"title":"Why should we use pnpm?","date":"13 June, 2024","spoiler":null,"tags":["笔记"]},"fields":{"slug":"/pnpm/"},"excerpt":"npm 1/2 时代 http2针对头部字段，使用HPACK压缩算法，对请求头进行压缩。 磁盘空间占用：每个依赖都会安装自己的依赖，导致了大量的重复，特别是在多个包共享同一依赖的场景下 深层嵌套问题：这种嵌套结构在文件系统中造成了非常长的路径，然而大多数 Windows…"}},{"node":{"id":"337b371f-0f49-5701-8c20-4914307f3361","timeToRead":4,"frontmatter":{"title":"浏览器原理","date":"04 March, 2024","spoiler":null,"tags":["笔记"]},"fields":{"slug":"/learn-browser/"},"excerpt":"浏览器架构 通过对浏览器多进程架构的学习，可以把网络流程、页面渲染过程、JavaScript执行流程以及Web安全理论这些知识点串起来组成一张网。 单进程浏览器 Image text…"}},{"node":{"id":"3b2e00ca-38a9-5595-8de0-77bb65521b31","timeToRead":1,"frontmatter":{"title":"渲染流程","date":"04 March, 2024","spoiler":null,"tags":["文章"]},"fields":{"slug":"/learn-browser/render/"},"excerpt":"流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。"}},{"node":{"id":"bf301b95-fdda-5457-8487-276b276c1a13","timeToRead":3,"frontmatter":{"title":"一文了解深拷贝","date":"21 December, 2023","spoiler":null,"tags":["文章"]},"fields":{"slug":"/deep-clone/"},"excerpt":"JS 数据类型 开头先来复习下 JS 都有哪些数据类型 Undefined、Boolean、String、Number、Null、Symbol、BigInt 8 个基本类型和 1 个 Object…"}},{"node":{"id":"dd40c805-6e2f-516a-9e73-3caff1124121","timeToRead":1,"frontmatter":{"title":"颜色透明度16进制对照表","date":"15 October, 2021","spoiler":"dddddd","tags":["文章"]},"fields":{"slug":"/color-transparency-hexadecimal-comparison-table/"},"excerpt":"颜色透明度16进制对照表 100% — FF\n99% — FC\n98% — FA\n97% — F7\n96% — F5\n95% — F2\n94% — F0\n93% — ED\n92% — EB\n91% — E8\n90% — E6\n89% — E3\n88% — E0\n87% — DE…"}},{"node":{"id":"154bc0de-d616-55f0-a046-1dadd1295bd5","timeToRead":2,"frontmatter":{"title":"经典题目：从输入URL到页面呈现发生了什么","date":"18 August, 2021","spoiler":null,"tags":["文章"]},"fields":{"slug":"/classic-topic-what-happened-from-URL-input-to-page-rendering/index2/"},"excerpt":"chrome浏览器是多进程架构，最上层的是浏览器进程（标签页外面的一切都由浏览器进程处理），然后是实用程序进程、渲染进程、GPU进程、插件进程。 所以，当我们在地址栏输入aminer.cn 导航 浏览器进程下面的UI线程去绘制浏览器的按钮和地址栏 UI…"}},{"node":{"id":"7d73b695-7745-589e-8d45-195a07d4b7e8","timeToRead":3,"frontmatter":{"title":"一文搞懂this指向问题","date":"02 January, 2021","spoiler":null,"tags":["文章"]},"fields":{"slug":"/learn-about-the-problem-of-this-point/"},"excerpt":"在 printName 函数里面使用的变量 myName 是属于全局作用域下面的，所以最终打印出来的值都是“极客邦”。这是因为 JavaScript…"}},{"node":{"id":"8f485f44-fb60-55f7-bc9c-7022a78c1172","timeToRead":3,"frontmatter":{"title":"js隐式转换","date":"22 November, 2020","spoiler":null,"tags":["文章"]},"fields":{"slug":"/js-implicit-conversion/"},"excerpt":"在判断是否为空数组时，一种是对数组的length属性进行判断即可，第二种进行下图的判断 这就是js的隐式转换，但存在很多摸不清楚的状况，进行今天的学习，希望对js的隐式转换有所了解。 Js隐式转换规则 ToBoolean 只有false、null、undefined、空字符、…"}},{"node":{"id":"05cff866-a2f1-5a30-9fb3-9a2435fde108","timeToRead":5,"frontmatter":{"title":"JavaScript模块化总结","date":"07 October, 2020","spoiler":null,"tags":["文章"]},"fields":{"slug":"/javascript-modularization-summary/"},"excerpt":"什么是模块化？ 模块化是以提高代码复用率、减少代码管理的成本为核心思想的开发方式，一个模块有自己的私有作用域，只向外部暴露一些接口(方法，变量)，借此和其他模块进行通信，目前比较热门的js模块化规范：CommonJS、AMD、CMD以及ES6 Module。 CommonJS…"}},{"node":{"id":"80ec8ef9-5133-5ca5-8ac7-7b7121c00072","timeToRead":4,"frontmatter":{"title":"v8引擎垃圾内存回收机制","date":"11 August, 2020","spoiler":null,"tags":["文章"]},"fields":{"slug":"/garbage-collection-mechanism-of-v8-engine/"},"excerpt":"Js不会让程序员自己开辟或释放内存，而是有自己的一套垃圾回收算法，来进行自动的内存管理 V8内存限制 V8只能使用系统的一部分内存，具体来说，在64位系统下，V8最多只能分配1.4G, 在32位系统中，最多只能分配0.7G…"}},{"node":{"id":"b22f8f21-55a3-5754-9b6a-467619bb9537","timeToRead":2,"frontmatter":{"title":"经典题目：从输入URL到页面呈现发生了什么","date":"30 June, 2020","spoiler":null,"tags":["文章"]},"fields":{"slug":"/classic-topic-what-happened-from-URL-input-to-page-rendering/"},"excerpt":"网络世界 1.浏览器会构建HTTP请求编码\n2.DNS将域名解析为ip地址，浏览器也会提供DNS缓存，如果之前解析过这个域名，则直接命中缓存\n3.先查强缓存，命中直接使用缓存\n4.可能经过正向代理、反向代理、负载均衡、源服务器\n5.建立TCP…"}},{"node":{"id":"aeede517-c4f7-5185-8a70-8fb4f7b34ed1","timeToRead":4,"frontmatter":{"title":"浏览器缓存","date":"21 June, 2020","spoiler":null,"tags":["文章"]},"fields":{"slug":"/browser-cache/"},"excerpt":"概念扫盲： 1.浏览器缓存分为三个部分：强缓存 协商缓存 缓存位置 2.浏览器缓存分为两种情况：需要发送HTTP请求 不需要发送HTTP请求 强缓存 强缓存是不需要发送HTTP请求的，可通过相应的字段来进行：HTTP/1.0时期使用的是Expires，而HTTP/1.…"}},{"node":{"id":"a854508c-fa2c-5366-b114-06966f7f6445","timeToRead":2,"frontmatter":{"title":"什么是 XSS 攻击？如何防范 XSS 攻击 ？","date":"13 May, 2020","spoiler":null,"tags":["文章"]},"fields":{"slug":"/how-to-prevent-xss-attack/"},"excerpt":"XSS是什么？ XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。 XSS…"}},{"node":{"id":"e71628cc-6c70-5a99-8e30-15e502786042","timeToRead":2,"frontmatter":{"title":"什么是 CSRF 攻击？如何防范 CSRF 攻击 ？","date":"09 May, 2020","spoiler":null,"tags":["文章"]},"fields":{"slug":"/how-to-prevent-csrf-attack/"},"excerpt":"什么是CSRF攻击？ CSRF 攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被\n攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。 CSRF…"}},{"node":{"id":"90200b2f-1a44-5887-8c7f-a962699b4005","timeToRead":2,"frontmatter":{"title":"热门技术","date":"16 January, 2020","spoiler":null,"tags":["文章"]},"fields":{"slug":"/hot-technology/"},"excerpt":"作为一名前端小学生，底层的机制和知识，还没有学完，所以对上层的应用不能从根本上理解，比如以前没有接触过深度优先遍历和递归的概念，那么Vue中虚拟DOM整个patch.js的源码你是基本不可能看懂的。但了解下所从事的行业的热门技术也是必要的 Flutter Fultter…"}},{"node":{"id":"6d9b7695-f26a-5ab6-9127-c74b0a711521","timeToRead":1,"frontmatter":{"title":"了解js内存机制","date":"10 January, 2020","spoiler":null,"tags":["笔记"]},"fields":{"slug":"/learn-about-the-js-memory-mechanism/"},"excerpt":"分数据类型进行存储 基本数据类型用栈存储 boolean null undefined number string symbol bigint…"}},{"node":{"id":"8165f249-2e48-55d2-95b4-57fba590487c","timeToRead":3,"frontmatter":{"title":"强大的grid网格布局方案","date":"04 January, 2020","spoiler":null,"tags":["文章"]},"fields":{"slug":"/powerful-grid-layout-scheme/"},"excerpt":"概述 grid网格布局擅长将页面分为不同区域(网格)，控制各部分之间在大小，位置和层的不同方面的联系，可以做出各种各样的布局。 Grid布局与Flex布局 ？ Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex…"}},{"node":{"id":"0a93932d-62ec-5cb6-83f5-f957275aa791","timeToRead":2,"frontmatter":{"title":"理解css的z-index属性(层叠上下文)","date":"10 October, 2019","spoiler":null,"tags":["文章"]},"fields":{"slug":"/z-index-attribute-of-css/"},"excerpt":"简介 在MDN中层叠上下文的定义如下： 我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML…"}},{"node":{"id":"df182f06-39df-582b-bf69-b10063859507","timeToRead":2,"frontmatter":{"title":"css优先级","date":"30 September, 2019","spoiler":null,"tags":["文章"]},"fields":{"slug":"/css-priority/"},"excerpt":"引言 有时通过不同的选择器匹配同一个元素，虽然知道几个优先级比如内联样式是最高级，但还是在开发中不那么得心应手，这次就来详细的学习下，不同种类选择器的匹配规则。 优先级是如何计算的？ 优先级就是分配给指定的CSS…"}},{"node":{"id":"53e65e67-5867-587e-96fb-4bbc018481a7","timeToRead":1,"frontmatter":{"title":"什么是BFC ？","date":"09 September, 2019","spoiler":"dddddd","tags":["文章"]},"fields":{"slug":"/bfc-block-level-formatting-context/"},"excerpt":"基本概念 块格式化上下文（BlockFormattingContext，BFC）是Web页面的可视化CSS…"}},{"node":{"id":"1bf91b49-a5a5-547d-86f2-afb03fbf61e8","timeToRead":2,"frontmatter":{"title":"理解事件循环-node","date":"21 August, 2019","spoiler":null,"tags":["笔记"]},"fields":{"slug":"/learn-about-the-event-loop-node/"},"excerpt":"前言 经过上面的浏览器的事件循环学习，我们已经对事件循环基本有所理解，也接触到了宏任务和微任务，在阅读狼叔的过程中，发现node事件循环的实现是依靠的libuv引擎，和浏览器的事件循环有所不同 Node中的事件循环 node…"}},{"node":{"id":"d0fdd45e-a6b1-51a0-825c-6df6e50d7353","timeToRead":6,"frontmatter":{"title":"理解事件循环-浏览器","date":"08 August, 2019","spoiler":null,"tags":["笔记"]},"fields":{"slug":"/learn-about-the-event-loop-browser/"},"excerpt":"引 先来看一手题目： 当我看到这个题目时，觉得它能出现在题目中，绝对不是1，2，3那么简单。虽然把答案蒙对了(1,3,2)，但是为什么还不太清楚。当然这是小聪明的做法，那么现在就来探索下背后的知识点把。 执行栈与事件队列 当Js…"}},{"node":{"id":"bdad361a-4a8d-5774-b32a-d9a877826faf","timeToRead":1,"frontmatter":{"title":"手画深拷贝","date":"12 July, 2019","spoiler":null,"tags":["文章"]},"fields":{"slug":"/hand-painted-deep-copy/"},"excerpt":""}},{"node":{"id":"68add0a1-1537-5597-b605-7cde9752f336","timeToRead":3,"frontmatter":{"title":"让 position:absolute 生效,父元素必须为 relative ？","date":"21 June, 2019","spoiler":null,"tags":["文章"]},"fields":{"slug":"/for-position-absolute-to-take-effect-the-parent-element-must-be-relative/"},"excerpt":"在很多课程上，甚至在开发中的了解，我收集到的信息都是，要让子元素的绝对定位生效，必须把父元素设置为相对定位，这个听起来也很讲道理，所以在后面的实践中我也都是如此做的，直到我碰到了这个场景：  最外层父元素的定位为position:relative…"}},{"node":{"id":"3c9fecf4-2638-5509-9f7f-ed12d0c75578","timeToRead":1,"frontmatter":{"title":"console的小技巧","date":"28 May, 2019","spoiler":null,"tags":["笔记"]},"fields":{"slug":"/tips-of-console/"},"excerpt":"使用占位符  占位符列表： 占位符 功能 %s 字符串 %d 整数 %i 整数 %f 浮点数 %o 对象的链接 %c css格式字符串"}},{"node":{"id":"61da8b76-383e-5284-910f-46d3f3b8d9eb","timeToRead":1,"frontmatter":{"title":"了解console家族","date":"23 May, 2019","spoiler":null,"tags":["笔记"]},"fields":{"slug":"/learn-about-the-console-family/"},"excerpt":"console.log() 经典的调试的代码，用来调试程序，看是否会准确的输出你所预期的东西 console.dir…"}},{"node":{"id":"7f2bfc0d-a3e9-51b9-8e39-bd1241afebcf","timeToRead":3,"frontmatter":{"title":"https如何做到加密通信的","date":"17 May, 2019","spoiler":null,"tags":["笔记"]},"fields":{"slug":"/how-to-encrypt-communication-with-https/"},"excerpt":"http的缺点 不能验证通信方的身份 通信使用明文进行传输，内容会被窃听 无法证明报文的完整性，有可能已被恶意篡改 被广泛使用的wireshark，它可以获取http请求和响应内容，并对其进行解析，如请求方法、响应码、响应报文等。 加密协议 http…"}},{"node":{"id":"e7cf8bb4-16bf-5ce7-8d6b-f8d24c410167","timeToRead":2,"frontmatter":{"title":"http2的新特性","date":"07 May, 2019","spoiler":null,"tags":["笔记"]},"fields":{"slug":"/new-features-of-http2/"},"excerpt":"头部压缩 http2针对头部字段，使用HPACK压缩算法，对请求头进行压缩。 在服务器和客户端之间，建立哈希表，将用到的字段存放在这张表中，那么在传输的时候对于之前出现过的值，只需要把索引(比如0，1，…"}},{"node":{"id":"9bb8c725-00e4-5659-9631-679c63aeeef1","timeToRead":1,"frontmatter":{"title":"JavaScript的哈希表实现","date":"05 May, 2019","spoiler":null,"tags":["笔记"]},"fields":{"slug":"/implementation-of-hash-table-in-javascript/"},"excerpt":"hashMap的数据结构的组成 数组、链表、红黑树 哈希函数的实现 冲突|碰撞的解决方法 1.开链法 如果pos冲突,即在此位置创建二维数组或者链表？ 2.线性探测法 由于hashMap散列表是不规则的,冲突后查询下一个位置是否为空,直至结束,返回undefined…"}},{"node":{"id":"55b06dbe-6f90-5095-93c5-bd9442ccfd6a","timeToRead":1,"frontmatter":{"title":"http1.0和1.1的一些区别","date":"29 April, 2019","spoiler":null,"tags":["笔记"]},"fields":{"slug":"/some-differences-between-http1.0-and-1.1/"},"excerpt":"缓存处理，在HTTP1.0中主要使用header里的If-Modified-Since,Expires来做为缓存判断的标准，HTTP1.1则引入了更多的缓存控制策略例如Entity tag，If-Unmodified-Since, If-Match, If-None-Match…"}},{"node":{"id":"ee2f21ec-c05f-5621-a4f3-a79adfd40f15","timeToRead":1,"frontmatter":{"title":"http状态码","date":"27 April, 2019","spoiler":null,"tags":["笔记"]},"fields":{"slug":"/http-status-code/"},"excerpt":"2XX 2XX的响应结果表明请求被正常处理了 200 正确的执行了请求 204 正确的执行了请求，但没有资源可返回 206 正确的执行了范围请求 (HTTP 1.1新) 3XX 301 永久性重定向 302 临时重定向 303 临时重定向，并希望将POST方法改为GET…"}},{"node":{"id":"f6180681-df67-57bf-839f-531026137fdd","timeToRead":6,"frontmatter":{"title":"排序算法复习","date":"24 April, 2019","spoiler":null,"tags":["笔记"]},"fields":{"slug":"/review-of-sorting-algorithm/"},"excerpt":"介绍 对计算机中存储的数据执行最常见的操作是排序和检索，本章将复习数据排序的基本算法和高级算法，以及如何应用使操作其中的数据时更简洁高效。 一、基本排序算法 基本排序算法其核心思想是对一组数据按照一定顺序重新排列，核心理念是一组嵌套的for…"}},{"node":{"id":"bf400ec6-4e92-56e8-8e2b-b92cac7927a2","timeToRead":1,"frontmatter":{"title":"Sweet Pandas Eating Sweets","date":"10 August, 2017","spoiler":null,"tags":null},"fields":{"slug":"/sweet-pandas-eating-sweets/"},"excerpt":"Pandas are really sweet.\nHere's a video of a panda eating sweets."}}]}},"pageContext":{}},"staticQueryHashes":["3649515864","63159454"]}