我要反馈问题

加入众成翻译官方交流群(群号:362419683)

关注《奇舞周刊》微信号
阅读更多精选前端技术文章

友情链接

猿说:互动氛围更好的IT交流学习平台

互动氛围更好的IT交流学习平台

立即访问
声享:制作精彩的有声幻灯片

使用声享在线PPT快速制作分享优质内容

立即体验

京ICP备17024260号

凯小凯

CSS vs. JS Animation: 哪个更快?

1543阅读 · 凯小凯 2017-12-04翻译  
JavaScript jQuery CSS DOM

CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且,Adobe和 Google竟然一直在发布可以媲美原生应用的富媒体移动站点? 这篇文章将会逐点讲解基于JavaScript...

文蔺

WebRender:让网页渲染如丝顺滑

3073阅读 · 文蔺 2017-10-14翻译  
CSS JavaScript DOM

Firefox Quantum 发布在即。它带来了许多性能改进,包括从 Servo 引入的的极速 CSS 引擎。 但 Servo 中的很大一块技术尚未被 Firefox Quantum 引入,虽然已经为期不远。这就是WebRender,它是 Quantum Rende...

夏风

从JavaScript开始吧

435阅读 · 夏风 2017-09-29翻译  
JavaScript HTML DOM API

使用console.log() 引言 所有现代的网页浏览器、NodeJ以及几乎所有其他JavaScript环境都支持使用一套日志记录方法将信息写入控制台中。这些方法中最常用的是console.log()。 在浏览器环境中,console.log()函数主要是调试用的。...

Mactavish

更快地构建 DOM: 使用预解析, async, defer 以及 preload ★ Mozilla Hacks – the Web developer blog

1203阅读 · Mactavish 2017-09-20翻译  
DOM HTML Web

在 2017年,保证我们的页面能够快速加载的手段包括压缩,资源优化到缓存,CDN,代码分割以及 tree shaking 等。 然而,即便你不熟悉上面的这些概念,或者你感到无从下手,你仍然可以通过几个关键字以及精细的代码结构使得你的页面获得巨大的性能提升。 这些新的...

lizheming

React 16 beta 版发布!

5449阅读 · lizheming 2017-08-30翻译  
React JavaScript NPM DOM

令人欣慰,React 16 首个 beta 版已经发布可以公开测试了!下面我来告诉大家如何使用以及新版的一些值得注意的地方。 如何使用 安装 由于还是 beta 版,为了保障正常 NPM 安装还是使用 15.6 正式版,beta 版我们使用 next 标签发布在 NP...

网络埋伏纪事

React 初学者教程 1:React 简介

8519阅读 · 网络埋伏纪事 2017-08-30翻译  
React JavaScript DOM

今天的 Web 应用程序除了外观比过去更好看以外,应用程序的架构和创建方式已经和过去有很大的不同。为突出这点,我们来看看如下的应用: 这是一个简单的商品目录浏览应用程序,它和这种类型的其它应用程序一样,通常包含一个主页、一个搜索结果页、一个详情页等等。 老式的多页设...

loveky

利用控制台API调试Web应用

1811阅读 · loveky 2017-08-30翻译  
API DOM Web

利用控制台API更方便的调试Web应用 许多年前,调试JavaScript代码无非就是在要调试的函数内部插入几句console.log()而已。有时你会发现问题的根源并不在于你正在查看的函数,而是出现在这些函数调用的其它函数内部。结果就是更多的console.log...

千罹

CSS变量和预处理变量有什么不同?

2515阅读 · 千罹 2017-08-30翻译  
CSS JavaScript DOM

变量是 CSS 预处理器 存在的最主要的原因之一。设置变量的能力是有用的,比如把一个颜色设置成变量,用那个变量贯穿你写的CSS,你会发现它是一致的,抽离的,并且容易修改。你也可以用原生 CSS变量(CSS自定义变量)做同样的事。但是也有一些重要的区别应该搞清楚。 一个...

cherryvenus

纯CSS过滤内容

1283阅读 · cherryvenus 2017-08-30翻译  
CSS DOM HTML

纯CSS过滤内容 译者提示: 边看demo边食用,效果更佳 科普一下伪元素:target 仅仅通过CSS过滤内容,这是一个非常有趣且有吸引力的方法。 (译者注:作者在这里是说,他在半夜两点的时候喝了酒,然后突然想做个实践,就是纯CSS过滤内容) 通过CSS的:ta...

iOSDevLog

所有这些基础的React.js概念都在这里了

3074阅读 · iOSDevLog 2017-08-26翻译  
React JavaScript DOM API HTML React.js Medium Web Form

去年,我写了一本关于学习React.js的简短书,原来是大约100页。今年,我将挑战自己,把它概括为一篇关于中度的文章。 这篇文章不会涵盖什么是React或者为什么你应该学习它。相反,这是对已经熟悉JavaScript并熟悉DOM API基础知识的人们对React...

