IT工作者职业规划指南
流媒体服务架构及协议
WebAssembly-函数调用
概述
这篇文章介绍了在 JavaScript 中通过 WebAssembly 调用 C 语言编写的函数,以及在 C 代码中调用 JavaScript 函数。
web 使用 wasm 流程
在 web 项目中使用 WebAssembly 时,需要先编写 C 语言代码,然后使用 emscripten 编译成 .wasm
和 .js
文件,最后在 html 文件中引入 js 文件,就可以调用在 C 中定义的函数。在 wasm 中是无法操作 dom 的,需要结合 js 使用。
graph LR; C(C代码) ---> WASM ---> HTML JS ---> HTML C -.-> JS
注意:使用 emscripten 自动生成的胶水 js 文件是对 wasm 的实例化和调用函数的封装,方便使用,这个 js 文件中对各种运行环境(node、shell、web、worker)做了支持,实际使用时可以根据自己的业务需求,排除不需要的代码以缩小 js 文件代码量,或自己编写封装成 js 文件。
WebAssembly-初探
概述
WebAssembly 已经极 html、css、js 之后,成为 Web 平台的第四种语言,这篇文章介绍了 WebAssembly 的概念,特点以及使用场景,提供了一个将 C 代码编译成 wasm 并在浏览器访问的简单示例。
认识 WebAssembly
官网: WebAssembly https://webassembly.org/
中文网:WebAssembly 中文网 https://www.wasm.com.cn/
W3C 标准:
WebAssembly Core Specification: https://www.w3.org/TR/wasm-core-1/
WebAssembly JavaScript Interface: https://www.w3.org/TR/wasm-js-api-1/
WebAssembly Web API: https://www.w3.org/TR/wasm-web-api-1/
WebAssembly (简称 wasm),中文含义为网页汇编,是一种基于栈的二进制指令格式的虚拟机标准,它的设计目标包括:高可移植性、高安全性、高效率(包括载入效率和运行效率)、尽可能小的程序体积。WebAssembly 能够在主流的浏览器中运行,它的出现是为了解决前端项目 JavaScript 运行低效的问题。浏览器支持情况参考:Roadmap - WebAssembly 。
仅3kB的ReactJs替代方案
概述
这篇文章简要的介绍了一款开源的前端 js 框架——PreactJs,其特点是小巧且易用,仅 3kB 即可实现类似 React 的现代化前端 api,特别适用于存储空间有限的环境,比如嵌入式的 web 项目。
认识 PreactJs
Github(star 34.6k): https://github.com/preactjs/preact
PreactJs 是 React 的轻量化、快速的替代方案,拥有与其相同的现代化 API,其优势在于:
- 贴近实质:Preact 在 DOM 上提供了最薄的虚拟 DOM 抽象,在提供稳定的平台特性和注册事件处理程序的同时还确保其余其他库无缝兼容。Preact 无需转译即可在浏览器中直接使用。
- 微小体积:Preact 体积小,意味着下载、解析、执行更少的 JavaScript,让开发人员专心构建用户体验,无需花更多时间在框架本身上。
- 性能卓越:Preact 体积小,加载速度快,而且其基于树差异的简单、可预测而极快的虚拟 DOM 实现也提升了响应速度。
- 即刻生产:Preact 轻量但不牺牲生产性,可以即刻部署到生产环境,甚至提供一些附加功能:
- 将
props
、state
和context
传递进render()
- 使用
class
和for
一类的标准 HTML 属性
- 将
- 生态兼容:Preact 的设计能够让您轻松、无缝的借用来自 React 生态中的许多组件。
前端矢量化图库RaphaelJs入门
概述
这篇文章介绍了一个前端绘制矢量化图形的 js 库——RaphaelJs,文章阐述了 Raphael 中的基础概念,展示了一些基础的用法示例。
关于 Raphael
Raphael (读音:['ræfeɪəl], 猜测原意为拉斐尔,意大利文艺复兴时期著名画家),Raphael 是一个开源的、轻量易用的、跨浏览器的前端矢量绘图工具库。Raphael 基于 SVG 与 VML 实现图形绘制,所有使用 Raphael 绘制的图形对象同时也是 DOM 对象,可以修改它们或给它们添加 JavaScript 事件处理函数。Raphael 设计目标是跨浏览器和易用,现已支持的浏览器包括 Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+、Internet Explorer 6.0+。
官网: https://dmitrybaranovskiy.github.io/raphael/