前端理论总结(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    )
相关推荐
Zestia7 分钟前
页面点击跳转源代码?——element-jumper插件实现
前端·javascript
前端小白19957 分钟前
面试取经:工程化篇-webpack性能优化之优化loader性能
前端·面试·前端工程化
PineappleCoder8 分钟前
大小写 + 标点全搞定!JS 如何精准统计单词频率?
前端·javascript·算法
zhangbao90s9 分钟前
Web组件:使用Shadow DOM
前端
hhy前端之旅9 分钟前
语义版本控制:掌握版本管理的艺术
前端
coding随想9 分钟前
深入浅出DOM操作的隐藏利器:Range(范围)对象——掌控文档的“手术刀”
前端
前端小白199510 分钟前
面试取经:工程化篇-webpack性能优化之减少模块解析
前端·面试·前端工程化
一枚前端小能手10 分钟前
🏗️ 项目越来越大维护不动了,微前端架构了解一下
前端
文艺理科生19 分钟前
Nuxt.js入门指南-Vue生态下的高效渲染技术
前端·vue.js·nuxt.js
夏小花花23 分钟前
vue3 ref和reactive的区别和使用场景
前端·javascript·vue.js·typescript