TensorFlow.js 概述：从技术原理到行业实践 崔鹏程
文章深入探讨了 TensorFlow.js 的技术原理及其在各个行业的实际应用案例。详细介绍了 TensorFlow.js 的架构设计、核心功能以及如何在浏览器中运行机器学习模型。通过多个行业实践案例，展示了 TensorFlow.js 在图像识别、自然语言处理、推荐系统等领域的应用，为开发者提供了全面的视野和实用的参考。
7种在 JavaScript 中分解长任务的技术 李勇鲁
探讨了在 JavaScript 中分解长任务的多种方法，包括 setTimeout()、async/await、scheduler.postTask()、requestIdleCallback()、requestAnimationFrame()、MessageChannel() 和 Web Workers，并分析了每种方法的特点和适用场景。文章通过具体代码示例展示了如何使用这些技术来避免主线程阻塞，提升用户体验。例如，使用 setTimeout() 的递归方式：
function processItems(items, index) {
index = index || 0;
var currentItem = items[index];
console.log("processing item:", currentItem);
if (index + 1 < items.length) {
setTimeout(function() {
processItems(items, index + 1);
}, 0);
}
}
processItems(["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"]);
Building a Faster Web Experience with the postTask Scheduler 张伟达
Airbnb 技术团队分享了如何通过使用 postTask Scheduler 优化网页性能。文章详细介绍了 postTask Scheduler 的工作原理、API 使用方法以及在实际项目中的应用效果。通过具体的性能数据对比，展示了 postTask Scheduler 在减少总阻塞时间、提升页面加载速度和响应用户输入方面的显著效果。例如，使用 postTask 分解任务：
scheduler.postTask(() => {
console.log('Task 1');
}, { priority: 'user-blocking' });
scheduler.postTask(() => {
console.log('Task 2');
}, { priority: 'background' });
前端如何直接上传文件夹 王森
介绍了前端实现文件夹上传的两种方式：input 标签选择文件夹和拖拽文件夹。文章详细讲解了如何通过 HTML 和 JavaScript 实现这两种功能，并提供了代码示例。例如，使用 input 标签选择文件夹：
<input
type="file"
id="file"
:multiple="multiple"
:accept="accept"
:webkitdirectory="uploadFolder"
:mozdirectory="uploadFolder"
:odirectory="uploadFolder"
@change="handleChange"
>
初识opencvjs 陆欣
文章介绍了 OpenCV.js 的基本概念、功能及应用场景。OpenCV.js 是一个基于 OpenCV 的 JavaScript 库，可以在浏览器中进行图像处理和计算机视觉操作。文章展示了如何在网页中使用 OpenCV.js 进行图像处理，例如边缘检测、颜色空间转换等。例如，使用 OpenCV.js 进行边缘检测：
cv.readImage('image.jpg', function(err, mat) {
if (err) throw err;
cv.imshow('canvas', mat);
cv.waitKey(0);
});
优先级 - CSS：层叠样式表 | MDN 黄鹤翔
详细讲解了 CSS 优先级的计算规则，包括不同选择器类型的权重以及如何在实际开发中应用这些规则。文章通过具体的示例展示了如何计算选择器的优先级，并提供了实用的建议，如避免使用 !important、使用更具体的选择器等。例如，选择器优先级的计算：
div#test span {
color: green;
}
div span {
color: blue;
}
span {
color: red;
}
Token 无感刷新：打造无缝用户体验与坚实安全防线 李文娟
介绍了四种 Token 无感刷新的实现方式：双 Token 机制、前端定时刷新、服务端主动刷新和双 Token+并发请求锁机制。文章详细讲解了每种方法的原理、实现步骤和优缺点，并提供了代码示例。例如，使用双 Token 机制：
// 请求拦截器：自动添加 Access Token
service.interceptors.request.use(config => {
const accessToken = localStorage.getItem('access_token');
if (accessToken) {
config.headers.Authorization = `Bearer ${accessToken}`;
}
return config;
});
// 响应拦截器：处理 Token 过期
service.interceptors.response.use(
response => response,
async error => {
const originalRequest = error.config;
if (error.response?.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
try {
const accessToken = await refreshToken();
localStorage.setItem('access_token', accessToken);
originalRequest.headers.Authorization = `Bearer ${accessToken}`;
return service(originalRequest);
} catch (refreshError) {
router.push('/login');
}
}
return Promise.reject(error);
}
);
CSS 新特性介绍 刘世豪
概述了多个 CSS 新特性，如 transition-behavior、light-dark 函数等，并探讨了这些特性在实际开发中的应用和浏览器支持情况。文章通过具体的示例展示了如何使用这些新特性来实现更丰富的样式效果。例如，使用 transition-behavior 实现动画效果：
img {
transition: .25s allow-discrete;
opacity: 1;
@starting-style {
opacity: 0;
}
}
execa: Process execution for humans 车泽民
介绍了一个用于执行命令行的 JavaScript 库 execa，强调了其相较于传统 shell 的优势，如简单的语法、无需转义、支持本地安装的二进制文件等。文章提供了详细的 API 文档和示例代码，展示了如何使用 execa 执行各种命令行任务。例如，使用 execa 执行命令：
import {execa} from 'execa';
const {stdout} = await execa`npm run build`;
console.log(stdout);