IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资

      网页从输入网址到渲染完成经历了哪些过程?

      • 发布时间:
        2023-05-22
      • 版权所有:
        云和教育
      • 分享:

      网页从输入网址到渲染完成经历了以下过程:

      1.DNS解析(Domain Name System Resolution)

      浏览器首先将输入的网址发送给DNS服务器,以获取网址对应的IP地址。DNS服务器将网址解析为对应的IP地址。

      2.TCP连接(Transmission Control Protocol)

      浏览器使用获取到的IP地址与Web服务器建立TCP连接。TCP连接确保数据的可靠传输。

      3.发送HTTP请求

      一旦TCP连接建立成功,浏览器会向Web服务器发送HTTP请求。HTTP请求包含了请求的类型(GET、POST等)、路径、头部信息以及其他参数。

      4.服务器处理请求

      Web服务器接收到浏览器发送的HTTP请求后,根据请求的内容进行处理。服务器可能会读取文件、查询数据库或执行其他操作来生成需要的网页内容。

      5.服务器发送响应

      Web服务器生成响应内容,并以HTTP响应的形式发送回浏览器。响应包含了响应的状态码(例如200表示成功、404表示页面未找到等)、头部信息以及响应的内容。

      6.接收响应

      浏览器接收到服务器发送的HTTP响应后,开始接收响应的内容。响应的内容通常是HTML、CSS、JavaScript等文件。

      7.解析文档

      浏览器对接收到的HTML文档进行解析,构建DOM(Document Object Model)树,这是由HTML标记构成的树形结构,表示网页的结构和内容。

      8.加载资源

      浏览器解析HTML文档时,如果遇到外部资源(例如CSS、JavaScript、图像等),会发送额外的HTTP请求来获取这些资源。

      9.渲染页面

      浏览器根据构建好的DOM树和CSS样式信息,将网页内容渲染到用户的屏幕上。这包括布局、绘制文本、应用样式等过程。

      10.执行JavaScript

      如果HTML文档中包含JavaScript代码,浏览器会执行这些代码,以添加交互性和动态效果到页面上。

      11.加载完成

      当所有资源都加载完成,页面渲染完毕后,网页加载过程就完成了。

      以下是一个简单的代码演示,展示了网页加载的过程:

      const url = 'https://example.com'; // 输入的网址
      
      // DNS解析
      const ipAddress = dnsLookup(url);
      
      // 建立TCP连接
      const socket = establishTCPConnection(ipAddress);
      
      // 发送HTTP请求
      const httpRequest = createHTTPRequest(url);
      socket.send(httpRequest);
      
      // 接收响应
      const httpResponse = socket.receive();
      
      // 解析文档
      const domTree = parseHTML(httpResponse);
      
      // 加载资源
      const resourceURLs = extractResourceURLs(domTree);
      for (const resourceURL of resourceURLs) {
        const resourceRequest = createHTTPRequest(resourceURL);
        socket.send(resourceRequest);
        const resourceResponse = socket.receive();
        cacheResource(resourceURL, resource response);
        }
      // 渲染页面
      renderPage(domTree);
      // 执行JavaScript
      executeJavaScript(domTree);
      // 加载完成
      console.log("页面加载完成");
      function dnsLookup(url) {
      // 执行DNS解析逻辑
      // 返回解析得到的IP地址
      }
      function establishTCPConnection(ipAddress) {
      // 建立TCP连接逻辑
      // 返回建立的Socket对象
      }
      function createHTTPRequest(url) {
      // 创建HTTP请求逻辑
      // 返回HTTP请求对象
      }
      function parseHTML(httpResponse) {
      // 解析HTML文档逻辑
      // 返回DOM树对象
      }
      function extractResourceURLs(domTree) {
      // 提取资源URL逻辑
      // 返回资源URL列表
      }
      function cacheResource(url, response) {
      // 缓存资源逻辑
      }
      function renderPage(domTree) {
      // 渲染页面逻辑
      }
      function executeJavaScript(domTree) {
      // 执行JavaScript逻辑
      }

      请注意,这只是一个简化的示例代码,实际的实现可能会更加复杂,并涉及到更多的细节和处理。