1. 简要介绍
先安装好Ngnix或者Apache,接着把写好的网页文件放到指定目录,然后在浏览器中输入网址就可以打开网页了。
至于网页文件一般只有三种：html（骨架）、css(设置样式，大小、颜色、位置等)、javascript文件一般是处理交互或者与后端通信的。但是只知道前端网页的这些基础知识是不够的，特别是想成为前端架构师的程序员。
下面分两个部分讲解前端网页的工作原理。
2. 前端网页的工作原理
2.1. 浏览器加载网页
在浏览器输入网址后，浏览器通过网址的协议、域名、端口部分与服务器（Nginx）建立连接，之后服务器根据路径部分寻找对应的网页资源，并将其发送给浏览器。
网址请求返回的一般是Html文件或者Html格式的内容。(动态网站PHP返回Html格式的内容)
浏览器接收和处理Html文件的过程是流式的。（也就是说浏览器每接收到一部分呢内容就会处理一部分，Html的标签是一对一的是为了方便流式处理）
当发现Html文件中需要下载其他资源时，会开始下载其他资源，包括css、javascript、图片文件等。
值得注意的是自愿文件的下载都是异步的，不会等上一个资源文件下载后，再开始下一个资源的下载。
所以，为了避免Javascript报错，其初始化的操作一般是放在onload事件之后的。（确保此时资源文件都加载完毕）
2.2. 浏览器运行网页
浏览器显示网页大概有四个步骤，构建Dom树、构建呈现树(render tree)、布局处理、绘制。
构建Dom树就是解析html文件，并把元素标签转化成Dom节点（一种数据结构）
构建呈现树，就是在Dom树数据结构的基础上，增加css和元素标签中的样式属性数据。
之后的布局处理，会根据当前的浏览器窗体大小，计算出每一个元素的确切坐标。
最后的绘制阶段就是把网页描画出来。
顺便一提，由于Css文件会影响呈现树的构建，所有Css文件一般放在Html文件的头部应用（<head></head>）
当然这个过程也不是一次性完成的，为了尽快显示网页，浏览器完成一部分内容解析后，就会把该部分显示出来。以上是html、css文件处理.
JavaScript文件会被浏览器的JavaScript解析器处理。
JavaScript有两个作用，一是处理交互、二是后端通信。
其中需要特别说明的是 JavaScript处理交互时，往往会修改页面的元素(如按钮变色等)。(此类操作都被称为DOM树操作)（JavaScript是无法修改CSS内容的）Dom操作说白了就是对HTML内容进行修,或者说是对DOM树数据的修改,当DOM树数据被修改后，上面提到的网页显示过程就会重新执行一遍，由于javascript会影响Dom树的构建，所以一般放在Html文件的底部引用，这样有利于网页尽快显示出来。
2.3. 前端的整个工作原理
知其然，知其所以然，技术世界才会变的更加通透。
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
