performance

理解关键的渲染路径

当浏览器从服务器接收到一个HTML页面的请求时,到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系列的运行,或者说渲染出来我们常常称之为“关键渲染路径”(Critical Rendering Path)。理解CRP(Critical Rendering Path)相关的知识可以更好的提高网站的性能。

CSS Animation性能优化

CSS Animation是实现Web Animation方法之一,其主要通过@keyframesanimation-*或者transition来实现一些Web动效。不过今天我们聊的不是怎么制作Web动画,咱们来聊聊CSS Animation性能相关的话题。

提高前端性能的一个案例

De Voorhoede,我们尽所能地为客户推进前端性能。虽然不是很容易就能说服客户完全按照我们的指令去做,但我们一直在尽全力和他们沟通,解释提高性能的重要性,或者将他们的性能与他们主要竞争对手进行比较。最近更新了我们的网站,除了设计上进行了大修,这也是一个将性能提高到最优的理想机会。我们的目标是有效控制,注重性能,与未来技术兼容,并将创建网站变为了一件有趣的事。以下是我们如何改进网站的具体做法。

【转载】高性能的动画

让我们直接进入主题。现代浏览器在完成以下四种属性的动画时,消耗成本较低: position(位置), scale(比例缩放), rotation(旋转) 和 opacity(透明度)。如果你对其他的属性设置动画,你就需要对你的冒险负责。而且你的动画将可能达不到流畅的60fps

使用CSS3实现60FPS动画

使用动画在移动应用程序中很容易的。如果您遵循我们的建议,移动应用程序中使用动画变得很简单。虽然现在很多人在移动应用程序中使用CSS3 Animation来制作动画,当然很多人也不这么做。很多最佳实践,还是不断的被忽视。出现这种情况主要是因为仍有许多人并不真正了解这些最佳实践存在的真正原因,因此没有大力的支持。

使用Express Server和Handlebars优化Critical-Path性能

最近,我在一个React同构网站工作。这个网站建立在React上,运行于Express服务器上。一切都进行得十分顺利,但是我仍对CSS包的加载阻塞不满意。因此,我开始考虑如何在Express服务器上进行关键路径的优化。这篇文章主要是如何使用Express和Handlebars进行安装以及配置一个关键路径的性能优化的笔记。

12步创建高性能Web APP

现在,Web App 日益重视用户的交互体验,了解性能优化的方式则可以有效提高用户体验。阅读和实践下面的性能优化技巧,可以帮你改善应用的流畅度、渲染时间和其他方面的性能表现。对 Web App 进行性能优化是一份冗杂沉重的工作,这不仅是因为构建一个 Web App 需要前后端协作,而且需要多方面的技术栈:数据库、后端、前端,需要运行在多种平台:iOS,安卓,Chrome,Firefox,Edge。这太复杂了!不过,还是有一些历经实践的通用方式可以用来优化 Web App 的性能。在接下来的小节中,我们将逐步介绍相关的细节。

性能工具

嗨,各位,又到了周末总结时间!得益于大量的 Grunt 和 Gulp 插件,我们可以轻松实现网站数据的可视化,虽然深入理解这些工具还比较困难,但分门别类的将它们列出来,也是很有帮助的。

如何让你的移动端网站更快

Cindy Krum 最近发表了一篇非常值得一读的文章:《9 Things You Need to Know About Google's Mobile-Friendly Update》,强烈建议在阅读本文前理解一下该文的思想。已经准备好了?那我们开始吧。为了在 4 月 21 号前迅速优化为移动端网站,最简单的方法就是牺牲一些性能。但是谷歌曾经多次提醒我们,站点的响应性能是非常重要的搜索权重点,比如 2010关于桌面端2013 关于移动端 的这两篇文章。在本文中,我将会讲述一下最佳实践方案,希望你在创建或重构设计时牢记这些经验。此外,建议你精读谷歌关于移动友好型站点的指导文档

高性能 HTML

在阅读本文之前,你是怎样优化网页的呢?大多数开发者的焦点集中于 JavaScript、图片、服务器配置、文件压缩合并,甚至是 CSS。虽然 HTML 是前端技术的核心之一,但却一直没有得到应有的重视。HTML 的体积日渐臃肿。目前,全球访问量前 100 的网站每个页面大概有 40kB 的大小,类似亚马逊和雅虎这样的网站,甚至每个页面包含了数千行的 HTML 代码。最近,youtube 主页的 HTML 代码量甚至达到了惊人的 3.5K 行(翻译本文时已达到了 4.8K 行)。

页面

返回顶部