Web标准与前端开发 | 青训营笔记

73 阅读2分钟

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

关于前端开发

关于前端开发:起源、架构、变迁

上网指接入Internet,它是地球上相互连接的计算机构成的网络。计算机网络诞生于上个世纪的60年代,标志性通信协议是TCP/IP。 上网指接入网络,它是地球上相互连接的计算机构成的网络。计算机网络诞生于上个世纪的60年代,标志性通信协议是TCP/IP。

1989年诞生时,Web由三种技术构成:

  • HTML
  • HTTP
  • URL

CSS和JavaScript是几年之后才出现的。

image.png

关于前端开发:前端应用的领域之终端和跨端

命令行/终端

  • Webpack CLl
  • Babel CLl
  • Vue CLl
  • React CLl

桌面跨端

  • Electron
  • NW.js

移动跨端

  • React Native
  • Flutter

关于前端开发:语言、框架、工具

Chrom,Edge,FireFox,Opera,Safari五个主流浏览器,谷歌浏览器用户最多

关于前端开发:语言、框架、工具

image.png

关于前端开发:浏览器、网络、服务器

架构:

Web浏览器的架构,可以实现为一个进程包含多个线程,也可以实现为很多进程包含少数线程通过IPC通信。如何实现浏览器,并没有统一的标准。 Chrome最新的架构:最上层是浏览器进程,负责协调承担各项工作的其他进程,比如实用程序进程、渲染器进程、GPU进程、插件进程等,如下图所示。

image.png

  • 浏览器进程:控制浏览器这个应用的chrome(主框架)部分,包括地址栏、书签、前进/后退按钮等,同时也会处理浏览器不可见的高权限任务,如发送网络请求、访问文件。
  • 渲染器进程:负责在标签页中显示网站及处理事件。
  • 插件进程:控制网站用到的所有插件。
  • GPU进程:在独立的进程中处理GPU任务。之所以放到独立的进程,是因为GPU要处理来自多个应用的请求,但要在同一个界面上绘制图形。

image.png

导航

导航涉及浏览器进程与线程间为显示网页而通信。一切从用户在浏览器中输入一个URL开始。输入URL之后,浏览器会通过互联网获取数据并显示网页。从请求网页到浏览器准备渲染网页的过程,叫做导航。

如前所述,标签页外面的一切都由浏览器进程处理。浏览器进程中有线程(UI线程)负责绘制浏览器的按钮和地址栏,有线程(网络线程)负责处理网络请求并从互联网接收数据,有线程(存储线程)负责访问文件和存储数据。

image.png

Web标准

  • W3C: World Wide Web Consortium

  • Ecma: Ecma International

  • WHATWG: Web Hypertext ApplicationTechnology Working Group

  • IETF: Internet Engineering Task Force

image.png