I am houbiao beta 0.1

IE打开页面有源文件代码,但页面显示空白

分类:Optimize

简单的描述一下,就是用IE低版本浏览器查看页面的时候,页面一片空白,下边的状态栏也显示加载完毕,并且不报错,开始以为是JS等等问题,但是发现连TITLE信息都没有显示,遂查看源文件,打开后发现源文件一个字都不少的呈现出来了,那问题一定是出现在代码或者解析上面。

这种问题没有遇到过,搜之,看到有人也遇到了同样的问题,而且人家出了解决方案,拿来测试。果真OK!!!分享一下链接 - 打开页面有源文件但页面空白问题的解决方法 文章中的方法很简单,就是将所有的meta标签放到title标签之前。链接中的文章有详细的分析,大家可以仔细看看,了解了其中的问题所在然后再进行动手修改,这样以后再有类似的问题便可真正的做到举一反三了。...

read all...

3937 reads 2 comments

网站性能刻不容缓-从新认识CSS Images JS

分类:Optimize

有幸在团队的每周一课上讲演了一番,做了很多工作,虽然工作繁忙但还是把这个PPT弄出来了,也谢谢后期帮我美化PPT的姑凉~~~内容的话,看书的笔记比较多,其他的都是个人晶来了。提供个下载频道,很适合初识前端的人,从开始就养成一个好的习惯,等项目日益庞大的时候你就会发现了一个好的习惯是多么重要。

好了,下载地址见此网站性能刻不容缓-从新认识CSS Images JS

3612 reads 1 comments

图像优化(一)深入了解GIF、JPEG、PNG

分类:Optimize

多彩多样的图像会为站点增色不少,但是你想没想过,在你创造这些美丽的图像的同时,网站的负荷也在随之增加,怎么办呢?总不能为了性能抛弃图像吧?当然不!几个很简单的动作便可让你的图像或轻微有损或无损的大大“瘦身”,我们着重点放在无损上,也就是在不损耗质量的前提下,将文件大小减到最小。就算精确到像素级别,优化后的图像和原图在视觉质量上也是一样的。如果不对图像进行优化,就会通过网络发送一些对用户体验没有任何帮助的额外数据。我们应该毫不犹豫的学习这门技术并应用到实际的项目中。

制作最优图像第一步,就是理解GIF、JPEG、PNG这三种广泛应用于WEB上的图像特点。然后根据实际情况来选择最适合的格式。...

read all...

4350 reads 0 comment

高效CSS选择符 - 这也许会颠覆你书写CSS的习惯

分类:Optimize

关于前端性能一说,绝大多数的人都知道JS优化,DOM优化,但是你有没有考虑过CSS选择符优化?殊不知这个用来美化前端页面的东西也是一个性能的关键。而且往往我们都是背道而驰,借助前人铺垫好的道路我们来补习一下。

首先,对于CSS的性能有一些最佳的实践,1.把样式表放在HEAD标签中以提升页面的逐步渲染速度;2.不要再IE中使用CSS表达式,因为它可能会被执行成千上万次,从而导致打开页面的速度变慢;3.避免过多(如果可以完全避免的话最好)的行内样式,即style,因为这会增加下载页面内容的大小。另外一个,也是最重要的话题就是CSS选择符的开销。CSS选择符由一系列初始化的参数组成,这些参数指明了要应用这个CSS规则的页面元素。...

read all...

4562 reads 0 comment

javascript 数据访问优化之局部变量与全局变量

分类:Optimize

以下为引用书内的文字:计算机科学中的一个经典问题就是如何确定数据的存储位置,以获取最佳的读写效率。数据存储的问题,关系到代码执行过程中数据被检索到的速度。在javascript自己拍卖行,这个问题相对简单,因为它只有几种存储方案可供选择。不过,和其他编程语言一样,数据的存储位置会很大程度上影响其读取速度。javascript中有四种基本的数据存取位置:

直接量:直接量只代表自身,不存储在特定位置。javascript中的直接量有-字符串,数字,布尔值,对象,数组,函数,正则表达式,以及特殊的null和undefined值。...

read all...

4681 reads 0 comment

getElementById(ClassName) querySelector jquery 选择器的性能对比及使用推荐

分类:Optimize

利用JS做用户的交互少不了使用选择器,selector,目前IE8(含)以上版本、Firefox、Chrome、Safari、Opera都支持querySelector和querySelectorAll方法,它们是W3C Selectors API规范中定义的,作用是根据CSS选择器规范便捷定位文档中指定元素。使用方法和jQuery很类似。

如上所述我们便拥有了2个原生的选择器和1个当下很流行的jQuery选择器,那么3者的性能差异怎么样呢,谁更胜一筹呢?哪个更适合大量使用呢?我们看图说话(以下从左向右依次为Chrome、Safari、Firefox)。getElementById(ClassName) querySelector jquery 选择器的性能对比及使用推荐...

read all...

3855 reads 0 comment

双飞翼布局(三栏布局-左右固定-中间动态变化)及DOM优先加载

分类:Optimize

两个问题,一个是经久不衰的双飞翼布局,即左右各显示一个侧栏,中间显示主体内容,如图双飞翼布局(三栏布局-左右固定-中间动态变化)及DOM优先加载,另一个则是很重要的性能问题-DOM的加载顺序。

双飞翼布局很适合博客之类的阅读性站点,因此被广泛应用,实现它的方式也多种多样。入门的布局代码就不介绍了,我们来分析一下他的加载顺序,图中所示依次为左-中-右,但是我们也注意到页面关键的内容绝大部分都在“中”,就是说必须“左”这个DIV全部加载完毕,才能开始继续加载“中”,试想一下,如果在网速慢、“左”的数据和资源特别多的情况下,用户是不是得等很长时间?怎么解决这个默认的加载顺序呢?...

read all...

4626 reads 1 comments

CSS Sprite - 阅大牛文章有感

分类:Optimize

CSS Sprite - 有人叫他CSS精灵,也有人叫他CSS雪碧(都喝过雪碧吧,注意上边的单词了吗)。以下我就暂且简称“雪碧”。

看了好几篇介绍雪碧的文章,其中有很多不同的观点,推荐文章点此。...

read all...

3540 reads 0 comment

Firebug 网络面板的红蓝线

分类:Optimize

开发工具Firebug里边有个网络面板,可用来查看网站各个资源的加载时间,以便帮助开发者更有效的提高页面加载速度。在这个面板中,我们会看到一蓝一红两条竖线,如图:

Firebug 网络面板的红蓝线...

read all...

4364 reads 1 comments