第五十七天

    HTML5

●Web 存储

Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能。

•客户端存储数据的两个对象为:

localStorage    用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。

sessionStorage    用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

●Web SQL 数据库

Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。

•规范中定义的三个核心方法:

openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。

openDatabase() 方法对应的五个参数:

数据库名称

版本号

描述文本

数据库大小

创建回调 :会在创建数据库后被调用。

transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。

executeSql:这个方法用于执行实际的 SQL 查询。

●应用程序缓存(Application Cache)

HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。

•应用程序缓存为应用带来三个优势:

离线浏览 : 用户可在应用离线时使用它们

速度 : 已缓存资源加载得更快

减少服务器负载 : 浏览器将只从服务器下载更新过或更改过的资源。

 

●Cache Manifest 基础

如需启用应用程序缓存,请在文档的<html> 标签中包含 manifest 属性:

<!DOCTYPE HTML>

<html manifest="demo.appcache">

...

</html>

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。

manifest 文件的建议的文件扩展名是:".appcache"。

 注意:manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。

●Manifest 文件

manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。

•manifest 文件可分为三个部分:

CACHE MANIFEST : 在此标题下列出的文件将在首次下载后进行缓存

NETWORK : 在此标题下列出的文件需要与服务器的连接,且不会被缓存

FALLBACK : 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

●更新缓存

一旦应用被缓存,它就会保持缓存直到发生下列情况:

    用户清空浏览器缓存

    manifest 文件被修改

    由程序来更新应用缓存

 

●关于应用程序缓存

留心缓存的内容。

一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使修改了服务器上的文件。为了确保浏览器更新缓存,需要更新 manifest 文件。

注意: 浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)。

●Web Worker

当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

●服务器发送事件(Server-Sent Events)

HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。

Server-Sent事件  : 单向消息传递

●WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

●websocket 和 socket 的区别

软件通信有七层结构,下三层结构偏向与数据通信,上三层更偏向于数据处理,中间的传输层则是连接上三层与下三层之间的桥梁,每一层都做不同的工作,上层协议依赖与下层协议。基于这个通信结构的概念。

•Socket 其实并不是一个协议,是应用层与 TCP/IP 协议族通信的中间软件抽象层,它是一组接口。当两台主机通信时,让 Socket 去组织数据,以符合指定的协议。TCP 连接则更依靠于底层的 IP 协议,IP 协议的连接则依赖于链路层等更低层次。

•WebSocket 则是一个典型的应用层协议。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/45818.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【使用Zookeeper当作注册中心】自己定制负载均衡常见策略

自己定制负载均衡常见策略 一、前言随机&#xff08;Random&#xff09;策略的实现轮询&#xff08;Round Robin&#xff09;策略的实现哈希&#xff08;Hash&#xff09;策略 一、前言 大伙肯定知道&#xff0c;在分布式开发中&#xff0c;目前使用较多的注册中心有以下几个&…

Typescript基础知识(类型拓宽、类型缩小)

系列文章目录 引入一&#xff1a;Typescript基础引入&#xff08;基础类型、元组、枚举&#xff09; 引入二&#xff1a;Typescript面向对象引入&#xff08;接口、类、多态、重写、抽象类、访问修饰符&#xff09; 第一章&#xff1a;Typescript基础知识&#xff08;Typescri…

1.vue3+vite开发中axios使用及跨域问题解决

一、跨域问题解决 1.基于vitevue3配置时&#xff0c;在vite.congig.js文件server项目中添加 proxy代理 文件名&#xff1a;vite.congig.js server: {open: true,//启动项目自动弹出浏览器port: 3000,proxy: {/api: {target: http://localhost:8000/api/,changeOrigin: true,rew…

elementPlus——图标引入+批量注册全局组件——基础积累

因为我们要根据路由配置对应的图标&#xff0c;也要为了后续方便更改。因此我们将所有的图标注册为全局组件。&#xff08;使用之前将分页器以及矢量图注册全局组件的自定义插件&#xff09;&#xff08;所有图标全局注册的方法element-plus文档中已给出&#xff09; 全局注册…

Docker-compose详解和LNMP搭建实战

目录 一、Docker-compose简介 1.前言 2.概述 二、Docker-compose安装 安装源获取 安装包下载 三、YAML文件格式及编写注意事项 1.简介 2.使用方法 四、Docker Compose 常用命令 五、Docker Compose 配置常用字段 六、Docker-compose搭建LNMP实战 一、Docker-compose…

MySQL的安装以及卸载

下载官网 https://www.mysql.com/ 切到下载tab页 找到 MySQL Community Server 或者 MySQL Community (GPL) Downloads --> MySQL Community Server 点击download按钮&#xff1a; 点击download进入下载页面选择No thanks, just start my download就可以开始下载了。 下…

【ARM】Day5 uart总线, LED点亮实验(C语言实现)

1. 思维导图 2. LED点灯实验&#xff08;C语言实现&#xff09; gpio.h #ifndef _LED_H__ //防止头文件重复包含_ #define _LED_H__//RCC_MP_AHB4ENSETR寄存器封装 #define RCC_MP_AHB4ENSETR (*(volatile unsigned int*)0x50000A28)//GPIO使用封装结构体 typedef struct{v…

