使用DNS Prefetching加速网页

什么是DNS Prefetching?

在网站性能优化方面,大家都知道可以使用多个域名加载静态资源文件,解决一个域名下并发请求数的限制,同时也不会附带不必要的cookie. 但也并非域名越多越好,多个域名将增加DNS的解析时间。另外,在你的站点中,链接出去的也可能是其他域名。DNS解析所花费的时间变化很大,延时范围从大约1毫秒到以常见的几秒钟时间。DNS Prefetching就是为了加速DNS解析时间,它实现了预解析功能,从而减少后面资源的加载时间。

如何使用?

<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

非常简单,在网页头部增加rel属性为”dns-prefetch”的link标签,并在href中指定想要预解析的域名。

Example:

<html>
	<head>
		<link rel="dns-prefetch" href="//www.domain1.com">
		<link rel="dns-prefetch" href="//www.domain2.com">
	</head>
	<body>
		<img src="www.domain1.com/image1.jpeg">
		<script src="www.domain2.com/script1.js">
	</body>
</html>

当你网站包含多个域名时,这个是一个非常实用的功能,现在就开始使用吧。

浏览器支持:

Firefox 3.5+, Chrome, Safari 5+ and IE 9+

参考链接:
The Chromium Projects – DNS Prefetching
Controlling DNS prefetching

IE下创建style标签出现未知错误的问题

动态创建一个style标签并设置css内容:

var style = document.createElement('style');
style.type = "text/css";
style.innerHTML = "..css content here..";
document.getElementsByTagName('head')[0].appendChild(style);

上面的代码看起来没有问题,但在IE6/7/8下访问你会发现提示出现未知错误。测试后发现问题出现在style.innerHTML这句上面,换成innerText依然报错。
解决方法是使用IE独有属性styleSheet.cssText,修改后是这样:

var style = document.createElement('style');
style.type = "text/css";
if (style.styleSheet) { //IE
	style.styleSheet.cssText = '/*..css content here..*/';
} else { //w3c
	style.innerHTML = '/*..css content here..*/';
}
document.getElementsByTagName('head')[0].appendChild(style);

使用JavaScript实现media queries检测

最近在做一个项目,项目中需要根据用户的设备来加载不同的样式,比如同一个页面,如果是PC访问,则显示PC版样式,手机访问则显示mobile样式。这个是一个不完全属于响应式的设计。QQ会员下面有大量的活动页面,不同的活动页面结构会随主题而改变,不像首页之类的频道页。为了使手机用户也能获得更好的体验,我们专门设计了一套移动模版样式。

开始的时候我们直接使用css media query加载样式:

总体还Ok,各个浏览器都能兼容。此时产品观察到了一个问题,在PC下如果缩小浏览器窗口,则会切换到mobile.css,由于mobile.css是一套固定风格的样式,突然变换了风格,用户感觉起来将会很怪。于是我们就想区分PC与手机设备。

media: min-width 指的是浏览器窗口宽度,等价于document.documentElement.clientWidth;min-device-width 是设备宽度,等价于window.screen.width。 我们想到使用min-device-width进行判断,很显然这个行不通,很多设备的device-width比PC分辨率还宽。

最后也没能找到使用CSS控制的办法,只能是让JS来检测了。

最简单的方法是使用window.matchMedia:

var mq = window.matchMedia( "(min-width: 500px)" );
if (mq.matches) {
	// window width is at least 500px
}
else {
	// window width is less than 500px
}

但可惜目前在移动设备上支持度还不够。

换一个思路,先通过检测UA来区分移动设备与PC:

Continue reading

Koala v1.0.1发布

Koala v1.0.1 发布

下载地址:http://koala-app.com/index-zh.html#download

更新日志:

  • Compass项目支持config.rb配置。
  • 支持文件批量操作,可以批量设置output path与删除文件。
  • 支持拖拽添加文件到当前项目。
  • 设置output path时弹出的文件(目录)选择窗口直接定位到相关目录。
  • 修复无法保存项目配置的问题。
  • 修改Mac OSX下无法启动的问题。

欢迎体验!

解决iScroll横向滚动区域无法拉动页面的问题

近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件。这个体验是实在是无法接受,特别是页面中有多个横向滚动区域时,很容易触碰到这种区域,这时用户将觉得页面很卡。

Google搜了一下,看来很多人都为这个问题而烦恼。有高人给出了解决方案,在这里可以找到。

代码如下:

myScroll = new iScroll('scrollpanel', {
    // other options go here...
    vScroll: false,
    onBeforeScrollStart: function ( e ) {
        if ( this.absDistX > (this.absDistY + 5 ) ) {
            // user is scrolling the x axis, so prevent the browsers' native scrolling
            e.preventDefault();
        }
    }
});

重写onBeforeScrollStart事件,判断touch的滑动距离,只在横向滑动距离大于竖向滑动距离时(也就是左右滑动时)才取消默认事件,这样就不影响页面滚动了。看iScroll源码,onBeforeScrollStart: function (e) { e.preventDefault(); }, 它默认是直接取消默认事件。

到这里的时候感觉就不错了。但是不要高兴的太早。

上下滑动横向滚动区域,页面确实可以滚动了,但在多体验了几次页面之后,又出现了一个问题。

