前端理论总结(html5)——URL输入到页面渲染过程//离线存储

URL输入到页面渲染过程

1、首先,在浏览器地址栏中输入url

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,则跳到第三步操作。

3、在发送http请求前,需要域名解析(DNS解析),解析获取相应的IP地址。

4、浏览器向服务器发起tcp连接,与浏览器建立tcp三次握手。

5、握手成功后,浏览器向服务器发送http请求,请求数据包。

6、服务器处理收到的请求,将数据返回至浏览器

7、浏览器收到HTTP响应

8、读取页面内容,浏览器渲染,解析html源码

9、生成Dom树、解析css样式、js交互

10、客户端和服务器交互

离线存储

1、页面添加一个:<html lang="en" manifest="a.manifest">

2、创建 cache.manifest

javascript 复制代码
CACHE MANFIEST     //声名为一个存储文件
#v1.0                         //版本号
CACHE:                     //需要缓存的文件
NETWORK:               //只有连网才能访问的资源 
FALLBACK:               //一但前面的文件无法缓存就会缓存后面的文件
(   /A.HTML  /B.HTML    )
相关推荐
华玥作者4 小时前
[特殊字符] VitePress 对接 Algolia AI 问答(DocSearch + AI Search)完整实战(下)
前端·人工智能·ai
Mr Xu_4 小时前
告别冗长 switch-case:Vue 项目中基于映射表的优雅路由数据匹配方案
前端·javascript·vue.js
前端摸鱼匠4 小时前
Vue 3 的toRefs保持响应性:讲解toRefs在解构响应式对象时的作用
前端·javascript·vue.js·前端框架·ecmascript
lang201509284 小时前
JSR-340 :高性能Web开发新标准
java·前端·servlet
好家伙VCC5 小时前
### WebRTC技术:实时通信的革新与实现####webRTC(Web Real-TimeComm
java·前端·python·webrtc
未来之窗软件服务6 小时前
未来之窗昭和仙君(六十五)Vue与跨地区多部门开发—东方仙盟练气
前端·javascript·vue.js·仙盟创梦ide·东方仙盟·昭和仙君
嘿起屁儿整6 小时前
面试点(网络层面)
前端·网络
VT.馒头6 小时前
【力扣】2721. 并行执行异步函数
前端·javascript·算法·leetcode·typescript
phltxy7 小时前
Vue 核心特性实战指南:指令、样式绑定、计算属性与侦听器
前端·javascript·vue.js
Byron07078 小时前
Vue 中使用 Tiptap 富文本编辑器的完整指南
前端·javascript·vue.js