首页

关于

前端性能优化:使用媒体查询加载指定大小的背景图片

前端性能优化:使用媒体查询加载指定大小的背景图片

直到CSS @supports被广泛支持,CSS媒体查询的使用接近于CSS中写逻辑控制。我们经常用CSS媒体查询来根据设备调整CSS属性(通常根据屏幕宽度调 整CSS属性),例如根据不同的屏幕宽度来设置不同的元素宽度或者是悬浮位置。那么我们为什么不用这种方式来改变背景图片呢?

/* 默认是为桌面应用加载图片 */
.someElement { background-image: url(sunset.jpg); }

@media only screen and (max-width : 1024px) {
    .someElement { background-image: url(sunset-small.jpg); }
}

上面的代码片段是为手机设备或是类似的移动设备加载一个较小尺寸的图片,特别是需要一个特别小的图片时(例如图片的大小几乎不可视)。

开发人员普遍会将他们的代码习惯优先于用户体验。但是很多很小的改变可以让用户体验有个飞跃提升,所以任何一点儿小小的优化都会提升你网站的库存。再回顾一下之前的这些优化,我将在以后继续介绍其他的优化。

标签: 前端性能优化, 背景大小, javascript, web前端最佳实践

阅读更多

前端性能优化:使用Data URI代替图片SRC

前端性能优化:使用Data URI代替图片SRC

提升页面大小的效率,不仅仅是取决于使用精灵或是压缩代码,给定页面的请求数量在前端性能中也占有了很不小的重量。减少请求可以让你的网站加载更快,而其中一种减少页面请求的方法就是用 Data URI代替图片的src属性:

<!-- 以前的写法 -->
<img src="/images/logo.png" />

<!-- 使用data URI的写法 -->
<img src="data: image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fH…

标签: 前端性能优化, html, css, web前端最佳实践

阅读更多

前端性能优化:使用事件委托

前端性能优化:使用事件委托

想象一下,如果你有一个无序列表,里面有一堆<li>元素,每一个<li>元素都会在点击的时候触发一个行为。这个时候, 你通常会在每一个元素上添加一个事件监听,但是如果当这个元素或者你添加了监听的这个对象会被频繁的移除添加呢?这个时候,你在移除添加元素的同时需要处 理事件监听的移除和添加。这个时候,我们就需要引入事件委托了。

事件委托是在父级元素上添加一个事件监听,来替代在每一个子元素上添加事件监听。当事件被触发时,event.target会评估相应的措施是否需要被执行。下面我们给出了一个简单的例子:

// 获取元素,添加事件监听
document.querySelector('#parent-list').addEventListener('click', function(e) {
// e.target 是一个被点击的元素!
// 如果它是一个列表元素
if(e.target &&…

标签: 前端性能优化, html, javascript, web前端最佳实践

阅读更多

前端性能优化:尽可能使用CSS动画

前端性能优化:尽可能使用CSS动画

网站设计对美观特性和可配置元素动画的大量需求,使得一些JavaScript类库,如jQuery,MooTools大量的被使用。尽管现在浏览器支持CSS的 transformationkeyframe所 做的动画,现在仍有很多人使用JavaScript制作动画效果,但是实际上使用CSS动画比起JavaScript驱动的动画效率更高。CSS动画同时 需要更少的代码。很多的CSS动画是用GPU处理的,因此动画本身很流畅,当然你可以使用下面这个简单的CSS强制使你的硬件加速:

.myAnimation {
    animation: someAnimation 1s;
    transform: translate3d(0, 0, 0); /* 强制硬件加速 */
}

tansform:transform(0,0,0)在不会影响其他动画的同时将通话送入硬件加速。在不支持CSS动画的情况下(IE8及以下版本的浏览器),你可以引入JavaScript动画逻辑:

<!--[if…

标签: 前端性能优化, html, css3, javascript, web前端最佳实践

阅读更多

前端性能优化:使用Array.prototype.join代替字符串连接

前端性能优化:使用Array.prototype.join代替字符串连接

有一种非常简单的客户端优化方式,就是用Array.prototype.join代替原有的基本的字符连接的写法。在这个系列的第一篇中,我在代码中使用了基本字符连接:

htmlStr += '<li>' + item.text + '</li>';

但是下面这段代码中,我用了优化:

var items = [];

ajaxResult.items.forEach(function(item) {
    // 构建字符串
    items.push('<li>', item.text, '</li>');
});

// 通过innerHTML设置列表内容
document.querySelector('ul').innerHTML = items.join('');

也许你需要花上一点儿时间来看看这个数组是做什么用的,但是所有的用户都从这个优化中受益匪浅。

下一篇,我们将谈谈在前端尽可能使用CSS动画

相关阅读:

标签: 前端性能优化, html, 字符串, javascript, web前端最佳实践

阅读更多

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

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

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, 优化

阅读更多

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

上一篇我们说了用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, 优化

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.