Salute Those Who Gaze At The Stars

本系列文章，严重参考《高性能浏览器网络》和《HTTP权威指南》 前言：http的设计思路，起源于20世纪三十年代的一篇文章：《As we may think》，作者美国MIT工程学院的电子工程师Vannevar Bush，该文尝试探讨了人们每天生产的信息量和社会消化信息的能力。一句话总结：信息太多，别说消化了，查找都费劲。得设计一个更牛叉的东西，帮助我们提高效率。这就是http超文本概念的起源，超越文本的信息存在。虽然概念的正式提出得30多年之后但是，在此还是由衷的对这些仰望星空的前辈们致敬。 http和https：http就是超文本传输协议，所谓的协议就是一种约定，约定了在双方或者多方之间传输的数据的格式，仅此而已。这是1991年万维网之父伯纳斯李同学提出并设计的一套协议。主要目的就是机器之间能够互传资源，实现网络互联的真实需求。请求与响应。即：客户端向服务器发送资源请求，服务器端响应返回对应资源。https则是在http之外，又包了一层SSL，也就是安全套接层，用于加密传输，保证数据的可靠性。 总体划分四个版本：0.9、1.0、1.1和2.0 0.9版本该版本可以视为初代机，只有一 ...

无人机在现今社会的各个角落，都扮演着极其重要的作用。那么对于我们普通人而言，其最大的价值角色，就是航拍。鄙人的第一台机器，就是大疆的mini一代。带着他去了无数的地方，给我留下了很多珍贵的镜头。但是很不幸，两年的时间，已经飞不起来了。本着充分利用资源的原则，我想借其尸骨，来稍微深入的研究一下四旋翼无人机的飞行原理，然后尝试能否，借尸还魂。 四旋翼无人机（Unmanned Aerial Vehicle, UAV）的大体构成 飞控系统（大脑）。 一块芯片。一般包括GPS记录经纬度的,气压计记录气压的、IMU惯性测量单元，计算三维空间中飞机姿态的各个参数的，指南针等。。。。 遥控系统。 就是手柄遥控器。遥控器发出信号，飞控的信号接收模块接收信号后，执行相应的指令。 动力系统。 电机（驱动浆叶），桨叶（提供升力），电池。 图传。 一小块芯片。搜集飞控返回的图像和其他飞行参数的各项信息。 机体框架。 一般机翼、机身，是无人机的主体部分，用来承载其他所有组件。 电调： 控制电机转速 基本流程： 操控手柄—信号给到接收机—>接收机给到飞控—>飞控给到对应的部件（电机）–> ...

本系列的目标：尝试深入理解当前浏览器（谷歌）的大体逻辑。内容严重参考《Webkit 技术内幕》 现代浏览器的渲染逻辑，就是下图的流程。 一个经典的面试题：从输入url到最终页面的呈现，这其中都经历了些啥？坦白讲这个问题非常大，因为涉及到的点巨多。但是这问题既有深度也有价值，可以根据你的描述，看出你对现代浏览器执行机制的整体把握和理解，所以成了面试高频题。 总体可分为网页加载过程（DOMContent事件）和渲染过程（onload事件）。具体步骤如下 浏览器根据输入的内容做识别，如果输入的是网址，调用 DNS 解析目标 IP，建立连接。如果是关键词，调用搜索引擎去搜索。 依赖网络模块，三次握手建立连接后获取到各种资源，包括 js、html、css 等等。 html 文件被交给 HTML 解释器转变成一系列词语，然后构建节点生成 DOM 树（树形结构的对象document），css 文件被交给 css 解释器生成样式树,也就是stylesheet。在这过程中，碰到 js 代码，中断 dom 树的构建，权限会给到jscore引擎解释处理，谷歌浏览器中的就是大名鼎鼎的 v8。此处涉及到进程切 ...

以前面的先验内容为铺垫，本文将会仔细的介绍webpack的基本打包思路，最终目标，手撕一个自己的webpack。 前期准备首先再次重申一个重点：webpack的根本目的,是为了将我们写的代码转换成浏览器能够执行的代码,并且将分散的各个模块，揉成一个统一的文件。然后直接在index.js中引入即可那么我们的mywebpack.js的目标就是一个，从入口文件读取各个模块，生成转换后的代码，写到bundle.js文件，成功与否检验的标准就一个，index.html引入该bundle.js，看看浏览器能否正确显示。 实际讲解之前，准备好一些相关的文件。index.html、index.js、helloGirl.js和hello.js、template模板文件，当然还有我们最为重要的mywebpack.js。 // 1. 其中index.js入口文件，四段极为工整的代码块。： import helloGirl from "./helloGirl.js"; const helloWorldStr = helloGirl(); function component() { const ...

