`
sodler
  • 浏览: 14572 次
  • 性别: Icon_minigender_1
文章分类
社区版块
存档分类
最新评论

页面从输入 URL 到页面加载显示完成这个过程中都发生了什么

 
阅读更多

  1、浏览器会开启一个线程来处理这个请求,对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;

  2、调用浏览器内核中的对应方法,比如 WebView 中的 loadUrl 方法;

      3、通过DNS解析获取网址的IP地址,设置 UA 等信息发出第二个GET请求;

  4、进行HTTP协议会话,客户端发送报头(请求报头);

      5、进入到web服务器上的 Web Server,如 Apache、Tomcat、Node.JS 等服务器;

      6、进入部署好的后端应用,如 PHP、Java、JavaScript、Python 等,找到对应的请求处理;

  7、处理结束回馈报头,此处如果浏览器访问过,缓存上有对应资源,会与服务器最后修改时间对比,一致则返回304;

      8、浏览器开始下载html文档(响应报头,状态码200),同时使用缓存;

      9、文档树建立,根据标记请求所需指定MIME类型的文件(比如css、js),同时设置了cookie;

      10、页面开始渲染DOM,JS根据DOM API操作DOM,执行事件绑定等,页面显示完成。

 

简言之:

  浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求;

  服务器交给后台处理完成后返回数据,浏览器接收文件(HTML、JS、CSS、图象等);

  浏览器对加载到的资源(HTML、JS、CSS等)进行语法解析,建立相应的内部数据结构(如HTML的DOM);

  载入解析到的资源文件,渲染页面,完成。

分享到:
评论

相关推荐

    自己写的一个用Url的分页控件,非常精简小巧

    在IT行业中,分页控件是网页或应用程序中不可或缺的一部分,它主要用于管理大量数据的显示,使得用户可以方便地浏览和导航。标题提到的“自己写的一个用Url的分页控件”指的是一个自定义的分页解决方案,该方案利用...

    在对话框中打开HTML网页

    4. 可以通过WebBrowser控件的事件处理程序,如DocumentComplete,来监听网页加载完成,进行后续操作。 通过这样的方式,我们可以高效地在对话框中实现HTML网页的展示,为用户提供直观且丰富的交互体验。这样的技术...

    利用Frontpage制作一个小小的网页

    在这个小练习中,我们可以从创建新页面开始,逐步添加文本、图片、链接等元素,最后发布到互联网,完成一个个人的小型网页作品。 **一、Frontpage的基本操作** 1. **新建网页**:启动Frontpage,选择“文件”菜单...

    ajax动态加载关键词提示

    "Ajax动态加载关键词提示"是Ajax应用的一个常见场景,它主要用于搜索框或者输入字段,当用户输入时,后台服务通过Ajax请求获取匹配的关键词,并实时显示给用户作为提示。这种功能在许多网站和应用中都有应用,例如...

    html输入QQ 表情

    在HTML页面中实现输入QQ表情的功能,这涉及到Web开发中的富文本编辑器和自定义插件的使用。QQ表情作为一种常见的社交元素,被广泛应用于聊天、论坛和博客等场景,将其整合到HTML页面中,可以增强用户的交互体验,...

    AJAX实例:根据邮编自动完成地址信息

    本实例将探讨如何利用AJAX根据用户输入的邮编实现自动完成地址信息的功能,这在地图应用、电子商务网站或任何需要地理位置信息的系统中都非常常见。 首先,我们要了解AJAX的基本工作原理。它通过JavaScript创建...

    window设定打开和关闭窗口的方法

    - `window.onload`和`window.addEventListener('load')`: 当整个页面加载完成时触发的事件,常用于页面初始化操作。 4. 跨域安全:在现代浏览器中,出于安全考虑,`window.open()`可能受到同源策略的限制,无法...

    install-ietester 多版本IE页面测试

    这款软件允许用户在同一环境中运行并测试IE5、IE6、IE7、IE8等多个版本,帮助开发人员确保他们的Web工程在各个IE版本中都能正常工作。 **1. IETester的功能介绍** IETester的主要功能包括: - **多版本IE模拟**:...

    ajax技术局部刷新

    在给出的示例代码中,首先通过`getXmlHttpRequest()`函数创建了XMLHttpRequest实例,这是一个跨浏览器的实现方式,确保在不同版本的IE和其他浏览器中都能正常工作。 在`checkNameExist(uname)`函数中,Ajax的实际...

    IETester浏览器调试工具IE调试工具

    它集成了从Internet Explorer 5.5到最新版本的所有内核,使得用户可以在同一环境中测试网页在不同IE版本下的表现。这款工具对于那些需要确保网站在各个IE版本中都能正常运行的开发人员来说,无疑是节省时间和提高...

    JAVA做的网页浏览器

    9. **调试工具**:虽然这个项目可能没有实现复杂的开发者工具,但了解浏览器开发者工具的工作原理,可以帮助理解网页加载和运行过程。 10. **性能优化**:理解如何通过缓存策略、异步处理和优化资源加载来提高...

    一个运用了AJax登录/XML存储数据的的程序

    Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这种技术在现代Web开发中广泛使用,尤其是在用户界面的交互性和响应性...

    注册,上传图片,显示

    3. 加载优化:利用懒加载技术,只有当图片进入视口时才开始加载,提高页面加载速度。 4. 图片防盗链:防止其他网站盗用图片资源,可以设置防盗链策略,如检查HTTP Referer字段。 5. 适应性布局:图片应适应不同设备...

    一个可以随机抽取任何2数之间的asp代码

    综合以上知识点,这个ASP代码可能包含一个接收用户输入的最小值和最大值,通过VBScript的`Rnd`函数生成随机数,然后将其显示在页面上的过程。由于具体的代码并未给出,实际实现可能略有不同,但以上是基于描述和标签...

    Ajax-应用

    Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这种技术的核心在于利用JavaScript与服务器进行后台通信,实现页面的局部刷新...

    AJAX使用场景分析

    一种解决方案是在页面上提供“链接到此页面”的选项,或者通过URL链接中添加无效的标记来实现。 综上所述,AJAX在多种应用场景中都能提供显著的优势,但同时也需要注意其适用范围和潜在的问题。合理利用AJAX技术,...

    Web Browser From VB6 to VB.net

    1. **导航**:用户可以通过输入URL或使用历史记录和书签来浏览不同的网站。 2. **前进/后退**:支持浏览历史,允许用户在访问过的页面之间切换。 3. **加载状态**:显示页面加载进度,以及错误处理,如404或网络中断...

    55种网页常用小技巧

    8. `<noscript><iframe src=*.html></iframe></noscript>`:这个技术尝试阻止用户“另存为”网页,因为 noscript 标签在 JavaScript 不启用的环境下会显示,而 iframe 会加载一个空白页,避免了源代码被直接保存。...

    主机域名PHP+AJAX的whois查询程序-whois

    在这个系统中,AJAX技术用于在用户输入域名后异步发送查询请求到服务器,然后接收并处理返回的结果。JavaScript库如jQuery提供了方便的API来实现AJAX功能。 4. **前端交互**: 用户界面通常由HTML和CSS构建,...

    WebKit Objective-C Programming Guide

    无论你是希望为你的应用添加网页浏览功能,还是想深入理解网页加载和渲染过程,这份指南都将为你提供宝贵的指导。 #### 二、WebKit核心类解析 WebKit的核心架构围绕着几个关键的类,这些类分别负责不同的功能: 1...

Global site tag (gtag.js) - Google Analytics