5 小时前 / 冷星1024
以前我们总说，JS是单线程没有多线程，当JS在页面中运行长耗时同步任务的时候就会导致页面假死影响用户体验，从而需要设置把任务放在任务队列中；执行任务队列中的任务也并非多线程进行的，然而现在HTML5提供了我们前端开发这样的能力 - Web Workers API，我们一起来看一看 Web Worker 是什么，怎么去使用它，在实际生产中如何去用它来进行产出。 1. 概述Web Workers 使得一个Web应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务，从而允许主（通常是UI）线程运行而不被阻......
5 小时前 / pingan8787
前言我最近在写 Vue 进阶的内容。在这个过程中，有些人问我看 Vue 源码需要有哪些准备吗？所以也就有了这篇计划之外的文章。 当你想学习 Vue 源码的时候，需要有扎实的 JavaScript 基础，下面罗列的只是其中的一部分比较具有代表性的知识点。如果你还不具备 JavaScript 基础的话，建议不要急着看 Vue 源码，这样你会很容易放弃的。 我会从以下 7 点来展开： Flow 基本语法 发布/订阅模式 Object.defineProperty ES6+ 语法 原型链、闭包 函数柯里化 event loop 必要知识储备需要注意的是这篇文章每个点不会讲的特别详细，我这里就是把一......
5 小时前 / Mr劳卜
（点击上方公众号，可快速关注） 文/劳卜 阅读本文需要3.1分钟这是劳卜的第32篇原创文章 前言 上篇文章：如何架构一个中后台项目的前端部分（技术选型篇） 当我们的前端项目完成了技术选型阶段后，接下来所要做的便是项目的构建和配置。 虽然说用脚手架能够帮助我们完成基本的目录构建和一些基础配置，但是其他很多实用的功能及特殊配置都需要自己动手实践，根据实际场景进行针对性的设置。 本文主要介绍下项目使用 Vue CLI 3.x 构建后，如何正确的配置 webpack。 webpack 配置 首先你需要知道的是，Vue CLI 3 的 vue-cli-service......
5 小时前 / 噶牛爱尚
首发于前端那么大我想去看看写文章前端工程化：构建、部署、灰度whilefor暂无65 人赞同了该文章 优秀的技术方案很多，大部分时候我们感觉只是在现有技术方案里面做排列组合、求笛卡尔积、选择最优解，做出一个最适合当前项目的方案。未来，人类应该编写最核心的业务代码、设置规则，由云端和AI来根据当前项目情况自动选择和调整到最优的架构和方案。前言前端项目的工程化，不只对开发层面的组件化、模块化、规范化等，更涉及到构建、部署的工程化和自动化。工程化的一些概念，编译、构建、部署、发布、CI/CD、灰度等概念，其实都是软件工程中很成熟......
1 天前 / 阿伟
写文章用 JS 写游戏自动脚本是什么体验？阿伟身在高楼心在北大荒，我就这副死样～15 人赞同了该文章我是从写游戏脚本入的编程这行今天翻看老照片，翻到了下面这张： 故事要从 2012 年说起，那时候我大二，梦想是去迪信通卖手机，业余爱好是捣鼓手机，就是刷系统，美化主题，逛论坛啊这些，也加了一些奇奇怪怪的 QQ 群。某天下午，看到群里有人说：“有会写自动脚本的吗？求合作，一起搞 DNF！” DNF 我知道，游戏脚本基本没听说过。当时也不知道哪根筋搭错了，反手就回了句：“我会！”想想那时候仅有的编程经验应该还是初中微机课上用 VB 写过一......
3 天前 / 噶牛爱尚
首发于饥人谷前端学习指南写文章我用了两个月的时间才理解 let方应杭杭州饥人谷教育科技有限公司 CTO798 人赞同了该文章当然不是说用完整的两个月时间来理解 let，而是零零碎碎地理解，同时我还要想着怎么写出一篇文章把这个事情说清楚。 在 let 刚出来的时候，我就「以为」我理解了 let。然鹅在过去的两个月里，我对 let 的理解发生了一波三折的变化。 我写这篇文章，是希望我的学习过程，能对你自学有帮助。 初识 let跟很多人一样，我第一次了解 let 的特性是从 MDN 的文档： 我得到的信息有这么几条： let 声明的变量的作用域是块级的......
4 天前 / 噶牛爱尚
首发于前端技术漫游指南写文章微前端说明书李熠《高性能响应式Web开发实战》停售中31 人赞同了该文章为什么写 互联网公司技术选型三定律 1. 流行即正义 2. 新鲜即正义 3. 复杂即正义 —— 我 因为最近被问起当前公司的前端产品有没有聚合为微前端的可能性，所以又重新开始审视“微前端”这个话题。差不多一年前写过一篇反驳美团微前端方案的文章。那篇文章更多的是关于“没有必要这么做”，但是“应该如何做”我也并没有给出更好的方案。最近在参考了很多资料之后，对这个的问题的答案有了轮廓 本文分为两个部分：“战略”和“战术”。前者关于......
7 天前 / 噶牛爱尚
写文章几道前端笔试题紫云飞前端开发话题的优秀回答者316 人赞同了该文章今年年初，应公司要求，我作为出题人之一为实习生校招出的一份候选笔试题。因为绝大部分题目都没有选入最终题库 ，且现在校招已经结束（可以泄题了），为了避免我的脑力被白白浪费，现把题目分享出来。虽说是招实习生，但按照要求，题目平均难度 p6 水平 。 单选题1. 关于一个对象 obj 到底包含有多少个属性，下面三个 API 的检测结果可能不完全一致，假如将它们返回的属性个数从大到小排序的话，恒成立的选项是哪个？A. Reflect.ownKeys(obj).length ≥ Object.getOwnPrope......
9 天前 / 噶牛爱尚
首发于阿里云中台前端/全栈团队专栏写文章在 React 中使用 Shadow DOMHoufengProgramming is playing.73 人赞同了该文章1. Shadow DOM 是什么Shadow DOM 是什么？我们先来打开 Chrome 的 DevTool，并在 'Settings -> Preferences -> Elements' 中把 ' Show user agent shadow DOM' 打上勾。然后，打开一个支持 HTML5 播放的视频网站。比如 Youtube： 可以看到 video 内部有一个 #shadow-root ，在 ShadowRoot 之下还能看到 div 这样的普通 HTML 标签。我们能知道 video 会有「播放/暂停按钮、进度条、视频时间显示、音量控制」等控件，那其实，......
11 天前 / 冷星1024
（给前端大全加星标，提升前端技能） 作者：政采云前端团队 公号 / 季节 （本文来自作者投稿） 背景 初识 Vue.js ，了解到组件是 Vue 的主要构成部分，但组件内部的作用域是相对独立的部分，组件之间的关系一般如下图： 组件 A 与组件 B 、C 之间是父子组件，组件 B 、C 之间是兄弟组件，而组件 A 、D 之间是隔代的关系。 那么对于这些不同的关系，本文主要分享了他们之间可以采用的几种数据通信方式，例如 Props 、$emit / $on 、Vuex 等，大家可以根据自己的使用场景可以选择适合的使用方式。 一、 Prop / $emit 1、P......
11 天前 / Fundebug
Fundebug前端异常监控服务Fundebug提供专业的前端异常监控服务，我们的插件可以提供全方位的异常监控，可以帮助开发者第一时间定位各种前端异常，包括但不限于JavaScript执行错误以及HTTP请求错误。 并且，Fundebug支持Source Map还原，记录用户行为以及“录制”用户操作视频，帮助开发者快速复现BUG，提高Debug效率，欢迎大家免费试用~ Fundebug前端异常监控插件更新至2.0.0，全面支持TypeScript，为使用TypeScript的用户提供更好的编程体验。 关于TypeScript想必大家都听说过TypeScript： Vue 3.0使用TypeScript重写Node.js作者使用TypeScrip......
11 天前 / 虞大胆
一、背景语音交友直播间 Web 端使用 WebRTC (Web Real-Time Communications) 实现多路音频流传输的播放。但由于云服务等原因，看播端我们需要改成 HTTP-FLV 或 HLS 协议的媒体服务。并实现 移动端页面多路音频流同时播放 获取多路音频的可视化数据 实现以上 2 个需求在 PC 端不是难点，有成熟的技术方案。最简单的多个 标签 + HLS 即可实现。但在移动端，特别是 iOS 有较大的限制。 二、调研iOS、移动版 Safari 音频的限制移动版 Safari 带来的最大的局限之一是一次只能播放一个单音频流。移动版 Safari 中的 HTML5 媒体元素都是单例的，......
13 天前 / 冷星1024
编者按：本文作者李松峰，资深技术图书译者，翻译出版过40余部技术及交互设计专著，现任360奇舞团Web前端开发资深专家，360前端技术委员会委员、W3C AC代表。 本文是阅读CSS标准文档的笔记，也是对CSS字体相关知识的一个梳理。 Cascading Style Sheets, level 1CSS 1定义的字体属性包括：font-family、font-style、font-variant、font-weight、font-size和font。其算法要求UA(User Agent，用户代理)对给定元素中的字符逐个查找匹配的CSS属性，首先尝试匹配font-style，比如italic和oblique。然后匹配font-variant，normal匹配非small-caps(小型大......