1 天前 / 冷星1024
编者按：本文作者Berwin，W3C性能工作组成员，360导航资深前端工程师。《深入浅出Vue.js》作者。 测量与排查网页的性能瓶颈，是一名专业Web性能优化者的基本功。本章将详细介绍Web性能领域的一些专业术语，通过这些术语也可以侧面了解是哪些因素在影响加载性能。 背景衡量网页的性能是一个比较琐碎的事情，因为没有某一个指标或数字可以直接告诉我们网页的性能怎样，因为加载网页不是一瞬间的事，准确地说，它是一个过程，不存在某个单独的 “时间点” 可以完全体现出网页的性能，因为在网页加载的过程中，有很多个比较关键的 “时间点” 可以影......
2 天前 / 杨琼璞
前端利器之 npx 使用纪要Node.js，如今已经是前端开发不可或缺的组成部分；npm 则是 Node.js 默认的、以 JavaScript 编写的软件包管理系统； 而 npx 是 npm 软件包运行器，使用它，能够无需显式安装即可帮助执行 npm 软件包。它有很多用处，本就从其主要使用场景角度，来介绍下该命令。 安装更新 npm 至 >= @5.2.0，就会自动安装 npx；可以通过 which npx 来查看其绝对路径 ；如果由于某种原因它不可用，请按照以下说明安装或更新它即可： npm install -g npx存在价值多年来，npm 生态系统越来越倾向于将工具安装为项目本地 devDependencies，而......
5 天前 / u553049
前端开发人员收到测试发来的 bug 后，通常比较头疼复现的问题。 即使测试人员录了视频，照着一步步操作也不一定能复现，例如bug是与当时的数据相关的。 为了解决这个问题，Firefox 推出了一个重磅新功能：web reply。 看名字就知道它的功能是“页面回放”，这个回放可不是像录屏一样，而是完全真实的回放： JavaScript、DOM、CSS 的行为都完全像录制时一样重播。 而且在重放时，你可以随意检查页面上的各种元素、查看 console 日志、断点调试。 想象一下，测试把页面过程录下来，发给前端，前端导入进行回放，随意的调试，这是多么的高效......
5 天前 / 王键创生
create-react-app是一款广泛使用的脚手架，默认它只能使用eject命令暴露出webpack配置，其实这样使用很不优雅，修改内容文件的话也不利于维护，react-app-rewired正式解决这样问题的工具，今天我们就好好学习下它的用法。 1. 安装 react-app-rewiredcreate-react-app 2.x with Webpack 4npm install react-app-rewired --save-dev create-react-app 1.x or react-scripts-ts with Webpack 3npm install react-app-rewired@1.6.2 --save-dev 2. 根目录创建 config-overrides.js/* config-overrides.js */ module.exports = function override(......
5 天前 / 冷星1024
每日前端夜话0xF7每日前端夜话，陪你聊前端。 每天晚上18:00准时推送。 正文共：1153 字 预计阅读时间：6 分钟 翻译：疯狂的技术宅 作者：David Desmaisons 来源：alligator 在本文中我们讨论 Vue 中的无渲染插槽模式能够帮助解决哪些问题。 在 Vue.js 2.3.0 中引入的作用域插槽显著提高了组件的可重用性。无渲染组件模式应运而生，解决了提供可重用行为和可插入表示的问题。 在这里，我们将会看到如何解决相反的问题：怎样提供可重用的外观和可插入的行为。 无渲染组件这种模式适用于实现复杂行为且具有可自定义表示的组件。......
10 天前 / AIOps智能运维
作者简介 张海超 百度高级前端研发工程师 负责百度智能运维产品（Noah）、智慧机场等前端研发工作，对前端性能优化有广泛的实战经验。 干货概览 说到页面性能优化，我们常常想到首次加载、交互响应和渲染帧率等页面性能指标。为了给用户流畅的使用体验，我们常常针对这些指标进行优化。接下来，我们以AIOps团队智慧机场项目为例，介绍我们如何将首次加载时间为4000ms的页面优化至1350ms的，文章所介绍的加载优化方法具有一定参考作用，希望能对大家有所帮助。 项目简介 智慧机场项目是一个根据实时航班，对机场机位资源进行动态分......
10 天前 / 高飞
前言从 ECMAScript 2016（ES7）开始，版本发布变得更加频繁，每年发布一个新版本，好在每次版本的更新内容并不多，本文会细说这些新特性，尽可能和旧知识相关联，帮你迅速上手这些特性。 ES7新特性1.Array.prototype.includes()方法在ES6中我们有String.prototype.includes()可以查询给定字符串是否包含一个字符，而在 ES7 中，我们在数组中也可以用 Array.prototype.includes 方法来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。 const arr = [1, 3, 5, 2, '8', NaN, -0]arr.includes(1) // truearr.includ......
11 天前 / 噶牛爱尚
写文章React Hooks 源码解析（1）：类组件、函数组件、纯组件Airing腾讯 前端工程师5 人赞同了该文章React Hooks 源码解析（1）：类组件、函数组件、纯组件React 源码版本: v16.9.0 源码注释笔记：airingursb/react1 Class Component VS. Functional Component根据 React 官网，React 中的组件可分为函数式组件（Functional Component）与类组件（Class Component）。 1.1 Class Component这是一个我们熟悉的类组件： // Class Componmentclass Welcome extends React.Component {render() {return Hello, {this.props.name};}}1.2 Functional C......
12 天前 / semlinker
一、背景概述前阵子听到公司运营的小姐姐们在抱怨，说在富文本编辑器中发布包含图片的 Word 文档时，图片和文本内容不能一起复制，每次她们都得分开处理，对于包含较多图片的 Word 时，她们处理起来很抓狂。目前她们所使用后台的富文本编辑器是Ueditor，刚好近期也在研究一款富文本编辑器 ——Editor.js（block styled editor），也会遇到这种问题，所以就自觉揽下这个小任务。 要解决上述的问题，首先就需要能够解析 Word 文档中的图片。目前 Word 有两种格式后缀分别是 .doc 和 .docx。97-2003 的旧版本文件名后缀就是 .doc， 2007 版以后的后缀......
14 天前 / 江米小枣tonylua
原文：https://dev.to/voluntadpear/comparing-react-hooks-with-vue-composition-api-4b32 Vue 最近提出了Composition API RFC，一种新的书写 Vue 组件的 API；该 API 受到 React Hooks 的启发，但有一些有趣的差异，也就是本文要探讨的内容。该 RFC 始自于在社区某些部分受到大量非议的之前一个叫做Function-based Component API的版本 -- 人们担心 Vue 开始变得更复杂而不像大家最初喜欢它时那样是个简单的库了。 参阅《在 React 和 Vue 中尝鲜 Hooks》一文 Vue 核心团队解决了围绕首个 RFC 的困惑并在新的版本中提出了一些引人关......
15 天前 / 噶牛爱尚
首发于58HRG校园招聘前端组写文章基于 React 的可视化编辑平台实践Refector我们可能需要造一个轮子……149 人赞同了该文章基于 React 的可视化编辑平台实践 本文主要介绍了基于 React 构建可视化编辑平台的实践，包括对可视化拖拽布局、在线编辑、同构直出的实现。背景目前，HRG 的英才校园在线招聘业务有大量的企业定制化需求，企业在英才校园做招聘，同时也希望有自己的招聘主页，每年都会招聘一部分兼职同学来开发这类的招聘主页，这类招聘主页通常不复杂，但是如果全部需要前端同学实现的话，还是很耗时费力的，我们希望能通过技术手段不断的提......
15 天前 / 美团技术团队
总第372篇 2019年 第50篇 提单页在美团外卖交易链路中非常重要，但随着业务不断发展，提单页模块越来越多，逻辑的耦合也越来越重。为了解决这一问题，需要实现提单页的动态化，而动态化是需要基于容器来实现，所以，美团外卖技术团队提出了提单页的容器化方案。希望本文对同样深受此问题困扰的同学有所帮助，有所启迪。背景提单页的位置提单页是美团外卖交易链路中非常关键的一个页面。外卖下单的所有入口，包括首页商家列表、订单列表页再来一单、二级频道页的今日推荐等，最终都会进入提单页，在确认各项信息之后，点击提交订单按钮，......
17 天前 / 宜信技术学院
文章来源：宜信技术学院 & 宜信支付结算团队技术分享第6期-支付结算部支付研发团队前端研发高级工程师-刘琳《Three.js - 走进3D的奇妙世界》 分享者：宜信支付结算部支付研发团队前端研发高级工程师-刘琳 随着人们对用户体验越来越重视，Web开发已经不满足于2D效果的实现，而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库，它的出现让3D应用开发更简单，本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。 01 Three.js相关概念 1.1 Three.JSThree.JS是基于WebGL的Javascript开源框架，简言之，就是能够实......