【网站架构】快速了解前端网页的工作原理。Html、Css、JavaScript是如何工作的？Dom操作是什么？
前几期文章讲了一些网站架构的宏观知识，包括业务架构、技术架构、部署架构等。从本期开始，会深入前端、后端、云计算部分，分享一下在实际项目当中，架构都需要考虑些什么问题。这期主要介绍前端网页的工作原理一般来说，安装好Nginx或者Apache， 接着把写好的网页文件放到指定目录 ，然后在浏览器中输入网址就可以打开网页了 。简单介绍1至于网页文件，只有三种Html、Css、JavaScript文件简单的
前几期文章讲了一些网站架构的宏观知识，包括业务架构、技术架构、部署架构等。从本期开始，会深入前端、后端、云计算部分，分享一下在实际项目当中，架构都需要考虑些什么问题。
这期主要介绍前端网页的工作原理
一般来说，安装好Nginx或者Apache， 接着把写好的网页文件放到指定目录 ，然后在浏览器中输入网址就可以打开网页了 。
简单介绍1
至于网页文件，只有三种Html、Css、JavaScript文件
简单的介绍2
Html文件一般是写网页标签的，也就是编写网页的骨架，Html文件还可以指定其引用的Css、JavaScript文件
Css文件是设置样式的，就是大小、颜色、位置等
JavaScript文件一般是处理交互或与后端通信的
下面分两个部分深入介绍前端网页的工作原理
1、浏览器加载网页
2、浏览器运行网页
1、浏览器是如何加载网页
在浏览器输入网址，通过网址的协议、域名、端口部分与服务器（Nginx等）建立连接，之后，服务器会根据路径部分寻找对应的网页资源并将其发送给浏览器
浏览器加载网页1
网址请求返回的一般是Html文件或者Html格式的内容（动态网站PHP返回Html格式的内容）
浏览器加载网页2
浏览器接收和处理Html文件的过程是流式的
也就是说，浏览器每接收到一部分内容就会处理一部分（Html的标签是一对一对的是为了方便流式处理）
当发现Html文件中需要下载其他资源时会开始下载其他资源，包括Css、JavaScript、图片文件等
值得注意的是，资源文件的下载都是异步的，不会等一个资源下载完再开始下一个资源的下载。
所以，为了避免JavaScript报错，其初始化的一些操作一般是放在onload事件之后的（确保此时资源文件都加载完毕）
2、浏览器是如何显示网页
浏览器显示网页大概有4步骤
浏览器显示网页1
构建Dom树、构建呈现树（render tree）、布局处理、绘制
构建Dom树就是解析Html文件，并把元素标签转换成Dom节点（一种数据结构）
呈现树是网页显示部分的数据结构
构建呈现树就是会解析Css文件和元素标签中的样式属性以完善呈现树
由于Css文件会影响呈现树的构建，所以一般放在Html文件的头部引用（<head></head>），这样就会不会出现网页一瞬间混乱（之后又好了）的情况
之后的布局处理会根据当前的浏览器窗体大小，计算出每一个元素的确切坐标
最后的绘制阶段，就是把网页描画出来。
当然，这个过程也不是一次性完成的，为了尽快显示网页，浏览器完成一部分内容解析后，即会把该部分显示出来
以上是Html文件、Css文件的处理，那JavaScript文件呢
JavaScript文件会被浏览器的JavaScript解析器处理
浏览器显示网页2
JavaScript有两个作用，一是处理交互、二是与后端通信
其中需要特别说明的是，
JavaScript处理交互时，往往会修改页面的元素（如按钮变色等）
此类操作都被称为DOM树操作（JavaScript是无法修改CSS内容的）
而DOM树操作说白了就是对HTML内容进行修改
或者说是修改了DOM树的数据
当DOM树数据被修改后，上面提到的网页显示过程就会重新执行一遍
由于JavaScript会影响DOM树的构建，所以一般放在Html文件的底部引用，这样有利于网页尽快显示出来
总结
综上，前端的整个工作原理是这样的
整个工作原理
讲完了前端网页的工作原理，下一期将会讲解前端架构在实际项目当中需要注意的问题
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
5
0- 0
已为社区贡献5条内容
所有评论(0)