HTML5和CSS3中一些新技术名词解释

秒速五厘米 2021-11-05 03:22 245阅读 0赞

**1.canvas**

HTML5`<canvas>`元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

`<canvas>`标签只是图形容器，您必须使用脚本来绘制图形。

**2.SVG**

SVG（Scalable Vector Graphics)，指可伸缩矢量图形，用于定义用于网络的基于矢量的图形  
SVG 使用 XML 格式定义图形  
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失  
SVG 是万维网联盟的标准

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：  
SVG 图像可通过文本编辑器来创建和修改  
SVG 图像可被搜索、索引、脚本化或压缩  
SVG 是可伸缩的  
SVG 图像可在任何的分辨率下被高质量地打印  
SVG 可在图像质量不下降的情况下被放大

**3.WebGL**

WebGL（全写 Web Graphics Library ）是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加OpenGL ES 2.0 的一个 JavaScript 绑定， WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。显然， WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等等。

WebGL完美地解决了现有的 Web 交互式三维动画的两个问题：  
第一，它通过HTML脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器插件支持 ;  
第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

通俗说WebGL中 canvas 绘图中的 3D 版本。因为原生的 WebGL 很复杂，我们经常会使用一些三方的库，如 three.js 等，这些库多数用于HTML5 游戏开发。

**4. Web Workers**

web worker 是运行在后台的 JavaScript，不会影响页面的性能。

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

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

Web Worker、Web Socket和Service Worker区别：https://blog.csdn.net/wopelo/article/details/78607879

web worker主要用来开辟线程执行耗时js;  
service woker主要充当网络代理的功能，请求拦截和结果缓存；

**5. Web Socket**

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

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

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

**6. Web SQL**

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

规范中定义的三个核心方法：  
1.openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。  
2.transaction:这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。  
3.execute Sql:这个方法用于执行实际的SQL查询。

**7.HTML5应用程序缓存**

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

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

应用程序缓存为应用带来三个优势：  
1.离线浏览 - 用户可在应用离线时使用它们  
2.速度 - 已缓存资源加载得更快  
3.减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

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

<!DOCTYPE HTML>
    <html manifest="demo.appcache">
    ...
    </html>

**8.Web存储**

cookie、localStorage、sessionStorage

cookies,seesionStorage,localStorage区别：

共同点：都是保存到浏览器端，都是同源。

区别：cookies会发给服务器。其他两个不会，只在本地保存，而且比cookie存储空间要大。 seesionStroage,在窗口关闭前有效。不在不同浏览器窗口共享。 localStroage,始终有效，永久数据。所有同源窗口共享 cookie:在过期前有效。所有同源窗口共享。

Web前端技术图谱：  
https://www.runoob.com/w3cnote/webfrontendstack.html

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20211104/2cca8eb003ca44438b86aa0bd07a6c32.png