1??、浏览器工作原理

1.1 浏览器的组成

• 人机交互部分(UI)
• 网络请求部分(Socket)
• JavaScript引擎部分(解析执行JavaScript Chrome V8引擎)
• 渲染引擎部分(渲染HTML、CSS等)
• 数据存储部分(Cookie、LocalStorage、SessionStorage)

1.1.2 浏览器访问网站的过程

• 在浏览器地址栏中输入网址
• 浏览器通过用户在地址栏输入的URL构建HTTP请求报文
• 浏览器发起DNS解析请求 将域名转换为IP地址(找到对应资源的服务器)
• 浏览器将请求报文发送给服务器
• 服务器接收请求报文 并解析
• 服务器处理用户请求 并将处理结果封装成HTTP响应报文
• 服务器将HTTP响应报文发送给浏览器
• 浏览器接收服务器响应的HTTP报文 并解析
• 浏览器解析HTML页面并展示 在解析HTML页面时遇到新的资源需要再次发起请求
• 最终浏览器展示出页面

1.2 主流浏览器渲染引擎

1.2.1 双核浏览器

1.2.1.1 什么是双核浏览器？

有两个不同的渲染引擎内核(IE引擎||Chrome引擎)

1.2.1.2 为什么要双核浏览器？

为了解决 某些企业内部的OA系统 这些系统有可能只能在IE内核中打开 其他内核不能打开 这样的话双核浏览器就可以切换内核 但有时可能会去访问外网 这时就可以继续切换内核

1.2.2 主流 渲染内核

• Chrome浏览器 => Blink引擎(webkit引擎的分支)
• Safari浏览器 => webkit引擎
• FireFox浏览器 => Gecko引擎
• Opera浏览器 => Blink引擎(早期使用Presto引擎)
• Internet Explorer浏览器 => Trident引擎
• Microsoft Edge => EdgeHTML引擎(Trident引擎的分支)

1.2.3 浏览器渲染引擎的工作原理

• 解析HTML构建DOM树(Document Object Model 文档对象模型)
• 构建渲染树 渲染树并不等同于DOM树 像head标签link标签等或display:none这样的元素就没必要放在渲染树中 但是它们都会存在于DOM树中
• 对渲染树进行布局、定位坐标、大小、是否换行、确定position、overflow、z-index... 这个过程叫 layout或reflow
• 绘制渲染树 调用操作系统底层API进行绘图操作
  浏览器渲染网站过程视频 https://www.youtube.com/watch?v=ZTnIxIA5KGw

1.2.3.1 页面加载优化

需求: 点击按钮创建50个input 思考: 不要循环去创建至页面 因为会产生回流(每次循环都会重新渲染一次页面 Layout、reflow) 解决方案: 循环创建50个文本框至文档片段中(document.createDocumentFragment()) 文档片段MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment

2??、Web开发本质

• 请求 客户端发起请求
• 处理 服务器处理请求
• 响应 服务器将处理的结果发送给客户端
  客户端处理响应
  (浏览器: 解析服务器返回的数据)
  (IOS、Android: 解析服务器返回的数据 并且通过IOS或Android的UI技术实现界面的展示功能)

3??、开发全栈

3.1 PHP开发技术栈

LAMP

• Linux
• Apache
• MySQL
• PHP

3.2 Node.js 全栈开发技术栈

MEAN

• MongoDB
• Express
• Angular
• Node.js

4??、为什么要配置环境变量

为了让某个应用程序在任何路径下通过命令行运行成功

5??、Node.js 开发网站和传统PHP等开发网站的区别

5.1 Node.js 开发网站

• 不需要Web容器 因为Node.js 本身就是基于更底层的HTTP协议开始的 本身就是一个HTTP服务器
• node.exe 进程监听8080(代码中设置的端口号)端口 接收用户请求 根据不同请求做出对应的处理 最后将处理后的结果返回给浏览器
  

5.2 传统PHP等开发网站

• 需要Web服务器
• 监听端口(8080)解析用户请求报文 读取成功后将文件内容响应给浏览器
  

6??、同步、异步

6.1 同步

• 代码
  从上往下执行
• 现实
  同一个人同时只能做一件事件 后面的事情?等前面的事情执行完才能执行 需等待

6.2 异步

• 代码
  某段代码执行 不会阻塞后面代码的执行
• 现实
  同一个人 同时做很多事情 后面的事情无须等待 同时执行
• JavaScript中的异步
  绝大多数具有*回调函数*的代码都是异步的

定时器 回调函数 Node.js 中的文件读写 AJAX jQuery中的动画函数中的回调函数 ...

XMind笔记

总结

后面会增加HTTP和HTTPS协议、回流、重绘、WebSocket、.... 等

若有感兴趣的小伙伴，需要前端扩展详细解说思维导图原图的，关注我，私信回复获取：Web前端扩展思维导图

作者：蓝海00
转发链接：https://www.jianshu.com/p/92e39045b06f