整理自己的笔记，构建知识体系（前端篇 一）

前言

作为一个转行过来的萌新，17年初入坑至今，期间自己好像零零散散学习了不少东西，但是又感觉自己什么都不会，恰逢最近离职找工作（有靠谱内推的，不用客气，请联系我，立刻，马上。坐标：深圳，邮箱：tanna5421023@163.com万分感谢），正好整理下自己的学习笔记，构建自己的知识体系。（PS：非常非常非常有必要建立自己的知识体系）初次发文，文笔有限，不对之处，请各位大佬多多指正。 本文仅为自己的学习笔记，并非原创，感谢大佬们的分享。 附上自己非常喜欢的一句话：生命中的任何馈赠，其实都已经暗中标好了价码。诸君共勉之。 废话不多说，follow me 带你走进初级前端的世界。

大纲

从一道非常经典而且槽点又多的题入手：从输入url到页面加载，发生了什么？ 看到这道题，我的心里就没有13数了，这个问题很大，得慌！ 先点支烟，冷静一下，仔细分析一波： 首先，众所周知 浏览器是多进程的，浏览器内核是多线程的，那么输入url后，浏览器会开启网络请求线程发起一个完整的http请求，服务器接收到请求，前后台http交互，浏览器收到服务器返回数据包解析，包括解析html生存dom树，解析css生成样式树，合并成渲染树，计算layout，painting渲染，js引擎解析等等。分析不了了，看大纲：

1 从浏览器接收url到开启网络请求线程

多进程浏览器
多线程浏览器内核
解析url
复制代码

2 开启网络请求线程发出完整的http请求

DNS查询得到IP地址
tcp/ip请求
五层因特尔网协议
复制代码

3 服务器接收到请求

负载均衡
后台处理
复制代码

4 前后台http交互

http报文
http缓存
cookie
长短连接
http1.0/1.1/2
https   
复制代码

5 解析页面

html解析，生成dom树
css解析，生产样式树
渲染
简单层与复合层
js引擎解析
等等
复制代码

1 从浏览器接收url到开启网络请求线程

首先，我们得知道什么是进程，什么是线程： 简单来说 进程是CPU资源分配的最小单位，线程是CPU调度的最小单位。 纳尼？这叫简单？作为一个非科班出身，对不起，我看不懂，呵呵，那么详细一点来说： 为什么会有进程与线程呢？由于CPU运行速度很快，当我们执行一段程序，实现一个功能的时候，相关资源构成程序上下文，然后CPU开始执行，当这个程序执行完了，或者分配给他的CPU执行时间用完了，那它就要被切换出去，等待下一次CPU的临幸。在被切换出去的最后一步工作就是保存程序上下文，因为这个是下次他被CPU临幸的运行环境，必须保存。 CPU都是轮流执行的，先加载程序A的上下文，然后开始执行A，保存程序A的上下文，调入下一个要执行的程序B的程序上下文，然后开始执行B,保存程序B的上下文。。。。进程就是包换上下文切换的程序执行时间总和 = CPU加载上下文+CPU执行+CPU保存上下文； 线程又是什么？由于进程的进程的颗粒度太大，每次都要有上下的调入，保存，调出。如果我们把进程比喻为一个运行在电脑上的软件，那么一个软件的执行不可能是一条逻辑执行的，必定有多个分支和多个程序段，就好比要实现程序A，实际分成 a，b，c等多个块组合而成。那么这里具体的执行就可能变成：程序A得到CPU =>CPU加载上下文，开始执行程序A的a小段，然后执行A的b小段，然后再执行A的c小段，最后CPU保存A的上下文。这里a，b，c的执行是共享了A的上下文，CPU在执行的时候没有进行上下文切换的。这里的a，b，c就是线程，也就是说线程是共享了进程的上下文环境，的更为细小的CPU时间段。两个名词不过是对应的CPU时间段的描述。

总的来说：进程和线程都是一个时间段的描述，是CPU工作时间段的描述，不过是颗粒大小不同。 从底层CPU角度分析一波，是不是感觉大家都理解了，说到这里，我又想到，既然进程是CPU资源分配的最小单位，那么就涉及到了竞争CPU的调度，以及申请内存（物理地址空间）；进程之间相互独立安全性高，如果两个进程之间需要进行（事件通知，数据传输，资源共享，进程控制）那么就需要通过进程间通信（管道，消息队列，共享内存，信号量等）的方式来达成。而线程是程序运行的最小单位，线程是进程的一个分流（一个进程至少有一个线程）， 一个进程内部的多个线程之间共享进程的数据，如果多个线程同时访问临界资源就会存在线程冲突（通过互斥锁来放置线程访问共享资源冲突的问题，有的时候互斥锁会带“死锁”和“饥饿现象”的问题），当然大多数线程内部的数据是单独享有的存储在线程栈上面。这方面我也不太懂，求大佬们告知 ，嘿嘿嘿。

