Service Worker 缓存静态资源

最近有用到 Service Worker 和 CacheStorage 做离线缓存, 一方面是因为项目资源包着实大, 另一方面也是因为之前没有用缓存, 这也是需要的优化。相比起 Http 缓存或者 manifest 文件管理缓存(如果还有其他缓存方法, 欢迎提出来讨论!), Service Worker 完全由前端维护, 让前端对资源拥有了更大的控制权, 能自由的对资源进行增删改, 另一方面也是因为自己没用过。也碰到了一些问题, 查阅了一些资料, 希望对你有帮助。 Service Worker附上 MDN 文档 ,还有一个 Demo 除了 MDN, Google 的文档也是很有帮助的 Service Worker 的特点 是一个浏览器与网络之间的拦截器, 通过 Service Worker 你可以拦截任何网络请求 必须在 Https 下运行, 但 localhost 作为开发...

71.6k2022-07-09
(译)使用 Stream 构建高性能的 Node.js 应用

原文地址:Use Streams to Build High-Performing Node.js Applications 原文作者:Deepal Jayasekara 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/gold-miner/blob/master/article/2022/use-streams-to-build-high-performing-nodejs-applications.md 译者:tong-h 校对者:CarlosChen zaviertang 使用 Stream 构建高性能的 Node.js 应用当你在键盘上输入字符,从磁盘读取文件或在网上下载文件时,一股信息流(bits)在流经不同的设备和应用。 如果你学会处理这些字节流,你将能构建高性能且有价值的应用。例如,试想一下当你在 YouTube 观看视频时,你...

123.1k2022-03-25
(译)CSS 是魔法, 是时候试试 3D 了

原文地址:Effects of Too Much Lazy Loading on Web Performance 原文作者:Yasas Sri Wickramasinghe 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/gold-miner/blob/master/article/2022/effects-of-too-much-lazy-loading-on-web-performance.md 译者:tong-h 校对者:Isildur46 xionglong58 过度使用懒加载对 Web 性能的影响 如今为了提升应用性能,懒加载被广泛使用于 Web 应用中。它帮助开发者减少网站加载时间,节省流量以及提升用户体验。 但懒加载的过度使用会给应用性能带来负面影响。所以在这篇文章中,我会详述懒加载对性能的影响,来帮助你理解应该何时使用它。 什...

61.8k2022-03-14
(译)双向绑定会使你的 React 代码更棒

原文地址:Two-way binding will make your React code better 原文作者:Mikhail Boutylin 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/gold-miner/blob/master/article/2022/.md 译者:tong-h 校对者:nia3y 双向绑定会使你的 React 代码更棒 双向绑定可以让两个实体间保持同步,比如:应用程序的数据层和视图层。React 提供了开箱即用的单向绑定的 api,开箱即用。当我们想要修改 state 时,我们需要显式的调用更新回调: 1234567const UserName = ({ name, onChange }) => { return <input onChange={onC...

38962022-01-27
SVG 路径动画

简单百搭普普通通平平无奇 SVG 路径动画优化网站效果, 如何实现一个 SVG 进度条动画以及虚线走马灯动画 我习惯于使用 canvas 来做一些动画效果,数据展示或者图片处理之类的。SVG 和 Canvas 的功能类似,但应用场景又完全不同,各有各的特点。最近有用到一些 SVG,补补~ Canvas 和 SVG 的区别 canvas 以像素点为单位,而 SVG 是矢量图形,即放大图像不会失真,不依赖分辨率,对于 ui 同学来说大概就是 photoshop 与 illustrator 的区别了。 canvas 依赖分辨率,适合图片处理,可以做一些图片裁剪合成之类的功能。 SVG 放大不失真的图形展示当然很好,但矢量图之所以不会失真是因为保存了图形的线条和图块,所以渲染速度会和图形的复杂度成正比,这也表示 svg 非常适合用来绘制扁平化的图像,比如常用的 icon 或者扁平风格的 l...

41.2k2021-12-13
Git notes

Config user name and email git config  --global user.name / user.email “”git config --list check git config listpwd show the catalog of repogit init chan’ge the catalog to a repo which git can manageSSH binding computer ssh-keygen -t rsa -C "your email@example.com" git config --remove-section gui reset gui settings diff git diff show all the changes with detail git diff --name-only...

59242021-11-17
(译) 2021 年 Node.js 的发展趋势

原文地址:Top Node.js Development Trends in 2021 原文作者:Rlogical Techsoft.Pvt.Ltd 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/gold-miner/blob/master/article/2021/top-node-js-development-trends-in-2021.md 译者:tong-h 校对者:Chorer greycodee 2021 年 Node.js 的发展趋势世界各地的开发者对 2021 年 Node.js 的发展趋势做了很多预测。在下文中,我们将解说今年预期的 Node.js 趋势。 Node.js 为什么如此有名呢?近些年来,Node.js 凭借其高度灵活和极其轻量的特性,变得非常流行。Node.js 拥有大量的 JavaScript 库用于简化...

61.9k2021-10-24
(译)使用 TypeScript 时你会想念的 Python 特性

原文地址:Python features that you will miss in TypeScript 原文作者:Lucas Sonnabend 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/gold-miner/blob/master/article/2021/python-features-that-you-will-miss-in-typescript.md 译者:tong-h 校对者:nia3y greycodee 使用 TypeScript 时你会想念的 Python 特性 最近我把主要使用的后端语言从 Python 和 Django 切换到了 Node.js 和 TypeScript。在经过一段初始学习期后,我可以说我很享受这次切换。了解不同的语言和框架如何处理相似的问题总是很有趣。当你理解它们方法之间的一致或差异时,你也会...

113k2021-09-13
(译)使用 PeerJS 轻松实现 P2P 通信

原文地址:Simplified Peer to Peer Communication with PeerJS 原文作者:Dulanka Karunasena 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/gold-miner/blob/master/article/2021/simplified-peer-to-peer-communication-with-peerjs.md 译者:tong-h 校对者:jaredliw,CarlosChenN 使用 PeerJS 轻松实现 P2P 通信 实现 P2P 通信是一项具有挑战性的任务,但如果你知道如何使用正确的工具,那么这项任务就变得简单多了。 所以,我将在这篇文章探讨 PeerJS,这是一个封装了 WebRTC 的 JavaScript 库,可以在 web 应用中更加轻松的实现 P2P 通信...

82k2021-08-17
(译)可视化 JavaScript 引擎

原文地址:JavaScript Visualized: The JavaScript Engine 原文作者:Harsh Patel 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/gold-miner/blob/master/article/2021/javascript-visualized-the-javascript-engine.md 译者:tong-h 校对者:KimYangOfCat Usualminds 可视化 JavaScript 引擎 作为 JavaScript 开发人员,我们通常不需要亲自与编译器打交道。但知晓 JavaScript 引擎的基础知识,以及了解它是如何处理我们各自不同的 JS 代码并将其转化为机器能理解的东西,也是很好的!🥳 注意: 这篇文章主要基于 Node.js 和以 Chromium 为基础的浏览...

51.6k2021-08-06