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
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、.... 等
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