跑者小越

让网站更快: 如何(不)在WebKit中触发布局

585阅读 · 跑者小越 2017-07-16翻译  
DOM WebKit

正如大多数 Web 开发人员所知道的,有大量的脚本运行时间被用于执行脚本触发的 DOM 操作,而不是执行 JS 字节代码本身。布局是一个潜在的耗时操作(又称回流)——从 DOM 树构建渲染树的过程。 DOM 越大越复杂,这个操作花费的时间代价可能越昂贵。 保持页面清晰...

Chloe

考虑在你的下一个Web项目中使用VueJS吧 - via @codeship

1151阅读 · Chloe 2017-06-15翻译  
VueJS DOM UI

不管你之前有没有听说过 VueJS,不要恐惧。下面我来分享一些 Codeship 为什么在 Docker-builds UI, Jet 中使用这个新库的见解。 VueJS是什么? 先来大致了解一下 Vue(发音同 view)是什么,你可以将它想象为 MV* 模式中的...

哈呼哈哈呼

CSS 网格布局工作草案中的点滴

797阅读 · 哈呼哈哈呼 2017-02-16翻译  
CSS Chrome DOM

网格布局规范给我们提供了一种新的布局方式,这种布局方式对现代web设计来说,更加灵活,更加适合当今web规范的发展。在今天这个web时代,随着规范的发展,最新的网格布局模块草案也有新的变化。 这篇文章,我希望通过简要地关注所有的变化来帮助大家了解最新的发展。 如果你...

印前

自定义元素介绍 | WebKit

1509阅读 · 印前 2016-12-11翻译  
DOM API WebKit

一年多前, 我们公布了 slot-based shadow DOM的API, 这是一种轻量级机制,它通过允许在shadow tree元素上创建并行DOM来封装DOM,而渲染该元素无需修改常规DOM树. 今天,我们很高兴地宣布向WebKit增加自定义元素API。有了这个...

scaactk

嵌套你的BEM?(Nesting Your BEM?)

2755阅读 · scaactk 2016-12-04翻译  
CSS DOM

在我开始这篇文章之前,我得说这不是一个建议或者是新的“练习指南”。这只是我自己的一些思想狂潮。 我是一个BEM的拥护和支持者。并且已经持续了很多年。这是有点有趣的期待。当然, 它给我提供了很多的东西: 软封装 这有助于减少命名冲突。 自定义的CSS 这帮助我理解DO...

文蔺

手把手教你写一个 Javascript 框架:项目结构

1917阅读 · 文蔺 2016-11-20翻译  
JavaScript DOM Node.js

过去几个月中,RisingStack 的 JavaScript 工程师 Bertalan Miklos 编写了新一代客户端框架 NX。Bertalan 将通过编写 JavaScript 框架系列文章与我们分享他在编写框架过程中的收获: 本章将展示 NX 的项目结构,并...

吟风

用原生 JavaScript 替换 jQuery 的 ready 方法

1595阅读 · 吟风 2016-11-18翻译  
DOM jQuery JavaScript

ready 方法是 jQuery 实现的在 html 页面在 DOM(Document Object Model, 文档对象模型) 树完全加载完成后触发的一个方法. 因为它接收的方法在页面中所有的 DOM 都可访问时才执行, 所以此时你完全可以访问和操作 html...

Icarus

重绘重排重渲染

1294阅读 · Icarus 2016-11-15翻译  
DOM CSS JavaScript

