最新 | 最热门 | 最高评价

+0  从 Google Analytics 的统计代码说起 —— 谈谈 script 标签的 async 和 defer 属性

Tag: 技术向 | Chrome | JavaScript | 异步 | Firefox | 浏览器
skk 发于 2020年10月13日 17:25 | 点击: 464 | 展开摘要
之前我在「天下武功,唯快不破 —— 我是这样优化博客的」一文中提到「对于大部分浏览器来说,确保 JS 异步加载和执行的做法其实是在操作 DOM 动态插入 <script async>」,但是并没有给出详细原因。这一次我以 Google Analytics 的统计代码为引子,详细讲讲 <script> 的 async 和 defer 属性、以及它们背后的故事。
拆开 Google Analytic 的统计代码
现在 Google 推出了 Google T

查看全文: http://www.udpwork.com/item/17949.html

+0  天下武功,唯快不破 —— 我是这样优化博客的

Tag: 技术向 | 前端性能优化 | lazyload | JavaScript | CSS | HTTP
skk 发于 2020年07月11日 19:49 | 点击: 815 | 展开摘要
哪个男孩不想拥有一个速度非常快的博客 之前我也写过少许 关于 Web 性能优化的文章,但是却从未介绍过自己的博客是如何优化的。这次我来水篇文章,罗列一下我的博客的几个零散的优化点。
服务器与 CDN
很多人都在我的博客下评论,问我的博客用了哪里的服务器这么快。实际上,我不仅没有用香港、新加坡等亚太服务器,而是用的被誉为「减速器」的 Cloudflare,因为不少好事者和脚本小子喜欢拿我的博客开涮。有了 Cloudflare,我可以预先编写好 FIrewall Rules,几乎

查看全文: http://www.udpwork.com/item/17955.html

+0  Node.js 多线程 —— worker_threads 初体验

Tag: 技术向 | JavaScript | Node.js
skk 发于 2020年06月12日 18:16 | 点击: 472 | 展开摘要
JavaScript 是一个具有「单线程」特性的「简单」语言,适合完成一些「简单的任务」,比如验证表单、当访客离开页面时改变页面标题和 favicon、或者渲染整个页面、双向绑定与视图更新(等等,这听起来可不像是什么「简单的任务」)。
支持多线程的后端语言常常具有专门的机制在进程之间同步数据,而 Node.js 决定添加多线程支持,就需要一些变通方案了。
Node.js 是「单线程」的吗?
在讨论如何编写 Node.js 多线程应用之前,先谈谈 Node.js 本身是不是「单

查看全文: http://www.udpwork.com/item/17958.html

+0  将 Hexo 部署到 Cloudflare Workers Site 上的趟坑记录

Tag: 技术向 | Cloudflare | Cloudflare Workers | Hexo | JavaScript | GitHub Action
skk 发于 2020年06月07日 20:30 | 点击: 715 | 展开摘要
为了进一步缩短自己的博客的 TTFB,我决定将自己的博客部署到 Cloudflare Workers Site。没想到我会把几天时间花费在折腾这个上。
缘由
哪个男孩不想拥有一个速度特别快的博客 非常关心博客速度的苏卡卡时不时就用 Google 的 Pagespeed 跑一次分。终于 Google Pagespeed 给我报了一项问题 —— 「网站 TTFB 过高(0.15s)」。
苏卡卡的博客在 Serverless 平台上,套了一层 Cloudflare,同时启用了 Cl

查看全文: http://www.udpwork.com/item/17959.html

+0  你好黑暗,我的老朋友 —— 为网站添加用户友好的深色模式支持

Tag: 技术向 | JavaScript | CSS | Media Query | 深色模式
skk 发于 2020年05月26日 14:05 | 点击: 515 | 展开摘要
随着越来越多的操作系统、浏览器开始支持 Dark Mode、支持相应的 Media Queries Level 5,越来越多的网站开始添加深色模式。当然我的博客也不甘落下,趁着新的主题完工不到一个月、还看得懂自己写的代码,也加上了深色模式。
什么是「深色模式」
很多操作系统在日落后会自动切换到「深色模式」、并不意味着「深色模式」就是「夜间模式」。「夜间模式」用于夜晚的弱光环境,主要目的是保护眼睛、减少强光刺激、避免影响睡眠,不难理解为什么 macOS 的 Night Shif

