背景
为了使页面加载更快,常常将一些不重要的第三方脚本在页面完成加载后进行懒加载。
// 做一些不影响业务的事情
window.addEventListener('load', () => {
// 懒加载埋点分析
loadScript({
url: 'https://www.domain.com/test.js',
timeout: 10000
}).then(() => {
console.log('ok');
}).catch(console.error);
// 其他
// ...
});
"如何知道 window 的 load 事件已经触发"继续阅读

Today we are going to explore current resource hints and directives which can be another great way to boost the performance on your website or web application. You might have heard of preload
, prefetch
, and preconnect
, but we want to dive deeper into the differences between them how you can benefit from them. Some of the advantages of these is that they allow web developers to optimize delivery of resources, reduce round trips, and fetch resources to deliver content faster while a user is browsing a page.
"Resource Hints - What is Preload, Prefetch, and Preconnect?[转]"继续阅读
一、部署 eslint 规范 JavaScript
1.1 原理
husky + lint-staged + prettier + eslint + commitlint
"通过 eslint stylelint htmllint 规范前端项目代码"继续阅读
前言
本文我们将会介绍 JavaScript 实现异步的原理,并且了解了在浏览器和 Node.js 中 Event Loop 其实是不相同的。
一、线程与进程
1. 概念
我们经常说 JavaScript 是单线程执行的,指的是一个进程里只有一个主线程,那到底什么是线程?什么是进程?
官方的说法是:进程是 CPU 资源分配的最小单位;线程是 CPU 调度的最小单位。这两句话并不好理解,我们先来看张图。

- 进程好比图中的工厂,有单独的专属自己的工厂资源。
- 线程好比图中的工人,多个工人在一个工厂中协作工作,工厂与工人是 1:n 的关系。也就是说一个进程由一个或多个线程组成,线程是一个进程中代码的不同执行路线。
- 工厂的空间是工人们共享的,这象征一个进程的内存空间是共享的,每个线程都可用这些共享内存。
- 多个工厂之间独立存在。
"浏览器与 Node.js 的事件循环(Event Loop)有何区别?[转]"继续阅读
一、框架 / Vue
1.组件名
组件名为多个单词,并且用连接线(-)连接,避免与 HTML 标签冲突,并且结构更加清晰。
示例:
// 反例
export default {
name: 'item'
}
// 正例
export default {
name: 'page-article-item'
}
"基于 Vue 的前端开发规范"继续阅读
最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样。
"HTML5全屏浏览器兼容方案"继续阅读
一、order属性
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
"CSS3 Flex布局(项目)"继续阅读
一、flex-direction属性
"CSS3 Flex布局(容器)"继续阅读
早些时候写的,记录一下。
"HTML友情链接代码"继续阅读
介绍了如何使用 Bootstrap 实现瀑布流布局,涵盖了基本配置、栅格系统、缩略图、响应式图片及 CSS3 样式。通过实战案例逐步解析布局细节,并提供 JavaScript 实现方式以增强兼容性。