Web标准与前端开发学习(1) | 青训营笔记

看天的小猪
668 阅读7分钟

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

笔记小结： 通过本次课程的学习，了解了前端开发的起源、架构及变迁；前端应用的三大领；再到组成的细分，包括：语言、框架、工具和Web标准建立的前世今生。教学过程中强调了当今的前沿会议的学习，要紧跟开发的时代步伐。

01. 关于前端开发

001. 起源、架构、变迁

起源详见：WWW的原始提案，HTMLized (w3.org)

计算机网络诞生于上个世纪的60年代,标志性通信协议是TCP/IP。

image.png

  1. 1989年诞生时，Web由三种技术构成:
    • HTML
    • HTTP
    • URL
  2. CSS和JavaScript是几年之后才出现的。

image.png

002. 前端应用的领域

0001. 前端应用的领域之浏览器

关于前端开发的应用领域，接下来再从运营环境角度看一看。
首先，浏览器，包括桌面浏览器和移动浏览器，以及移动App中的WebView,都属于浏览器直接渲染Web应用的范畴；
桌面浏览器包括Chrome、Edge、Firefox、Opera、Safari这五个主流浏览器，事实上随着谷歌Chromium开源项目的不断攻城掠地，也随着开源运动的不断属性，浏览器的多样性正在减少。因为Edge和Opera都已经选择站到了谷歌的阵营，所以事实上只有Chrome、Safari和Firefox三个浏览器。目前，Chrome浏览器的市场份额达到67.55%,具有事实上的垄断地位。
移动浏览器主要是Chrome、Safari,还有国内小程序提供商定制的一些浏览器引擎。
换句话说，前端不仅要开发在浏览器和WebView中运行的网页，也要开发在小程序运行时上跑的小程序。

  1. 对浏览器的理解

    • 浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常 是 HTML，也包括 PDF、image 及其他格式。用户用 URI（Uniform Resource Identifier 统一资源标识符）来指定所请 求资源的位置。
    • HTML 和 CSS 规范中规定了浏览器解释 html 文档的方式，由 W3C 组织对这些规范进行维护，W3C 是负责制定 web 标准的 组织。
    • 但是浏览器厂商纷纷开发自己的扩展，对规范的遵循并不完善，这为 web 开发者带来了严重的兼容性问题。
    • 简单来说浏览器可以分为两部分，shell 和 内核。
    • 其中 shell 的种类相对比较多，内核则比较少。shell 是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作， 参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。也有一些 浏览器并不区分外壳和内核。从 Mozilla 将 Gecko 独立出来后，才有了外壳和内核的明确划分。

  2. 浏览器内核

    • 主要分成两部分：渲染引擎和 JS 引擎。
    • 渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也 可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用 PDF 阅读器插件，可以显示 PDF 格式。
    • JS 引擎：解析和执行 javascript 来实现网页的动态效果。
    • 最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

0002. 前端应用的领域之服务器

其次，服务器，服务端的开发目前主要还是依托于Node.js这个成熟的JS运行时，npm包管理平台已经成为世界最大的程序包管理平台，2019年6月超过100万。
当然，还有Express、Koa等Web开发框架的生态。
最后，大家也要关注Deno这个新的JavaScript安全运行时。Deno号称是安全运行时。而且，Deno也是Node.js之父Ryan Dahl一手打造的。在发布Deno的时候，Ryan Dahl曾经痛称"Node.js十大遗憾"。

网站应用程序主要分为两大部分：客户端和服务器端

  • 客户端：在浏览器中运行的，就是用户看到并与之交互的界面程序。使用HTML、CSS、Javascript
  • 服务器端：在服务器中运行的，负责存储数据和处理应用逻辑

网站服务器: 能够提供网站访问服务的机器就是网站服务器，它能够接收客户端的 请求，能够对请求做出 响应。
IP地址： 互联网中设备的唯一标识，互联网协议地址。eg：192.168.105.125
域名： 因为IP地址难记，域名因而孕育而生。域名就是上网所使用的网址。
端口： 计算机与外界通讯交流的出口，作用 区分服务器电脑中提供的不同服务
URL： 统一资源定位符（Uniform Resource Locator），就是网页地址\

  • URL组成：传输协议://服务器IP或域名:/资源所在位置标识\
  • eg：www.bilibili.com/video/BV1j5…
  • http：超文本传输协议，作用 提供一种发布和接受HTML页面的方法
  • https：HTTPS 在HTTP 的基础下加入SSL，HTTPS 的安全基础是 SSL，作用 将数据加密传输

在开发阶段，客户端和服务器端使用同一台电脑，即开发人员电脑。

  • 本机域名：localhost
  • 本地IP ：127.0.0.1
  • 客户端 → 浏览器
  • 服务器端 → Node

0003. 前端应用的领域之终端和跨端

终端和跨端，这个应用领域通常是开发者工具，比如命令行工具里的Webpack、Babel、React、Vue都有CLI(Command-Line Interface)版，而桌面跨端主要有Electron和NW.js,目前世界上最流行的编码环境VSCode就是基于Electron的一个Web应用。

“终端”即是指最后或最外层的节点。在计算机世界里一般指最外层的输入输出。那什么是计算机的输入输出？最常见的输出设备就是显示器、最常见的输入设备就是键盘鼠标。所以通俗来说，计算机的终端就是位于最外层的显示器、键盘或鼠标。 在过去（现在也有）因为计算机资源非常宝贵，经常一台高性能主机向多台终端设备提供计算能力。即终端设备通过键盘鼠标向中心主机输入信息，中心主机计算后将结果返回给终端进行显示。终端本身不具备核心计算能力，主要就负责数据的输入和输出，这就是“终端”。 现代我们管很多设备叫终端机，比如手机。因为手机作为接打电话的终端负责声音的输入和输出，而重要的信号处理工作由各个基站等设备完成。

003. 语言、框架、工具

  • Ryan Dahl
  • TJ Holowaychuk
  • Jordan Walke
  • VUE 尤雨溪
  • Anders Hejlsberg
  • Linus Torvalds
  • Sebastian McKenzie
  • Tobias Koppers
  • Evan Wallace

004. 浏览器、网络、服务器

学习前端开发，一定离不开前端代码运行的环境。那就是浏览器、网络和服务器。
长文“深入理解现代浏览器”，这篇文章以Chrome作为现代浏览器的示例，图文并茂在讲解了浏览器的工作原理，解释了在地址栏输入URL之后，回车，都会发生什么。一定要多读几遍，而且要经常读一读，这样才能理解、记牢。

image.png

005. 学习路线图

前端这个职业的技能树，或者说学习路线图。推荐一个网站: roadmap.sh 点开之后选择Fronend:制定一个五年规划，不要企图两三年就把这些知识全都掌握。

image.png

avatar
文章
阅读
粉丝