查看全文: http://www.udpwork.com/item/17961.html

+0  如何让 MailChimp 订阅对话框在点击时弹出

Tag: email | javascript | mailchimp | popup
Cat Chen 发于 2019年09月24日 23:42 | 点击: 484 | 展开摘要
问题描述
我的博客提供 MailChimp 订阅,大家点击订阅链接后需要转跳到 MailChimp 的页面输入 email。MailChimp 官方提供直接嵌入在网页内的订阅对话框,我希望读者在博客上点击订阅链接后直接打开对话框,让订阅流程变得更顺畅,这样可能能够提高订阅率。(为了保持兼容性,如果读者在 RSS 阅读器或邮件内点击订阅链接,则还是正常打开订阅页面。)
问题在于 MailChimp 官方不提供订阅对话框通过点击触发的选项。对话框的触发条件只有简单的几种:页面

查看全文: http://www.udpwork.com/item/17650.html

+0  Install semantic-ui by yarn

Tag: javascript | macOS | yarn
Volcano 发于 2019年02月27日 16:27 | 点击: 425 | 展开摘要
semantic-ui has some interactive installation step that Yarn does not support. Install semantic-ui with macOS yarn global add gulp yarn add semantic-ui --ignore-scripts cd ./node_modules/semantic-ui/ gulp install Go back to semantic directo

查看全文: http://www.udpwork.com/item/17625.html

+0  NPM 打包时该忽略哪些文件?

Tag: ignore | javascript | npm
Cat Chen 发于 2018年11月08日 15:20 | 点击: 1587 | 展开摘要
最近在写一个新的 JavaScript 库,叫做 dice-chance,用来分析掷骰子的概率。计划是库写完了就用 PWA 封装一下发布给大家用。因为在写的时候用到了 Flow 做类型声明,所以源代码文件不能不经处理直接被调用,必须经过 flow-remove-types 处理一下删除 Flow 类型声明。
为了保证在包发布时 Flow 类型会被删除掉,我在 package.json 中定义了 build 脚本,然后设置了 prepublish 事件触发 build 脚本:

查看全文: http://www.udpwork.com/item/17191.html

+0  Web Worker 使用教程

Tag: JavaScript
阮一峰 发于 2018年07月08日 20:59 | 点击: 1985 | 展开摘要
一、概述

JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。前面的任务没做完,后面的任务只能等着。随着电脑计算能力的增强,尤其是多核 CPU 的出现,单线程带来很大的不便,无法充分发挥计算机的计算能力。

Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。等到 Worke

查看全文: http://www.udpwork.com/item/16940.html

+0  浏览器数据库 IndexedDB 入门教程

Tag: JavaScript
阮一峰 发于 2018年07月04日 08:55 | 点击: 1962 | 展开摘要
一、概述

随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据。

现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 的大小不超过4KB,且每次请求都会发送回服务器;LocalStorage 在 2.5MB 到 10MB 之间(各家浏览器不同),而且不提供搜索功能,不能建立自定义的索引。所以,需要一种新的解决方案,这就是 IndexedDB 诞生的背景。

通俗地说,IndexedDB 就是浏

查看全文: http://www.udpwork.com/item/16936.html

+0  JavaScript 的 this 原理

Tag: JavaScript
阮一峰 发于 2018年06月18日 15:43 | 点击: 1822 | 展开摘要
一、问题的由来

学懂 JavaScript 语言,一个标志就是理解下面两种写法,可能有不一样的结果。

var obj = {
foo: function () {}
};

var foo = obj.foo;

// 写法一
obj.foo()

// 写法二
foo()

上面代码中,虽然obj.foo和foo指向同一个函数,但是执行结果可能不一样。请看下面的例子。

var obj = {
foo: function () { console.log(thi

查看全文: http://www.udpwork.com/item/16908.html

+0  Migrate from MediaWiki to GitBook

Tag: javascript | wiki
Volcano 发于 2018年06月06日 15:18 | 点击: 1743 | 展开摘要
Export data from MediaWiki Using ‘Special:Export’ to export all pages at MediaWiki Go to Special:Allpages and choose the desired article/file. Copy the list of page names to a text editor Put all page names on separate lines. I

查看全文: http://www.udpwork.com/item/16884.html
|<<<1234567>>>| 一共22页, 254条记录