day1前端的基本知识 | 青训营

2023-07-26 92 阅读1分钟

本次课程复习了前端的基本知识，有前端语言的基本能力、前端语言的协作配合以及我不知道的HTML。我之前学习中没注意到的东西在本次老师的讲解中学习到。

老师着重讲了H5的内容，确实有很多没记住的知识点。

1、H5 Web Socket

代码部分如下：

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');
// Connection opened
socket.addEventListener('open',(event) => {
    socket.send('Hello Server!');
});
// Listen for messages
socket.addEventListener('message',(event) => {
    console.log('Message from server', event.data);
});

2、H5 Shadow DOM

3、H5 SVG & Canvas

Canvas

通过 js 来绘制 2D图形。
canvas 图像单位是像素。
canvas 图像绘制完毕之后，浏览器将不再关注它，如果位置发生变换，就需要重新绘制。

SVG

svg 使用 XML 描述的2D图像。
svg 是基于 xml 的，所以 svg 中绘制图形还是使用的元素，js 给元素任意添加事件。
svg 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。

两者区别如下：

svg 是一种矢量图，而 canvas 依赖于分辨率。所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。
svg 支持事件处理器，而 canvas 不支持事件处理器。
svg 中的文字独立于图像，文字可保留，可编辑和可搜索，canvas 的文本渲染能力弱。
canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。
canvas 绘制的图形可以多种格式 (jpg、png) 保存图片，但是 svg 绘制的只能以 .svg 格式保存，使用时可以引入 html 文件。
canvas 适合开发游戏，svg 不适合游戏应用。