Web与前端开发 ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第1天

---

一.Web起源、架构与变迁

World Wide Web于1989年诞生： HTML, HTTP, URL三种技术

• 1995 javascript
• 2005 Ajax/WebAPI
• 2017 iPhone发布
• 2019 WebAssembly C/C++, Rust

二、应用领域

erDiagram
SERVER ||--o{ CLIENT : net
CLIENT ||--|{ BROSWER : contains

三、开发过程

服务端框架 node.js, React

前端开发框架

浏览器工作原理

[深入了解现代浏览器](w3c/20190603_cncuckoo_深入理解现代浏览器.md at master · 75team/w3c (github.com))

简述：架构由上至下：浏览器进程（协调其他工作进程），渲染器进程，插件进程，GPU进程。多进程可在浏览器的任务管理器中查看，各进程有私有内存空间，有助于安全与隔离，单个标签页卡住不影响其他标签页。站点隔离。浏览器进程中不同线程： UI线程负责绘制浏览器的按钮和地址栏，网络线程负责处理网络请求并从互联网接收数据，有线程存储线程负责访问文件和存储数据。渲染器进程把HTML、CSS解析，遇到<script>标签阻塞解析并调用javascript引擎；将DOM计算样式确定布局，最后合成(composite)以图形的形式绘制页面。

对于交互需求，如绑定的事件<button type="button" onclick="alert('欢迎!')">点击按钮</button>或改变HTML内容<script> function myFunction() { x=document.getElementById("demo"); // 找到元素 x.innerHTML="Hello JavaScript!"; // 改变内容 } </script> <button type="button" onclick="myFunction()">点击这里</button>浏览器进程接收到交互事件，发送给渲染器进程，其根据事件目标来运行注册的监听程序。

HTTP协议

• WebAPI
• CSS组件
• js类型检查
• 服务端渲染

四、Web标准

关于Web标准组织：

• W3C：Account request (w3.org)
• Ecma：Home - Ecma International (ecma-international.org)
• WHATWG:Web Hypertext Application Technology Working Group (WHATWG)
• IETF:IETF | Internet Engineering Task Force

W3C/Ecma会员；主要硬件、互联网公司

五、待续