译者:Icarus 邮箱:xdlrt0111@163.com 渲染过程 不同的浏览器工作方式是不一样的,下面的图表提供了渲染时的共同实现,一旦他们已经下载好了你页面的代码,多半都会通过浏览器这样实现。 浏览器把HTML源代码解析,并且创建一个DOM树(DOM tre...

文蔺

手把手教你写一个 Javascript 框架:时间调度

1605阅读 · 文蔺 2016-11-14翻译  
DOM JavaScript Promise

本文是“编写 JavaScript 框架”系列的第二章。在本章中,我将介绍 JavaScript 中异步执行代码的几种不同方式。你会读到关于事件循环相关的内容,以及像 setTimeout 和 Promise 等时间调度(timing)技术之间的差异。 本系列主要是如...

网络埋伏纪事

展示性组件和容器组件

1653阅读 · 网络埋伏纪事 2016-11-13翻译  
React Redux DOM

Bismuth 在编写 React 应用程序时候,我发现有一个简单模式非常有用。如果你已经用过 React 一段时间,可能你已经发现它了。有篇文章已经很好地解释了它,但是我还是想加点东西。 如果你将组件分为两类,你会发现组件更容易重用和推理。我称它们为容器(Con...

HappyAdu

小贴士: 用原生javascript代替jQuery的Ready()方法

1519阅读 · HappyAdu 2016-11-07翻译  
DOM jQuery JavaScript

在jQuery中ready方法在DOM完全下载后立即执行其中的代码。因为它是等所有的DOM元素都加载完毕,才执行给定的函数,所以你能确定那些试图操作和访问元素节点的方法都能被执行。 在jQuery 3.0的版本前, ready经典用法是用一个匿名函数,像这样: $(d...

freeeeeeeaker

jQuery还有意义吗

2508阅读 · freeeeeeeaker 2016-11-01翻译  
jQuery DOM JavaScript

尽管jQuery的鼎盛时期已经过去了, 但这个库仍然有着惊人的使用比率.但是究竟有多少是以前在使用的?还有多少开发者仍然使用jQuery来开发新应用? 在今天的闲聊中我们邀请了一些行业专家来探讨这些问题。话题如下: 在2016年,jQuery的利与弊是什么 哪些应用...

杨小福

开源项目React是如何组织和管理代码的

3024阅读 · 杨小福 2016-10-31翻译  
React React Native DOM

如果你想给React贡献代码,那么这篇文档将会是一篇很好的教程。 我们并不会推荐任何在React中使用的这些约定惯例,因为许多都是因为历史原因产生的,而且会随着时间而发生变化。 模块加载系统 在Facebook内部我们使用一个叫"Haste"的模块...

网络埋伏纪事

React 初学者教程 14:在 React 中访问 DOM 元素

1843阅读 · 网络埋伏纪事 2016-10-28翻译  
DOM HTML React

有时我们需要直接访问 HTML 元素上的属性和方法。在 React 的缤纷世界里,JSX 代表纯粹的标记,那么为什么你会想要直接处理可怕的 HTML 呢?因为你会发现,很多时候直接通过 JavaScript DOM API 处理 HTML 元素,比用 React 的方...

网络埋伏纪事

React 初学者教程 11:组件的生命周期

3296阅读 · 网络埋伏纪事 2016-10-28翻译  
DOM React HTML

概述:学习生命周期方法,从而更好地理解组件能做和不能做什么。 在开始,我们以一个很简单的视图组件以及他们要做什么开始。随着我们对 React 更多,做了更酷以及更复杂的事情,结果发现组件并非那么简单。它们帮助处理属性、状态、事件,并且经常负责其它组件的幸福。跟踪组件做...

网络埋伏纪事

React 初学者教程 10:React 中的事件

3713阅读 · 网络埋伏纪事 2016-10-28翻译  
React DOM Event

概述:通过学习如何处理事件,学习如何将无趣的 React 应用变为有趣而具互动性的应用。 迄今为止,我们所有的示例都是只在页面加载时执行。你可能会猜到,这是不正常的。在很多应用中,特别是重 UI 类型的应用中,应用程序要做的很多事情只是对某种事情的响应。这里,某种事情...

MinweiShen

12个酷炫的Chrome开发者工具建议

1542阅读 · MinweiShen 2016-10-24翻译  
Chrome DOM CSS

在JavaScirpt里设置断点,检阅HTML和CSS元素并在它们更新时实时查看变化,性能分析...没错,这周的文章主题就是IE8里的开发者工具。 [那是什么?真的假的?你确定?我知道了,谢谢,再见,不过真的没必要]。 好吧,刚才有人告诉我没人像我一样喜欢IE8,那么...

kayson

为什么要避免使用 document.write,尤其是脚本注入

2741阅读 · kayson 2016-10-21翻译  
Chrome DOM HTML

Web 性能测试工具比如 Google Page Speed 或者 Dareboost 已经指出:使用 document.write 注入一段脚本会引起严重的网站加载耗时问题。让我们再次讨论这个话题,因为 Chrome 的下次更新将不再允许这样的脚本注入方式。你将面临...

cherryvenus

掌握DOM – RE:DOM – 中级

1151阅读 · cherryvenus 2016-10-20翻译  
Web DOM API

这没有你想象的那么难 简介 许多前端开发都认为DOM是十分困难(或者速度慢),并且你需要庞大的前端框架才能驾驭得了它。然后他们花了很多时间去学习前端框架。一两年过去了,另一种前端框架又出现并且变得流行起来,这个时候你有需要从头开始学习一切。重复学习几周幕,js厌烦情...

QAQMiao

Vue.js 2.0新增的虚拟DOM是怎么回事?

4562阅读 · QAQMiao 2016-10-18翻译  
DOM Vue.js Virtual DOM

你可能早就已经听说了 Vue.js 2.0。一个主要的令人兴奋的新特性就是更新页面的"虚拟DOM"的加入。 虚拟 DOM 可以做什么? React 和 Ember 都使用了虚拟DOM来提升页面的刷新速度。为了理解其如何工作,让我们先讨论一下几个概...

玩命加载中……
已经到底啦