How the Web works
How the web works provides a simplified view of what happens when you view a webpage in a web browser on your computer or phone.
当你在电脑或者手机上浏览网页时,网络在后台是如何运行的,进而给你呈现出一个简化的页面呢?
This theory is not essential to writing web code in the short term, but before long you’ll really start to benefit from understanding what’s happening in the background.
短期内,这个理论对你编写代码也许是没有必要的,但是,当你理解了后台的具体变化过程,在以后的学习中,你将游刃有余。
1. Clients and servers
Computers connected to the web are called clients and servers. A simplified diagram of how they interact might look like this:
连接到网络的计算机称为客户端和服务器(一台计算机既可以是客户端也可以是服务器),可以通过如下的图表简单了解它们之间的互动:
[metaslider id=”7346″]
Clients are the typical web user’s internet-connected devices (for example, your computer connected to your Wi-Fi, or your phone connected to your mobile network) and web-accessing software available on those devices (usually a web browser like Firefox or Chrome).
客户端是指典型的web用户的互联网连接设备(如电脑连接WI-FI,或者手机连接运营商网络)以及这些设备上可访问web的软件(通常指web浏览器如:火狐,谷歌浏览器)。
Servers are computers that store webpages, sites, or apps. When a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user’s web browser.
服务器是指存储网页,网址或者各种应用的计算机。当客户端设备想去访问一个网页,该网页的副本就会从服务器下载到客户端,并呈现在用户的web浏览器中。
2.The other parts of the toolbox
The client and server we’ve described above don’t tell the whole story. There are many other parts involved, and we’ll describe them below.
上文的描述中,我们只是大致描述了客户端和服务器的内容和关系,接下来,我们将对web相关的其他部分展开描述
For now, let’s imagine that the web is a road. On one end of the road is the client, which is like your house. On the other end of the road is the server, which is a shop you want to buy something from.
现在,让我们想象一下,web就是一条路。路的一头是客户端,就像是你居住的房间。在路的另一边是服务器,就像是一个你想去买点东西的店铺。
[metaslider id=”7352″]
In addition to the client and the server, we also need to say hello to:
除过客户端与服务器,我们也需要了解其他相关模块:
Your internet connection: Allows you to send and receive data on the web. It’s basically like the street between your house and the shop.
网络连接:网络连接允许你在web上发送和接收数据。它像是房间和店铺之间的街道。
TCP/IP: Transmission Control Protocol and Internet Protocol are communication protocols that define how data should travel across the web. This is like the transport mechanisms that let you place an order, go to the shop, and buy your goods. In our example, this is like a car or a bike (or however else you might get around).
TCP/IP:传输控制协议和网络协议是数据在web中传输数据的通信协议,它决定了数据如何在web中进行传输。它就像一种运输机制,可以接收你的命令,去店铺,然后买东西。在本文的例子中,它就像你搭载的交通工具,汽车,自行车或者其他可能使你移动的工具。
DNS: Domain Name Servers are like an address book for websites. When you type a web address in your browser, the browser looks at the DNS to find the web site’s real address before it can retrieve the website. The browser needs to find out which server the website lives on, so it can send HTTP messages to the right place (see below). This is like looking up the address of the shop so you can access it.
DNS:域名服务器就像是网站的通讯录,当你在浏览器中输入一个网址,浏览器首先查看域名服务器,找到网站的真实地址,然后检索开始网站。浏览器需要找出存储网站内容的服务器,之后发送HTTP(如下)消息到响应的地方。这就像是你必须知道你想去的店铺的地址,然后才可以进入店铺。
HTTP: Hypertext Transfer Protocol is an application protocol that defines a language for clients and servers to speak to each other. This is like the language you use to order your goods.
HTTP: 超文本传输协议(Hypertext Transfer Protocol)是一种应用程序协议,它定义了客户端和服务器之间相互通信的语言规则。就像是你进入店铺后用来点餐的语言。
Component files: A website is made up of many different files, which are like the different parts of the goods you buy from the shop. These files come in two main types:
- Code files: Websites are built primarily from HTML, CSS, and JavaScript, though you’ll meet other technologies a bit later.
- Assets: This is a collective name for all the other stuff that makes up a website, such as images, music, video, Word documents, and PDFs.
组件文件:一个网站由多种不同的文件组成。它像是你从商店中购买的不同的商品。这些文件主要有两种类型:
- 代码文件:网站主要由HTML,CSS和JavaScript组成,后续你还会遇到其他技术。
- 静态资源:这是组成网站的所有其他资源的总称。如图片,音乐,视频,Word文档和PDF等。
3.So what happens, exactly?
When you type a web address into your browser (for our analogy that’s like walking to the shop):
当你在浏览器中输入一个网址时,究竟发生了什么?(像是我们例子中的走向你要去的店铺)
1.The browser goes to the DNS server, and finds the real address of the server that the website lives on (you find the address of the shop).
浏览器根据网址映射到域名服务器,通过域名服务器找到网站所在的服务器的真正地址(就像你找到了店铺的地址)
2.The browser sends an HTTP request message to the server, asking it to send a copy of the website to the client (you go to the shop and order your goods). This message, and all other data sent between the client and the server, is sent across your internet connection using TCP/IP.
浏览器发送一个HTTP请求消息到服务器,请求服务器发送一个该网站的副本到客户端(你到达商店,点好了需要的东西)。这个消息和其他所有数据在服务器和客户端之间传输,其传输通过你的网络的TCP/IP协议。
3.Provided the server approves the client’s request, the server sends the client a “200 OK” message, which means “Of course you can look at that website! Here it is”, and then starts sending the website’s files to the browser as a series of small chunks called data packets (the shop gives you your goods, and you bring them back to your house).
3.根据客户端发出的请求,服务器发送一个200OK消息给客户端,它的含义是“你当然可以浏览这个网站了,这就是”,接着服务器开始发送网站文件给浏览器,这些文件被分解为一系列的被称为数据包的小块(商店提供商品给你,你把他们带回家)
4.The browser assembles the small chunks into a complete website and displays it to you (the goods arrive at your door — new shiny stuff, awesome!).
浏览器把这些返回网站的小的数据包组装并且呈现给你(商品到达了你的门口–酷极了)
4.DNS explained
Real web addresses aren’t the nice, memorable strings you type into your address bar to find your favorite websites. They are special numbers that look like this: 63.245.215.20.
网站实际的地址看起来并不直观,你一般在浏览器地址栏输入容易记忆的字符串作为网址来找到你最喜爱的网站.它们其实是特殊的数字组合,如:63.245.215.20.
This is called an IP address, and it represents a unique location on the Web. However, it’s not very easy to remember, is it? That’s why Domain Name Servers were invented. These are special servers that match up a web address you type into your browser (like “mozilla.org”) to the website’s real (IP) address.
它被称为IP地址,代表了一个web上独一无二的的地址,然而,要记住它并不容易,对吗?这就是域名服务器存在的意义,它可以将你输入到浏览器(如mozilla.org )的网址和真正的网址(IP地址)匹配起来。
Websites can be reached directly via their IP addresses. Try going to the Mozilla website by typing 63.245.215.20 into the address bar on a new browser tab.
通过IP地址,网站可以直接到达它所在的服务器。你可以尝试着将IP地址 63.245.215.20 输入到浏览器的地址栏,去到达Mozilla的网站。
[metaslider id=”7360″]
5.Packets explained
Earlier we used the term “packets” to describe the format in which the data is sent from server to client. What do we mean here? Basically, when data is sent across the web, it is sent as thousands of small chunks, so that many different web users can download the same website at the same time. If web sites were sent as single big chunks, only one user could download one at a time, which obviously would make the web very inefficient and not much fun to use.
之前,我们用“包”来描述服务器和客户端之间的数据传输格式,然而,“包”在这里的含义是什么呢?通常,当数据在网络上传输时,实际上是成千上万的小的包被传输,所以,不同的网络用户可以在同一时间加载相同的网站。如果网站数据封装成一个大的数据包,那么同一时间段内只有一个用户可以去下载它,这显然会使得网络变得低效而又无趣。
(完)