本文可以看成是我们开始diyWebapck前的开胃内容，介绍一些必备的知识点，为之后做铺垫。babel相关api的功能。 @babel/parser：能够将通过readfile读取的文件内容，转化为ast数据。使用方式: const parser = require(“@babel/parser”); 借助https://astexplorer.net/, 查看结果。示例代码中的四段代码分别对应body中的四种类型。 重点关注body字段。由图中能清楚的看到，左侧完整的四段代码块，解析出来的ast数据，对应着body中的四个不同类型节点。 @babel/traverse：遍历ast中所有节点，根据需求，重写节点内容 @babel/types: 构建新的babel的ast类型数据 @babel/generator：与parser为互逆操作，ast–> 字符串数据 ejs： 模板生成。 从总体的逻辑，大概介绍下webpack最终的产物bundle.js生成的逻辑generateCode入参就是我们已经处理好的ast， ...

前端模块化的演进历程模块化是webpack的基石，本文就尝试着缕一缕。 阶段一：文件划分最原始的方法就是文件划分。其具体操作就是第一回中我们举的a、b、c三个js文件的例子。 // 文件内部结构： var x = 100 function A() { ... } function B() { ... } 然后通过script标签引入： <script src="./moduaA.js"></script> <script src="./moduaB.js"></script> <script src="./moduaC.js"></script> 该方法的弊端显而易见，所有模块共用全局作用域，变量全局污染，命名冲突在所难免。，且模块之间的依赖关系难以控制。 阶段二：命名空间同样还是三个文件，只是文件内部的所有内容，都是用一个对象包裹，对外使用时则通过这个对象。 var modulA = { x = 100, methodA: function A() { ...

本文开始， 我们尝试深入理解一下前端神器webpack。最终的目标：能够理解前端模块化，理解webpack打包的核心思路及执行，理解webpack中的“关键人物”。解锁这三点，最终彻底掌握。 Webpack干啥的打包用的，简单说就是将项目的各种零散的文件揉成一个完整的js。比如我们的项目一共用到了a.js,b.js,c.js共三个文件，打包后就成了一个bundle.js。那问题来了，为什么要打包？我就喜欢零散的，咋了？ 客观存在的需求 其一： 零散文件使用，各个文件之间的依赖关系顺序，需要人为的梳理。比如在a文件里用到了b文件的某个属性，那么，b文件就应该先于a文件加载，否则error。可想而知此等操作，项目的复杂度一上来，开发人员直接崩溃。 其二： 零散文件意味着，请求的数目随文件个数线性放大。那么遵循不发请求或者少发请求的终极性能准则，此方法依旧鸡肋。 因此，我们的神器webpack应运而生。当然啦，除了他还有很多其他的如gulp、parcel等的工具，非独此一款。 webpack具体的能力 合并文件。在项目中，我们可能会到处import各种依赖，这些依赖又分布在各个文件中。we ...

Recently, with some free time on my hands, I binged an AMC drama called Pantheon. Maybe dealing with mundane chores for too long made me lose interest in gazing at the stars, but this show instantly pulled me back in. It also introduced me to a new concept: UI (Upload Intelligence). The idea of Upload Intelligence is to completely digitize the data of a physical human brain, converting it into a “cloud” existence that can be copied and pasted—essentially the fundamental step toward human immorta ...

The new-era software laborer is the official term for people working in software development (hehe), and today the group roughly splits into frontend and backend. Their roles are well-defined, and occasionally there are full-stack masters who can handle every tricky issue without batting an eye (but are exhausted to the bone). Putting aside the backend Java ecosystem, a single frontend role already offers endless topics to study. The three frameworks—Angular, Vue, React—do you master all of them ...

本文我们就聊聊，极端情况下，人们的生活模式通信篇在目前人们的生活中，通信方式有很多方式，书信邮寄通信；直接拨号电话通信；抑或是qq、微信等现代软件。第一种几乎绝迹，后两种就是默认的方式。及其便捷，随心所欲。其根基，就是网络。但是请大家设想一下，倘若这个根基，被人为掐断，同时默认邮寄消失，作为普通人的你，该如何应对呢？有什么备选方案吗？ 无线电对讲机距离：0.5–15 km.信号直线传播，遇到阻碍直接嘎。 短波电台（真正全球通信，无任何基站）距离：几百～几千公里。信号打出去，碰到电离层会反弹，知道弹到接收方。 星链距离：全球 卫星短信 / 卫星对讲机（天上基站，永远不断）距离：全球 调研一波后发现，短波电台，是终极方案。不过有一点需要注意，无论是短波电台还是对讲机，相当于裸泳。