【Linux】进程优先级

一、基本概念 Hello&#xff0c;大家好。本文我们要来介绍的是有关Linux下【进程优先级】&#xff0c;首先我们要了解的是其基本概念 在 Linux基础篇之权限 一文中我们有谈到过什么是权限&#xff0c;在Linux下有权限和无权限的区别在哪里。那现在的话我们就要来对比一下【权限…

js 的正则表达式(二)

1.正则表达式分类&#xff1a; 正则表达式分为普通字符和元字符。 普通字符&#xff1a; 仅能够描述它们本身&#xff0c;这些字符称作普通字符&#xff0c;例如所有的字母和数字。也就是说普通字符只能够匹配字符串中与它们相同的字符。 元字符&#xff1a; 是一些具有特殊含…

快速连接服务器脚本 可从多个服务中选择并连接

使用 python 做一个可选择服务器登录连接的脚本 前置条件 需要有python 环境python --version 显示版本号即可检查 python 是否有 paramiko 包没有的话 python install paramiko创建一个python 文件,内容如下 # -*- coding: utf-8 -*-""" Authors: huxiaohua…

一文科普,配资门户网是什么?

配资门户网是一个为投资者提供配资服务的平台。配资是指通过借用他人资金进行投资交易的一种金融操作方式。配资门户网作为一个线上平台&#xff0c;为投资者提供了方便、快捷的配资服务。 配资门户网提供了多种不同的配资方案&#xff0c;以满足不同投资者的需求。投资者可以…

神经网络基础-神经网络补充概念-42-梯度检验

概念 梯度检验&#xff08;Gradient Checking&#xff09;是一种验证数值计算梯度与解析计算梯度之间是否一致的技术&#xff0c;通常用于确保实现的反向传播算法正确性。在深度学习中&#xff0c;通过梯度检验可以帮助验证你的神经网络模型是否正确地计算了梯度&#xff0c;从…

LVS及负载均衡群集的搭建

一、群集简介 群集是为解决某个特定问题将多台计算机组合起来形成的单个系统&#xff0c;由多台主机构成&#xff0c;但对外只表现为一个整体&#xff0c;相当于一台大型计算机提供服务。 互联网应用中&#xff0c;随着站点对硬件性能、响应速度、服务稳定性、数据可靠性等要求…

适配器模式:让不兼容的接口协同工作

在面向对象设计中&#xff0c;适配器模式是一种常见的结构型设计模式。它允许将不兼容的接口转换成客户端所期望的另一个接口&#xff0c;从而使不同的类协同工作。适配器模式的主要目的是解决不同接口之间的兼容性问题&#xff0c;同时也提高了代码的可重用性和灵活性。 问题…

通过Git使用GitHub

目录 一、建立个人仓库 二、配置SSH密钥 三、克隆仓库代码 四、推送代码到个人仓库 五、代码拉取 一、建立个人仓库 1.建立GitHub个人仓库&#xff0c;首先注册GitHub用户。注册好了之后&#xff0c;打开用户的界面 然后就是配置问题 配置好后拉到最下方点击create repos…

opencv进阶07-支持向量机cv2.ml.SVM_create()简介及示例

支持向量机&#xff08;Support Vector Machine&#xff0c;SVM&#xff09;是一种二分类模型&#xff0c;目标是寻找一个标准&#xff08;称为超平面&#xff09;对样本数据进行分割&#xff0c;分割的原则是确保分类最优化&#xff08;类别之间的间隔最大&#xff09;。当数据…

next.js 创建 react ant design ts 项目

环境说明&#xff1a;next.js 官方文档要求node版本在16.8以上。笔者使用的 node版本是16.20.1&#xff0c;不要使用16.13.0&#xff0c;笔者在使用 node16.13.0环境时创建的 react 项目点击事件无效 next.js官网截图 next.js 官网&#xff1a;https://nextjs.org/ react 官网…

【UniApp开发小程序】商品详情展示+评论、评论展示、评论点赞+商品收藏【后端基于若依管理系统开发】

文章目录 界面效果界面实现工具js页面日期格式化 后端收藏ControllerServicemapper 评论ControllerServiceMapper 商品Controller 阅读Service 界面效果 【说明】 界面中商品的图片来源于闲鱼&#xff0c;若侵权请联系删除 【商品详情】 【评论】 界面实现 工具js 该工…

uniapp 微信小程序 绘制海报,长按图片分享,保存海报

uView UI 2.0 dcloud 插件市场地址 弹窗海报源码 <template><!-- 推荐商品弹窗 --><u-popup :show"haibaoShow" mode"center" round26rpx z-index10076 bgColortransparent safeAreaInsetTop close"goodsclose"><image …

WPF入门到精通:1.新建项目及项目结构

WPF&#xff08;Windows Presentation Foundation&#xff09;是一种用于创建 Windows 应用程序的技术&#xff0c;它可以通过 XAML&#xff08;Extensible Application Markup Language&#xff09;和 C# 或其他 .NET 语言来实现。WPF 提供了许多强大的 UI 控件和样式&#xf…