多进程的浏览器

上面我们了解了什么是进程什么线程，那我们简单来看看浏览器的多进程：

浏览器是多进程的，有一个主控进程，每打开一个tab页面都会新开一个进程（某些情况下多个tab会合并进程），这里面包括：主控进程（负责协调、主控，只有一个），插件进程（每种类型的插件对应一个进程，仅当使用该插件时才创建），GPU（最多一个，用于3D绘制），tab页（浏览器内核，控制页面渲染，脚本执行，事件处理等，有时候会优化，如多个空白tab会合并成一个进程）等等。

多线程的浏览器内核

每一个tab页面可以看作是浏览器内核进程，然后这个进程是多线程的，它包括几大类子线程：

GUI线程，JS引擎线程，事件触发线程，定时器线程，网络请求线程

从这里面我们可以看到，js引擎线程只是浏览器内核进程中的一个线程，这也是我们说js是单线程的。

解析url

看到这，我们先看看 URL,URN,URI：

URL ：（Uniform Resource Locator），统一资源定位符

URN ：（Uniform Resource Name），统一资源名称

URI ：（Uniform Resource Identifier），统一资源标识符

起源：

这三个缩略词是Tim Berners-Lee在一篇名为RFC 3986: Uniform Resource Identifier (URI): Generic Syntax的文档中定义的互联网标准追踪协议。

引文：

统一资源标识符(URI)提供了一个简单、可扩展的资源标识方式。URI规范中的语义和语法来源于万维网全球信息主动引入的概念，万维网从1990年起使用这种标识符数据，并被描述为“万维网中的统一资源描述符”。

区别

首先我们要弄清楚一件事：URL和URN都是URI的子集。

换言之，URL和URN都是URI，但是URI不一定是URL或者URN。

关于URL：

URL是URI的一种，不仅标识了Web 资源，还指定了操作或者获取方式，同时指出了主要访问机制和网络位置。

关于URN：

URN是URI的一种，用特定命名空间的名字标识资源。使用URN可以在不知道其网络位置及访问方式的情况下讨论资源。

现在，如果到Web上去看一下，你会找出很多例子，这比其他东西更容易让人困惑。我只展示一个例子，非常简单清楚地告诉你在互联网中URI 、URL和URN之间的不同。 来看个列子，理解它们的区别：

这是一个URI：

bitpoetry.io/posts/hello…

我们开始分析

http://

是定义如何访问资源的方式。另外

bitpoetry.io/posts/hello.html

是资源存放的位置，那么，在这个例子中，

#intro

是资源。

URL是URI的一个子集，告诉我们访问网络位置的方式。在我们的例子中，URL应该如下所示：

bitpoetry.io/posts/hello…

URN是URI的子集，包括名字(给定的命名空间内)，但是不包括访问方式，如下所示：

bitpoetry.io/posts/hello.html#intro

就是这样。现在应该能够辨别出URL和URN之间的不同。记不住没关系，只要记住URI可以被分为URL、URN或两者的组合。

emmm，扯远了，来重新回到URL：

URL一般包括：scheme （定义网络服务类型，譬如有http，https，ftp，file，telnet等），host（主机域名或IP地址），domain （ 定义因特网域名），port（端口号），path（目录路径），query（即查询参数），filename（ 定义文档/资源的名称）

这里再说一下一般计算机上的默认端口号：

apache ： 80/443

mysql： 3306

ftp: 21 文件传输协议

ssh: 22 安全的远程登陆

telnet : 23 远程登陆

smtp：25 简单邮件传输协议

dns: 53 域名解析

http： 80

pop3： 110 客户端远程管理在服务器上的电子邮件，提供了SSL加密的POP3协议被称为POP3S

https： 443 加密的超文本传输协议

结语

由于篇幅有限，这里就先简单介绍到这里，这两天我会把后续的部分写出来，文中错误的地方请大佬们帮忙指出，码字不易，帮忙点个赞，哈哈

留一个有趣的小问题，与本文无关：

有100瓶水，其中有一瓶有毒，用小白鼠做实验（对不起，小白鼠）每瓶水可以给多只小白鼠喝，每只小白鼠可以喝多个瓶子的水，可以请问最少用多少只小白鼠检查出有毒的那瓶水？（PS：据说是小学生题目，反正我不信，如果是，我只想说：原来这就是强者的世界啊 摔手 呜呜呜）

转载于:https://juejin.im/post/5c9441fd6fb9a070fb36fe87