邂逅 Web 开发

电脑配置 #

开发者应当在计算机中设置好显示隐藏文件和文件拓展名。

Windows11 与 Windows10 中的设置相差不大，Win10 的设置可以直接在文件夹上方找到，Win11 的则放在了文件夹上方「查看」的「显示」中。

相对于 Win10 而言，Win11 将「选项」也并入了文件夹上方的「···」中，找到「选项」打开，在里面的「查看」也可以选择「显示隐藏的文件、文件夹和驱动器」，将所有文件夹中的隐藏文件显示出来。

网站和网页的关系 #

好吧，我一直不知道网站和网页之间有什么区别，是什么关系。

简单来说，网页就是网络中的一个页面，其内容可以包括文字、链接、图片、音乐和视频等等，一个网站由许多个网页组成。

20 世纪 90 年代，Berners-Lee 上线了世界上第一个网站（http://info.cern.ch/hypertext/WWW/TheProject.html），这个网站十分朴素，仅通过 HTML 实现，没有 CSS，也没有 JavaScript。

网页的开发经过了几个阶段：

阶段一：HTML 元素
阶段二：HTML 元素 + CSS 样式
阶段三：HTML 元素 + CSS 样式 + JavaScript 语言

今天虽然已经出现了 Vue 和 React，但目前的网页开发还是以第三阶段为主，也就是说，Vue 和 React 也是基于 HTML、CSS 和 JavaScript。

HTML 负责网页的内容结构，CSS 负责网页的视觉体验，JavaScript 则负责网页的交互处理。虽然三者作为前端核心同等重要，但是 JavaScript 可说是灵魂部分。

网页的显示过程 #

用户的角度 #

在浏览器输入网站地址或域名（例如 bilibili.com），浏览器会通过 DNS（Domain Name System） ——域名服务器将该域名解析为对应的 IP 地址，然后根据该 IP 地址找到对应的服务器，将服务器中存储好的 HTML、CSS、JavaScript 等资源下载到浏览器中，接下来浏览器会对这些资源进行识别——渲染引擎会将 HTML、CSS 渲染成对应的界面，js 引擎则对 JavaScript 进行解析。

以上过程完成后，浏览器则可以向用户呈现网页页面。

简而言之，网页的显示过程即用户在浏览器输入网站，浏览器在此基础上找到对应的服务器地址，进而请求静态资源（可以存放在世界上任何一个地方），服务器发现请求后将静态资源返回给浏览器，浏览器再对静态资源进行解析和展示。

前端工程师的角度 #

前端工程师在本地对开发项目打包完成后，再部署到服务器——这是服务器中存储的静态资源的来源。

日常生活中，我们接触到的诸如浏览器、微信、小程序、网易云音乐、B 站等都属于客户端或前端，由于我们客户的本地电脑和手机无法缓存所有数据，因此在使用这些软件或网页时，所看到的内容都来自服务器，例如网易的音乐数据和 B 站的视频数据都存储在服务器中。

由此来看，服务器本质上也是一台类似于电脑一样的主机，里面同样有 CPU、内存、硬盘大小等等，它具有如下几个特点：

• 存储着包括 HTML、CSS、JavaScript 等相关的静态（static）资源。与之相对，API 服务器提供的则是动态的资源。
• 24 小时稳定运行。用户随时可能向服务器发出请求，例如深夜听歌、看视频等等。
• 没有显示器。开发者一般并不在服务器上写代码，主要在本地电脑操作，然后通过命令行对服务器进行项目部署。
• 一般装的是 Linux 操作系统（如 centos）。

除了一些大型公司或者政府，中小型公司一般没有自己的机房和服务器，主要是购买云服务器（如阿里云、腾讯云、华为云）。

浏览器和浏览器内核 #

浏览器最核心的部分是浏览器内核，也称作渲染引擎（Rendering Engine），它主要负责解析网页语法，并渲染（显示）网页。

正如我们在「网页的显示过程」中讲到的，准确来说是浏览器内核——而非浏览器——对服务器中的 HTML、CSS、JavaScript 等资源进行解析和渲染，进而才显示了网页。

浏览器 ≠ 浏览器内核，我们一般看到的浏览器只是开发界面，而浏览器内核本身则十分复杂且不可见。然而国内没有十分知名的浏览器内核，诸如 360 浏览器、QQ 浏览器等用的内核都是来自国外。

常见的浏览器内核包括这几类：

不同的浏览器内核有不同的解析、渲染规则，因此同一网页在不同内核的浏览器中的渲染效果也可能不同，这便涉及浏览器适配的问题。