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

devtools/2024/11/18 17:43:09/
  • 1. 输入url,并点击搜索
  • 2. 从浏览器获取缓存(从浏览器http的header中读取,缓解服务器压力,提高页面加载效率)
    • 灰色的200代表是获取的浏览器缓存的数据,黑色的200是后端返回的数据
    • 协商缓存(优先级高)
      • 如果缓存有效(HTTP头部的expires【存过期时间,会存在浏览器和服务端时间有间隔的问题】和cache-control【存有效时间】(优先级高)),则直接将缓存中的数据显示在页面上
      • 如果缓存过期,从header中找到对应的参数,携带到请求中发送给服务器,服务器根据对应的参数,判断对应的资源是否更新,如果更新了就返回200状态码和对应的数据;未更新就返回304状态码(更新缓存过期时间并使用对应的缓存)
    • 强制缓存
      • 如果存在强制缓存,将其渲染在页面上
    • 如果缓存在硬盘内存(localStorage),浏览器关闭后,再次打开仍然存在,如果在内存缓存(sessionStorage),浏览器关闭后,数据被销毁
    • 如果没有缓存或者缓存过期,则进行下一步
  • 3. 解析URL获取协议,域名和端口号
  • 4. 组装http请求报文
  • 5. 通过DNS域名解析获取IP
  • 6. 建立TCP连接
  • 7. 发送http请求
  • 8. 通过TCP连接接受后端发送来的数据
  • 9. 解析响应报文
  • 10. 生成虚拟DOM
    • 可以加快页面更改速度,只需要用diff算法对比新旧虚拟DOM的变化,更改发生变化的页面元素
    • 缺点:占内存,页面越复杂越占内存
  • 11. 初始化响应数据
  • 12. 根据HTTP生成DOM树,CSS生成CSSOM树
  • 13. 渲染可见元素(不可见:<script>标签、<meta>【用于指定网页的描述,关键词】标签,设置为display:none或其他不可见的元素)
  • 14. 根据CSS规则渲染相应元素
  • 15. 解析js
  • 16. 显示页面

http://www.ppmy.cn/devtools/135000.html

相关文章

ui->tableView升序

亮点 //设置可排序ui->tableView->setSortingEnabled(true);ui->tableView->sortByColumn(0,Qt::AscendingOrder); //排序void Widget::initTable() {//设置焦点策略:ui->tableView->setFocusPolicy(Qt::NoFocus);//显示网格线:ui->tableView->se…

十堰市数据治理:大数据治理在智慧城市中的应用探索

十堰市数据治理&#xff1a;大数据治理在智慧城市中的应用探索 在数字化时代背景下&#xff0c;智慧城市的建设已成为推动城市治理现代化、提升公共服务水平的重要途径。十堰市作为中国领军智慧城市之一&#xff0c;其在数据治理方面的探索和实践&#xff0c;为大数据技术在智…

基于python Django的boss直聘数据采集与分析预测系统,爬虫可以在线采集,实时动态显示爬取数据,预测基于技能匹配的预测模型

本系统是基于Python Django框架构建的“Boss直聘”数据采集与分析预测系统&#xff0c;旨在通过技能匹配的方式对招聘信息进行分析与预测&#xff0c;帮助求职者根据自身技能找到最合适的职位&#xff0c;同时为招聘方提供更精准的候选人推荐。系统的核心预测模型基于职位需求技…

Linux性能优化之火焰图简介

Linux 火焰图&#xff08;Flame Graph&#xff09;是一种可视化工具&#xff0c;用于分析程序性能问题&#xff0c;尤其是 CPU 使用情况。它展示了程序中函数调用的层次结构和各个调用栈占用的时间比例。 以下是详细介绍&#xff0c;包括火焰图的工作原理、生成步骤和实际使用中…

vue计算属性 初步使用案例

<template><div><h1>购物车</h1><div v-for"item in filteredItems" :key"item.id"><p>{{ item.name }} - {{ item.price }} 元</p><input type"number" v-model.number"item.quantity"…

论文《基于现实迷宫地形的电脑鼠设计》深度分析(四)——现实迷宫算法

论文概述 《基于现实迷宫地形的电脑鼠设计 》是由吴润强、庹忠曜、刘文杰、项璟晨、孙科学等人于2023年发表的一篇优秀期刊论文。其针对现阶段电脑鼠计算量庞大且不适用于现实迷宫地形的问题&#xff0c;特基于超声波测距与传统迷宫算法原理&#xff0c;设计出一款可在现实…

每日计划-1117

1. 完成 169. 多数元素 class Solution { public:int majorityElement(vector<int>& nums) {// 使用哈希表来统计每个元素出现的次数unordered_map<int, int> countMap;int n nums.size();for (int num : nums) {// 如果元素已经在哈希表中&#xff0c;增加其…

MySQL:联合查询(2)

首先写一个三个表的联合查询 查询所有同学的每门课成绩&#xff0c;及同学的个人信息 1.我们首先要确定使用哪些表 学生表&#xff0c;课程表&#xff0c;成绩表 2.取笛卡尔积 select * from score,student,course; 3. 确定表与表之间的联合条件 select * from score,stud…