学习网页前的网页知识储备

Posted 2020-10-08

声明：本栏目所使用的素材都是凯哥学堂VIP学员所写，学员有权匿名，对文章有最终解释权；凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。

两种程序架构介绍：

1.C/S架构（客户端/服务器）：此种架构的特点在于通过调用客户端的相关硬件让客户端进行一系列的音频视频处理等，以达到程序想要的绚丽效果，而服务器则只需要负责和客户端传输数据即可，这样就减轻了服务器的压力。所以这需要用户在客户端下载相关程序才能办理业务。但是这种架构的程序更新起来会很麻烦，因为一台服务器可能连着成千上百万的客户端，一旦服务器更新了，那么与它相连的客户端上的程序也需要一起更新，客户端上面也会有一些验证、信息处理等操作，这就导致更新会很麻烦，如果网速不好会导致更新时间过长，而在更新期间又不能使用，这就大大影响了用户处理业务。所以此种架构比较适合做大型的游戏，如英雄联盟，而并不适合做一些涉及到购物、信息部分的软件和管理软件，如联通、银行的缴费系统。总结此架构的优缺点如下：

1.1优点：

1.1.1可以减轻服务器压力

1.1.2可以调用本地的一些硬件设备如打印机、串口等

1.1.3可以实现绚丽的特效

1.2缺点：

1.2.1更新很麻烦

1.2.2设备需要提前安装

2.B/S架构（浏览器/服务器）：此架构不需要下载什么客户端，直接在浏览器上输入地址即可，只要有浏览器即可。所以浏览器就相当于一个页面解析器，浏览器上显示的页面内容（如页面结构、素材等）全部都是从服务器上下载下来的，页面每刷新一次就会重新从服务器上下载页面数据，这便没有什么更新不更新的说法了，但是服务器压力也会很大。但有的为了减轻服务器的压力就会将素材中如照片缓存到本地中，后面每次刷新照片就不再重新下载了。此种架构适合做一些信息的软件但是无法做大型游戏，因为大型游戏需要的就是那种绚丽的效果，此种程序架构很难实现。总结此架构的优缺点如下：

2.1优点：

2.1.1页面上的内容都是从服务器上下载下来的，没有更新这一说

2.1.2只要刷新就能看到最新的内容

2.2缺点：

2.2.1大型网游或者有很多临时文件要下载的情况下浏览器都会受不了

2.2.2很难访问本地的硬件设备，如果真要访问会很麻烦

2.2.3服务器压力很大

3.B/S架构的好处：现如今网页无处不在，很多软件都是采用做一个APP壳子，然后某些部分是嵌入网页的形式来开发软件的。比如QQ，QQ的什么安全设置，空间动态等其实就是网页，再比如微信中点开公众号里面的文章，其实就是打开了一个网页。这样开发可以节省一部分的人力财力，试想一个软件只修改了一点点的内容就要更新下载，这样会需要用到大量的人力和财力，但如果是嵌入网页进去，如果网页内容改变了，用户只需要重新登录或者刷新一下就可以看到最新的内容了。

浏览器解析网页的流程：

1.浏览器内核：浏览器其实就是解析器，用来解析标记的。我们用到的浏览器多种多样，如IE、火狐、2345等等，但看似有这么多的浏览器，其实很多浏览器用到的内核是一样的，下面介绍几个目前较为流行的浏览器内核及其对应的浏览器：

2.解析流程：

2.1文解：

2.1.1服务器上主要有页面结构（标记代码）、素材、JS和CSS、逻辑这些内容，其中除了逻辑，其他都是可以供浏览器下载的。我们在网页上输入一个地址后，DNS域名解析系统会解析域名，得到一个IP地址；

2.1.2浏览器根据这个IP地址携带着请求的路径和客户端信息（如浏览器的版本，操作系统的版本，所用的语言等）去访问服务器，这时服务器并不是立刻把所有的内容都给浏览器下载下来，而是先让浏览器下载页面结构也就是标记代码部分。浏览器接受标记后会马上进行解析，这时网页的大体框架就出来了；

2.1.3如果浏览器在解析过程中碰到素材如照片需要下载时，才会去请求服务器下载素材，有的浏览器为了减轻服务器的压力，会将这些素材缓存到本地，我们平时用360清理浏览器的垃圾其实就是清理这些缓存。所以此处，如果浏览器有这项操作，那么浏览器在请求下载素材时会先去问问本地缓存里有没有，没有再去请求服务器下载，如果浏览器没有这项操作则是直接去请求服务器下载素材，有一张照片就请求一次服务器下载一次，有几张照片就请求几次服务器下载；至此解析结束。

2.2图示如下：

为了防止浏览器在根据IP地址访问服务器时中间会有恶意的拦截导致隐私泄露不安全，发展了两个协议：http和https。如果是https则说明是加密的，安全性可以得到保障，一般设计到金融的网站都会是https。

我们接下来要学的网页技术介绍：

1.html5（标记）：这个其实就是上述解析流程中的标记代码部分，负责搭建一个网页页面结构。HTML有版本之分，4和5的版本区别有点大，5相对4来说，抛弃了一些过时的标记，我们要学的就是5版本。

2.JS（脚本）：它其实也是一种编程语言，只不过是在浏览器中运行的。它主要负责异步的数据加载和简单的逻辑运算（主要的逻辑运算还是由逻辑部分完成）。

3.CSS（样式表）：适用于给每个标记调外观，主要负责网页的简单动作、色彩效果以及绚丽的效果。

4.以下图凯哥学堂的网页为例：整个页面大体的框架结构是由HTML来完成的，而字体效果，各种图片等则是由素材和CSS3完成的，而漂浮着的一些广告、窗口什么的则是由JS完成的。