首页风格
门户
博客

GBin1博客视图 - 最近发布的文章-demo

前端性能优化:使用异步加载,延迟加载依赖

前端性能优化:使用异步加载,延迟加载依赖

RequireJS已经迎来了异步加载和AMD格式的巨大浪潮。XMLHttpRequest(该对象可以调用AJAX)使得资源的异步加载变得流行起来,它允许无阻塞资源加载,并且使 onload 启动更快,允许页面内容加载,而不需要刷新页面。

我所用的异步加载器是John Hann的curl。curl加载器是基本的异步加载器,可以被配置,拥有很好的插件。以下是一小段curl的代码:

// 基本使用:  加载一部分AMD格式的模块
curl(['social', 'dom'], function(social, dom) {
dom.setElementContent('.social-container', social.loadWidgets());
});

// 定义一个使用Google Analytics的模块,该模块是非AMD格式的
define(["js!//google-analytics.com/ga.js"],…

标签: 前端性能优化, html, 延迟加载, api, 优化

阅读更多

前端性能优化:网络存储的静态缓存和非必要内容优化

前端性能优化:网络存储的静态缓存和非必要内容优化

上一篇我们介绍了前端性能优化:高频执行事件/方法的防抖,这篇我们将介绍前端性能优化:网络存储的静态缓存和非必要内容优化。

相关阅读:

Web Storage的API曾经是Cookie API一个显著的进步,并且为开发者使用了很多年了。这个API是合理的,更大存储量的,而且是更为健全理智的。一种策略是去使用Session存储来存 储非必要的,更为静态的内容,例如侧边栏的HTML内容,从Ajax加载进来的文章内容,或者一些其他的各种各样的片断,是我们只想请求一次的。

我们可以使用JavaScript编写一段代码,利用Web Storage使这些内容加载更加简单:

define(function() {

var…

标签: web前端特效, html, javascript, api, 优化

阅读更多

前端性能优化:高频执行事件/方法的防抖

上一篇我们说了用InnerHTML和DocumentFragment来减少DOM注入的次数,这次我们说一说如何处理高频事件触发时的优化。

相关阅读:

前端性能优化:高频执行事件/方法的防抖

高频执行事件/方法的防抖

通常,开发人员会在有用户交互参与的地方添加事件,而往往这种事件会被频繁触发。想象一下窗口的resize事件或者是一个元素的onmouseover事件 - 他们触发时,执行的非常迅速,并且触发很多次。如果你的回调过重,你可能使浏览器死掉。

这就是为什么我们要引入防抖。

防抖可以限制一个方法在一定时间内执行的次数。以下代码是个防抖示例:

// 取自 UnderscoreJS 实用框架
function debounce(func, wait,…

标签: 前端性能优化, html, javascript, api, 优化

阅读更多

前端性能优化:DocumentFragments或innerHTML取代复杂的元素注入

我们的浏览器执行越来越多的特性,并且网络逐渐向移动设备转移,使我们的前端代码更加紧凑,如何优化,就变得越来越重要了。前端给力的地方是可以有 许多种简单的策略和代码习惯让我们可以保证最理想的前端性能。我们这个系列的主题就是要告诉你9种代码小技巧,只需要一分钟,就可以优化你现有的代码。

相关阅读:

前端性能优化:DocumentFragments或innerHTML取代复杂的元素注入

使用DocumentFragments或者innerHTML代替复杂的元素注入

DOM操作在浏览器上是要付税的。尽管性能提升是在浏览器,DOM很慢,如果你没有注意到,你可能会察觉浏览器运行非常的慢。这就是为什么减少创建集中的DOM节点以及快速注入是那么的重要了。

现在假设我们页面中有一个<ul>元素,调用AJAX获取JSON列表,然后使用JavaScript更新元素内容。通常,程序员会这么写:

var…

标签: 前端性能优化, html, javascript, api, 优化

阅读更多

喜欢我们的文章请您与朋友分享:

?ü?à

今日推荐