先左右滑动该区域,滚动停止后再按住该区域想滚动页面,你会发现它还是不能滚动页面,这时你再点击一次该区域,这时可以了。这相对于你需要触摸2次才能滚动页面, 这样的行为还是让人无法接受。

经过多翻测试,我把问题锁定到absDistX/Y上。最后发现,在左右滑动之后absDistX/Y的值不会重置,第二次滑动该区域时执行onBeforeScrollStart事件,里面absDistX/Y值是上一次的值,所以程序还是阻止了页面滚动。

解决方法如下:

myScroll = new iScroll('scrollpanel', {
    // other options go here...
    hScroll: true,
    onBeforeScrollStart: function ( e ) {
        if ( this.absDistX > (this.absDistY + 5 ) ) {
            // user is scrolling the x axis, so prevent the browsers' native scrolling
            e.preventDefault();
        }
    },
    //解决第一次无法滑动的问题
    onTouchEnd: function () {
	var self = this;
	if (self.touchEndTimeId) {
		clearTimeout(self.touchEndTimeId);
	}

	self.touchEndTimeId = setTimeout(function () {
		self.absDistX = 0;
		self.absDistY = 0;
	}, 600);
    }
});

在onTouchEnd里面做处理,每次滑动之后都重置absDistX/Y的值。为什么要使用setTimeout?其实是为了防止误判断,太敏感也不好,有时候你只是想左右滑动虽然滑动的角度有点朝上或朝下。

Ok,现在终于爽了,想怎么滑都行。体验一下!

前端开发利器——Koala v1.0正式发布

koala

 

koala是一款开发者工具,负责对less、sass、coffeescript的编译工作,帮助web开发者更高效地使用less、sass、coffeescript开发。

项目地址:http://koala-app.com/index-zh.html

功能特性:
  • 多语言支持:支持less、sass、coffeescript 和 compass framework。
  • 实时编译:监听文件,当文件改变时自动执行编译,这一切都在后台运行,无需人工操作。
  • 编译选项:可以设置各个语言的编译选项。
  • 代码压缩:less & sass支持编译后自动代码压缩.
  • 错误提示:在编译时如果遇到语法的错误,koala将在右下角弹出错误信息,方便开发者定位代码错误位置。
  • 跨平台:windows、linux、mac都能完美运行。

 

项目当中越来越多地使用到less,现有的一些工具如winless、simpless功能都比较单一,无法满足开发要求,所以干脆就自己写了一个。

koala是基于nodejs + webkit开发而成,大部分人都无法想到nodejs也能用来开发桌面应用,事实告诉我们是可以的。

这里有一个非常棒的项目,它结合了node与webkit,使用node做为后端处理语言,webkit做为前端界面,这样简直是天作之合,现在前端开发者也能开发桌面应用了。node webkit项目地址:https://github.com/rogerwang/node-webkit

如何调试less & sass

很多同学都已经开始在项目使用lesssass,它们用起来确实是很爽,大大提高效率呀。

less & sass 都无法在浏览器中直接执行,需要变成CSS。有时候想调试样式,我们看到的行号是css代码的行号,并不能直接对应到less&sass文件中,修改起来总是不方便。

看到less&sass这么受欢迎,热情的开发者们给firefox开发了一个插件 FireSass,后来chrome也跟上了,开启一个实验性功能支持sass调试。

具体设置如下:

Continue reading

如何在IIS下部署php程序?

一般我们使用LAMP或者WAMP组合,但有时候我们想在windows服务器同时下跑.net与php,这时就必须使用IIS了。IIS是支持php的,而且配置也很简单。

具体操作:

1、打开IIS的CGI功能。

控制面板–打开或关闭windows功能。

2、下载最新php程序,解压到某个目录。

3、安装PHP Manager for IIS,下载地址:http://phpmanager.codeplex.com/

4、添加一个应用程序池PHP Pool,.NET Framework版本选择“无托管代码”,托管模式选择“集成”。

5、新建站点,应用程序池选择PHP Pool。

6、在网站列表中选中刚刚创建的站点,在右侧的功能视图中找到并打开PHP Manager,点击Register new PHP version,选择刚刚解压的PHP程序目录下php-cgi.exe。

Ok,到这里IIS就能部署PHP程序了。

[转载]前端开发工程师如何在2013年里提升自己

原文地址:Talks To Help You Become A Better Front-End Engineer In 2013

这篇文章其实文字部分不多,强烈推荐大家直接阅读原文,我这里主要是把文章里介绍的PPT简述一下,方便大家寻找。

===========================================================

大部分人非常在意个人在技术上的提升。但是保持对新技术的了解是一项不小的挑战, 毕竟我们需要的信息在数量上过于庞大。2012年里,伴随着前端发展的是大量的革命性突破和对前端的重新定义。

我们在实践的路上飞速前进,具体的进步体现在使用抽象化,优秀的代码质量,维护性上的提升以及更好的性能。如果你实在忙到没有时间来跟上最新的技术,不用担心。

随着假日的来临,我们就有了一些空闲的时间可以自己支配,我想,如果我把我收集的前端相关的精品讨论列表分享出来,那一定会对大家有一些帮助。你不需要把所有的都阅读一遍,但是这些相关的建议会让你了解更多相关的知识,为明年成为一名更好的前工程端开发师做准备。

Continue reading