hello,大家好!好久没更新了,不知不觉一年又过去了。借此2022开年之际,开启自己的新篇幅,系统复习地总结一下前端基础,css,html,js。该专栏主要是根据MDN Web Docs文档进行学习,如果想自己总结或者学习的话,可以直接移步于此MDN。那么,让我们开始第一章。
什么是web?
web万维网,简单而言就是我们生活中常见的网站。当然建立起一个网站不是那么容易的,如果想要自己建立一个网站就要努力学习各种知识啦。网站上看到的网页是比较容易实现的,只要我们有对应编辑器与浏览器,那么我们写上一个html文件,浏览器会自动帮我们展示出来。这些后续我们一 一展示出来。
web工作原理
简单来说,当我们打开一个网页浏览的时候,我们要知道发生了什么。首先我们要先知道客户端和服务器。客户端就是我们用于连接上网的设备和软件,比如我们的手机。服务器是用来存储网页、站点和应用的计算机,就相当于存储文件的仓库。连接客户端与服务器的就是web,web就是两者之间的路,这条路不是光秃秃的,它是一条繁华的路,由各种各样的元素构成!
- 网络连接: 允许你在互联网上发送和接受数据。没有它两者就无法沟通。
- TCP/IP: 传输控制协议和因特网互连协议用来定义数据如何传输的通信协议。就相当于是沟通方式。
- DNS: 域名系统服务器像是一本网站通讯录。相当于路的地址,浏览器需要先通过域名,找到存放对应网页的服务器。
- HTTP: 超文本传输协议是一个定义客户端和服务器间交流的语言的协议(protocol )。相当于通过到达目的地后你想说的话
- 组成文件: 一个网页由许多文件组成,就像商店里不同的商品一样。这些文件有两种类型:
- 代码 : 网页大体由 HTML、CSS、JavaScript组成,不过你会在后面看到不同的技术。
- 资源 : 这是其他组成网页的东西的集合,比如图像、音乐、视频、Word文档、PDF文件。
接下来的就是前端面试经典题目。在网址上输入url后,发生了什么?这里我们简单说一下。
首先浏览器根据我们前面说的域名,找到存放网页服务器的实际地址,接着发送http请求信息到服务器拷贝一份网页到客户端,之间的传递就是TCP/IP协议,经过“三次挥手,四次握手”,状态码返回200我们就能在客户端看到这个网页啦。
解析文件顺序
我们还需了解下组成文件的解析顺序,浏览器首先会解析HTML文件,通过文件中的link跟script指向外部的css和js文件,将解析的HTML文件生成一个DOM树,CSS生成CSSOM树,并且会编译和执行JS脚本文件。通过这些绘制出界面,用户也就可以跟网页进行交互啦。