前端理论总结(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    )
相关推荐
还是鼠鼠2 小时前
图书管理系统 Axios 源码 __删除图书功能
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
轻口味2 小时前
Vue.js `Suspense` 和异步组件加载
前端·javascript·vue.js
m0_zj3 小时前
8.[前端开发-CSS]Day08-图形-字体-字体图标-元素定位
前端·css
还是鼠鼠3 小时前
图书管理系统 Axios 源码__编辑图书
前端·javascript·vscode·ajax·前端框架
北极象3 小时前
vue3中el-input无法获得焦点的问题
前端·javascript·vue.js
百度网站快速收录4 小时前
网站快速收录:如何优化网站头部与底部信息?
前端·html·百度快速收录·网站快速收录
Loong_DQX4 小时前
【react+redux】 react使用redux相关内容
前端·react.js·前端框架
GISer_Jing4 小时前
react redux监测值的变化
前端·javascript·react.js
engchina4 小时前
CSS 样式化表格:从基础到高级技巧
前端·css
m0_528723814 小时前
react中useEffect的使用
前端·javascript·react.js