曾经有面试题是这样的:"描述在浏览器的地址栏中输入:http://www.baidu.com 后发生了什么?"。

1、服务端返回baidu页面资源,浏览器载入html

2、浏览器开始解析

3、发现link,发送请求载入css文件

4、浏览器渲染页面

5、发现图片,发送请求载入图片,并重新渲染

6、发送请求js文件,阻塞渲染。如果js对dom进行了操作,则会进行rerender

对于支持离线存储的页面,浏览器和服务器的交互又是如何呢?

首次载入页面:

1-6 : 同上

7:请求页面中需要缓存的页面和数据,就算在之前的步骤中已经请求过(这是个耗能的地方)

8:服务器返回所有请求文件,浏览器进行本地存储

再次载入页面:

1:发送请求

2:使用本地存储的离线文件

3:解析页面

4:请求服务端的manifest文件,判断是否有改变,返回304则表示没有改变进入步骤5,否则进入步骤6

5:进入首次载入页面的7-8

6:使用本地存储,不重新请求

浏览器地址栏背后的logic的更多相关文章

  1. JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址

    JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址 var stateObject = {}; var title = "改变后的网址的标题"; var ...

  2. 调出js控制台可以在浏览器地址栏输入about:blank

    调出js控制台可以在浏览器地址栏输入about:blank,如果不输入about:blank,直接 打开一个新的页面,有可能输出的结果不准确.也就是说变量有可能被其他的影响到, 造成结果不准确.

  3. js获取当前浏览器地址栏的链接,然后在链接后面加参数

    比如访问www.baidu.com,url显示成www.baidu.com/?form <script type="text/javascript"> if(locat ...

  4. JS获取浏览器地址栏的多个参数值的任意值

    getParamValue("id"); //http://localhost:2426/TransactionNotes.aspx?id=100 //返回值是100: // 根据 ...

  5. 把post请求的地址粘贴到浏览器地址栏敲回车报错405[Method Not Allowed]

    为什么把post请求的地址粘贴到浏览器地址栏敲回车会报405?原因:在浏览器地址栏敲回车,浏览器默认是以get方式发送请求,而你的请求是post,这样当然会报405了: 405:方法不允许,不支持ge ...

  6. 浏览器地址栏运行JavaScript代码

    这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javascript:开头后跟要执行的语句.比如: javascript:alert('hello from ad ...

  7. JS实现页面跳转 浏览器地址栏保持不变

    JS实现页面跳转 浏览器地址栏保持不变 在公司内部框架中,发现点击超链接,页面发生跳转,而浏览器地址栏URL始终保持不变.分析其实现机制,响应A标签onclick事件,通过Ajax向服务器端发送htt ...

  8. 将浏览器地址栏中的 Request 参数显示成中文

    希望实现:在当 JSP 页面发起请求,或者 Servlet 跳转时,地址栏中的参数可以显示成中文. 在通常情况下,浏览器地址栏中的URL地址为了适配不同的浏览器,会将URL地址信息转码为"I ...

  9. 从浏览器地址栏输入url到显示页面的步骤

      在浏览器地址栏输入URL 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤 HTTP1.0提供Expires,值为一个绝对时间表示缓存新鲜日期 HTTP1.1增加了Cache-Cont ...

随机推荐

  1. js,jquery获取浏览器信息

    1.js获取: 查看:window.navigator 2.jQuery获取: chrome firefox 推荐使用navigator获取userAgent然后去正则匹配 参考匹配规则:http:/ ...

  2. Spring+SpringMVC+MyBatis+LogBack+C3P0+Maven+Git小结(转)

    摘要 出于兴趣,想要搭建一个自己的小站点,目前正在积极的准备环境,利用Spring+SpringMVC+MyBatis+LogBack+C3P0+Maven+Git,这里总结下最近遇到的一些问题及解决 ...

  3. sql数据库不能用localhost/phpMyadmin登陆,真正要修改的文件是哪个

    今天,数据库抽风,在地址栏输入localhost/phpmyadmin尽然显示没有访问权限的英文....查了资料都是有好多解决方案,基本都是先点击绿色的w图标,然后找到apache下的httpd.co ...

  4. Thinkphp回顾(五)之前台模板中的基本语法

    一.导入CSS和JS文件 的三种方式  (了解) 1.link方式(常规) <link rel=’stylesheet’ type=’text/css’ href=’__PUBLIC__/Js/ ...

  5. linux git的安装与使用

    一. Git安装. sudo apt-get install git 二.Git提交到远程仓. 1.到github或其coding(提供免费的私有仓)创建项目. 2.项目目录下初始化git. sudo ...

  6. [原]ComFriendlyWaitMtaThreadProc

    c++代码(大体逻辑没问题,细节需要确认) DWORD __stdcall *ComFriendlyWaitMtaThreadProc(LPVOID lpThreadParameter) { CoIn ...

  7. 系统建设 > 医疗集团CRM系统建设步骤与分析

    概述 医院客户关系管理系统(Customer Relationship Management,简称CRM)是一个完善的“以病人为中心”的管理系统,为集团/医院/总院分院/管理机构提供院前.院中.院后的 ...

  8. Linux 视频设备驱动V4L2最常用的控制命令

    http://blog.csdn.net/shaolyh/article/details/6583226 Linux 视频设备驱动V4L2最常用的控制命令使用说明(1.02) 命令 功能 VIDIOC ...

  9. tomcat7+jdk1.8一键安装脚本

    #!/bin/bash #--------------------------------------------------------------------- # # Author : 大象无形 ...

  10. [OC] 理解Bitcode:一种中间代码

    Tip:参考资料 理解Bitcode:一种中间代码 (内容从该博客摘录的.本随笔摘录些简要内容.) App Distribution Guide – App Thinning (iOS, watchO ...