页面的加载性能优化方案

为什么要进行性能优化? 在回答这个问题之前,先问问你自己,你会等待一个页面加载超过10秒吗?或者你会使用一个点击某个按钮需要几秒之后才会有响应的页面吗?我想大部分人应该不会。很明显人的耐心是有限的,如果页面的加载时间,页面的响应时间超出了他的耐心,那么他很大可能会选择离开这个页面。这就是为什么要进行性能优化的原因了。性能优化就是让用户尽可能快地打开页面,尽可能流畅地使用页面。Google Developers 上的一篇文章:性能为何至关重要 [https://developers.google.com/web/fundamentals/performance/why-performance-m ... read more

React Router 的跳转中断与自定义 UI

起因 在我最近几年的开发经验里面,我所负责的业务基本上都是移动端的页面。这几年来,有一个越来越明显的感受是,现在的产品经理越来越希望移动端的 HTML 页面能做到跟 Native 应用相似的用户体验。举个例子,产品经理会希望前端页面能够直接唤起手机里面的某个应用,比如点击页面的“发送给 WhatsApp 好友”,就唤起 WhatsApp 应用,并且进入选择分享对象的界面,而且还要能自动带上分享的内容。当然这种场景现在确实是可以做到的,比如可以使用 WhatsApp 的私有协议 whatsapp://send 来实现,或者在安卓手机下,还可以使用更加规范的 intent 协议 [https:// ... read more

巴掌大的迷你主机云轩 H170 使用体验以及 Homelab 搭建

在 19 年年底的时候,逛 SMZDM 的时候无意间看到云轩 H170 的相关文章,一下子就中毒了。云轩 H170 是一台 mini-STX 的准系统主机,它的特点是体积非常迷你,而且价钱非常便宜。主板+机箱+电源的准系统套餐只需要369(我购买的时候有优惠,原价 499 ,目前优惠价在 379 左右)。 纠结了一两天之后,便下单了。 购买理由以及使用场景购买这台主机的理由主要是想买来跑一些对 CPU 有一定要求的服务 ... read more

使用 PVE 运行 Clash 旁路由虚拟机实现透明代理

在没折腾旁路由之前,家里的翻墙都是在路由器上安装 SS 服务,在路由层面实现代理,这样联网的设备都可以享受到透明代理的好处,即不需要安装任何软件就能愉快地访问境外网站。但是这个方案有个致命的缺点就是,路由器的性能太差,远远不能跑满带宽的速度。 以我手头的设备来说,路由器是华硕的 AC86U ,讲道理这个路由器性能是不差的,两年前花了800+ RMB 买的,但是运行 SS 的话,速度连 100 Mbps 都跑不到,而目前家里的宽带下行 500 Mbps 上行 50 Mbps ... read more

神奇的 <link> 标签

按照标准的定义,&lt;link&gt; 标签其实是用来表明当前页面与外部资源的关系: The HTML External Resource Link element (&lt;link&gt;) specifies relationships between the current document and an external resource. —— MDN一个最简单的例子,便是我们最熟悉的样式文件引用了 ... read more

DS918+ 安装 Windows Thin PC 7

DS918+ 本身支持 Virtual Machine Manager,所以是可以运行 Windows 虚拟机的。但是因为 DS918+ 的 CPU 较弱,所以如果运行完整版 Windows 系统将会非常卡。因此我选择了安装 Windows Embedded Standard 7,其实就是精简版的 Windows 7,不过这个精简版包含了我所需要的功能,如 IE 浏览器,远程桌面等。但是安装的过程我碰到一个比较麻烦的问题是,网上的打包好的系统镜像全都是英文版的,没有中文语言,而且安装完成之后没办法再重新下载新的语言,因此需要自己定制一个系统镜像。好在过程并不复杂。下面讲一下具体流程。事前准备 ... read more

Preload: What Is It Good For?

原链接:<a class="inline-anchor" href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/%E4%BD%9C%E8%80%85%EF%BC%9AYoav">https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/作者:Yoav</a> WeissPreload 是新推出的一个 web 标准,其目的主要是用来优化 Web 性能,并且给 Web 开发者提供更强大的网络加载控制权。它为 Web 开发者提供了自定义页面资源加载逻辑的能力,使得可以免于遭受类似脚本资源加载器所碰到的性能问题。 几周前,我在 Chrome Canary 上发布了 Preload ... read more

Synology NAS: 备份功能

NAS 首当其冲的作用就是备份。对我来说,我需要进行备份的数据有个人的相片、工作的一些文件以及自己的一些私人文件,还有手机、电脑重要文件的备份。 Time Machine 备份对于 MacOS 系统来说,最简单的备份方式是使用 Time Machine 进行备份。Time Machine 是系统级别的备份,会为你整个 macOS 系统硬盘进行增量备份。Time Machine 一般是搭配移动硬盘来进行系统的备份,但是 DSM 也可以开启 Time Machine ... read more

Headless Chrome: an answer to server-side rendering JS sites

原文:https://developers.google.com/web/tools/puppeteer/articles/ssr#inline [https://developers.google.com/web/tools/puppeteer/articles/ssr#inline] TL;DR: 无头模式的 Chrome(Headless Chrome) 可以成为将动态 JS 站点转化成为静态 HTML 页面的入门工具。在 Web 服务器上运行它能够让你预渲染任何具备任何现代 JS 特性的页面,使得页面内容加载更快而且可以被爬虫工具索引到。 这篇文章的技术方案为大家展示了如何使用 ... read more