nodejs笔记1：浏览器基础

1、浏览器工作原理

浏览器的组成

• 人机交互部分(UI）
• 网络请求部分(Socket)

当打开一个网址的时候浏览器需要向服务器发起一个请求，然后把服务器响应的数据展示出来。所以浏览器一定具有发起网络请求的功能，同时也具有一个接收服务器返回数据的功能。一定具有这两个功能，这个就是网络请求部分——Socket

• JavaScript引擎部分（解析执行JavaScript）
• 渲染引擎部分（渲染HTML、CSS等).

渲染网页，浏览器渲染html、css。html、css是由浏览器渲染引擎来执行的。渲染引擎就是来渲染html和css，即释执行css和HTML

• 数据存储部分(cookie、HTML5中的本地存储LocalStorage、SessionStorage)

主流渲染引擎（了解）

渲染引擎又叫排版引擎或浏览器内核。
主流的渲染引擎:

• Chrome浏览器：Blink引擎（WebKit的一个分支）。
• Safari浏览器：MebKit引擎，windows版本2008年3月18日推出正式版，但苹果已于2012年7月25日停止开发windows版的Safani。=>最新版的苹果Safari浏览器是没有Windows版
• FireFox浏览器：Gecko引擎。
• Opera浏览器：Blink引擎(早期版使用Presto引擎）。
• Internet Explorer浏览器：Trident引擎。
• Microsoft Edge浏览器：EdgeHTML引擎（Trident的一个分支)。

双核浏览器就意味着它有两个不同的渲染引擎内核，为什么要有两个不同的渲染引擎内核呢？
所以如果360浏览器假如它有两个内核，一个是IE内核，另一个是别的内核比如火狐内核、Chrome内核，当你要登录一些企业内网，必须要使用IE的时候，就把这个360浏览器切换成IE的内核，这个时候就可以使用一些企业的内网系统（部分内网仅支持IE）。
如果要访问外网时，再把它切换成Chrome的内核，相对来说浏览器速度会快一些，这就是所谓的双核浏览器。双核浏览器内核指的就是浏览器的渲染引擎或者排版引擎，就是浏览器执行HTML、CSS。

工作原理

1. 解析HTML构建Dom树(Document Object Model，文档对象模型)，DOM是W3C组织推荐的处理可扩展置标语言的标准编程接口。
2. 构建渲染树，渲染树并不等同于Dom树，因为像’head’标签或’display: none'这样的元素就没有必要放到渲染树中了，但是它们在Dom树中。
3. 对渲染树进行布局，定位坐标和大小、确定是否换行、确定position、overflow、z-index等等，这个过程叫"layout”或"reflow"。
   4.绘制渲染树，调用操作系统底层API进行绘图操作。
   
   展示渲染过程的方法

浏览器访问网站过程

1. 在浏览器地址栏中输入网址

2. 浏览器通过用户在地址栏中输入的URL构建HTTP请求报文。GET , HTTP/1.1

   
   
   image.png

3. 浏览器发起DNS解析请求，将域名转换为IP地址

   
   
   image.png
4. 浏览器将请求报文发送给服务器。
5. 服务器接收请求报文，并解析。

6. 服务器处理用户请求，并将处理结果封装成HTTP响应报文。

   
   
   image.png
7. 服务器将HTTP响应报文发送给浏览器。
8. 浏览器接收服务器响应的HTTP报文，并解析。
9. 浏览器解析HTML页面并展示，在解析HTML页面时遇到新的资源需要再次发起请求。
10. 最终浏览器展示出了页面。

请求报文：
第一部分是请求行，包括请求方法、请求路径以及请求的http协议；
第二部分叫做请求报文头；注意空行；
最后部分是请求报文体。

响应报文：
第一部分是响应行，包括服务器请求的http协议以及服务器返还的http状态码；
第二部分是http响应报文头；注意空行；
最后部分是响应报文体。

---

2、web开发本质

(1)请求，客户端发起请求。
(2)处理，服务器处理请求。
(3)响应，服务器将处理结果发送给客户端
要做什么事都不是自己做，都交给服务器来做，Web要做就是向服务器发起不同的请求，服务器就知道要做不同的处理，处理完毕以后把结果再反馈回来。

客户端处理响应

服务器响应完毕后，客户端继续处理，其中：

• 浏览器:解析服务器返回的数据。
• ios、 Android客户端：解析服务器返回的数据，并且通过ios或Android的UI技术实现界面的展示功能

C/S & B/S

开发软件的两种的架构：

• C/S(Client/Server):客户端服务器
• B/S( Browser/Server ):浏览器服务器

同一套系统，既有BS架构模式，也有CS架构模式，基于用户需求。

• BS的好处是部署、维护方便，缺点是用户体验稍差。
• CS的好处是用户体验好，和服务器连接稳定，缺点是需要为客户独立开发终端，升级也得连客户端一起升级，部署工作量大。

---

3、参考

1. nodejs菜鸟教程
2. nodejs 入门与实战