NMS项目——拓展知识网（一）浏览器为何物？

最新推荐文章于 2022-05-09 21:39:24 发布

独孤文彬

最新推荐文章于 2022-05-09 21:39:24 发布

阅读量1k

点赞数

分类专栏： ●编程语言

本文链接：https://blog.csdn.net/t131452n/article/details/46483261

版权

●编程语言专栏收录该内容

111 篇文章 0 订阅

订阅专栏

引言：从接触电脑开始，就接触到了浏览器这个家伙，可是真的认识她这么久了，连她的工作原理，内部构造一点度不了解，有些过意不去啊！今天咱们来一探究竟吧！

宏观导图：

定义：万维网(Web)服务的客户端浏览程序。可向万维网(Web)服务器发送各种请求，并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。

内核：分成两个部分，一个是渲染引擎，另一个是js引擎。但是后来js引擎越来越独立，就独立与内核之外了。所以一般说内核是指的渲染引擎。所谓的渲染引擎是指：它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。js引擎是指：解析Javascript语言，执行javascript语言来实现网页的动态效果。

构成：（详情如下图）

HTML在浏览器中渲染过程：（申明：该内容摘自网络！如有不当之处望作者见谅）

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>标题</title>
    <link href="../css/css.css" rel="Stylesheet" type="text/css" />
</head>
<body>
    <div>
    </div>
    <img src="images/test.jpg" alt="示例图片" />
    <br />
    <p>
    </p>
</body>
<script type="text/javascript" src="js/js.js"></script>
</html></span>

我们现在要在浏览器中显示以上结构的HTML。1.客户端浏览器开始从用户向服务器发出请求，服务器响应的将如上的HTML返回给请求的客户端浏览器中。 
   2.加载从<html>标签开始，并发现<head>标签内有个外部样式文件要加载 
  
<span style="font-family:KaiTi_GB2312;font-size:18px;"><link href="../css/css.css" rel="Stylesheet" type="text/css" /></span>3.这时客户端浏览器又向服务器发出一个请求加载css.css文件，服务器响应。4.此时客户端浏览器继续加载html文件里<body>里的标签，在css.css文件加载完后，同时开始渲染页面。5.客户端浏览器在<body>里的标签中发现一个<img>标签并且引用了服务器进而的一张名为test.jpg的图片.客户端浏览器又向服务器发出一次请求。而浏览器不会因为此时正在加载<img>标签里的图片而停止等待图片加载完，浏览器继续渲染还未完成的部分。6.<img>标签里的图片加载完了，则要显示出来，同时图片会占有一定的面积，又会影响到后面的布局，浏览器不得不又回来重新渲染一次这部分。 
        7.总算把body里的标签加载及渲染完后，浏览器又发现了一段代码： 
       
<span style="font-family:KaiTi_GB2312;font-size:18px;"><script type="text/javascript" src="js/js.js"></script></span>8.浏览器又立刻向服务器发出请求加载js.js文件，服务器响应。9.浏览器又在js.js文件中发现了一段代码是让<div>标签隐藏的代码，此时浏览器又要重新去渲染被隐藏的<div>部分。 
            10.最后到浏览器发现了</html>为止。 
           
            小结：内容只是浏览器的冰山一角，但是对于现在来说，做一个宏观了解即可。以后遇到了再查，不怕不知道就怕不知道，先解决就怕不知道的问题吧！