I am houbiao beta 0.1

2015-12-15 10:53:35 - 总要度过黑暗的黎明才能看到初升的太阳~

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

分类:Optimize

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

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

read all...

3752 reads 2 comments

Objective-C笔记-#import

分类:Objective-C

Objective-C在定义接口文件(@interface)以及实现文件(@implementation)时会在头部出现#import语句,接口文件的如下:#import 实现文件的如下:#import "myInterface.h"

不难看出,两者一个是用的尖括号(<>)一个是用的普通双引号("")。区别在于在尖括号中的文件表示系统级别的文件,它们存于预定义的路径下,由Xcode在项目中自动设置好。而双引号包含的任何文件都在当前项目中寻找。如上所示myInterface.h是当前项目的一部分,所以用双引号即可。

3712 reads 2 comments

chrome 27.0 has removed desktop version of -webkit-text-size-adjust property

分类:CSS3

Chrome升级到27版本以后取消了-webkit-text-size-adjust属性,这个属性都知道,就是用于在webkit核心的浏览器里设置字号小于12时用的,为什么取消,是有一定根据的。因为如果用了这个属性,那么对网页缩放的时候应用了这个属性的标签就不会放大/缩小了,对于正常人来说也许无所谓,但是对于视觉障碍的用户是不友好的,当浏览一个字码很小的页面时,你是否希望通过放大屏幕的比例来看的更清楚呢?没错,但是有了这个-webkit-text-size-adjust:none;你就不能放大(或缩小)了。

解决方法当然也是有的,通过-webkit-transform:scale();来进行缩放,但是这个缩放的是整体容器,并非容器内的字体,所以也会在一定程度上有所限制,比较麻烦,很不推荐,还是遵循标准来吧,这也算是通往WEB标准的一个小里程碑了。...

read all...

3184 reads 0 comment

Objective-C笔记-从零学iOS开发

分类:Objective-C

纯粹是从零开始学的学习记录资料,很基础的东西,基础到初始化一个变量。但一切都是从根基开始的。恩,没错。加油!

下面开始将我看书时所接触到的个人认为有用的东西记录下来。先记录一句话:苹果公司建议开发者至少将50%的开发时间用于用户界面的设计和开发。...

read all...

2891 reads 0 comment

javascript学习笔记之匿名函数的写法、传参和递归

分类:Self

非原创,网上看到的,觉得很靠谱很通俗易懂,复习加备忘,转过来了。原址在结尾处。

顾名思义,就是没有名字的函数。匿名函数通常用于javascript作用域的控制,可以有效的避免对全局变量的污染。常见的匿名函数有下面四种写法,欢迎补充:...

read all...

3543 reads 1 comments

javascript学习笔记之静心温习一下JS优化

分类:Self

很久没码字儿,状态低迷,借此温习一下根基,拿出以前的优化规则温习一下,也再一次鞭策自己,写代码要以效率为首要准则。以下的几点规则是Yahoo早先总结的,我只是拿来借花献佛罢了,现在开始。

HTML5时代用户对于网站的交互更加依赖也更加挑剔,交互就离不开DOM的操作。操作DOM当然就更离不开我们的神器!Javascript!Javascript固然伟大绚烂,但是由之带来的性能问题更是层出不穷,我们应该最大限度的优化(其实应该叫完善)Javascript。Yahoo提出,不论什么脚本,任何时间,任何浏览器上,执行时间都不应该超过100毫秒,但是如果实际执行的时间长于这个底限,我们就该考虑是否应该将进程分解成若干个更小的代码执行段。脚本失控基本上有以下4个方面的原因:...

read all...

3189 reads 0 comment

javascript学习笔记之js-trigger-Creating and triggering events

分类:Self

本节说的是js的trigger非jQuery的trigger(),但是之前咱们有必要再从新复习一下。

用过jQuery的人都知道jQuery有个trigger()事件,可以模拟出用户定义好的事件,比如说这样:$("#ele").bind("click",function(){ alert(1); })即给ID为ele的元素绑定了一个点击事件,当用户点击到他的时候会弹出提示框。但有些时候我们既需要触发他的点击但是又不能够点击到他,这就需要用到trigger()的模拟事件了。如下:$("#ele_2").bind("click",function(){ alert(2); $("#ele").trigger("click"); })这样的话在用户点击ID为ele_2的元素的时候就会触发2个动作,一个是自身的alert(2),另一个就是模拟了ID为ele的元素的点击事件,即alert(1)。...

read all...

3630 reads 0 comment

javascript学习笔记之Ajax的POST与GET

分类:Self

Ajax,从最基本的层面来说,是一种与服务器通信而无需重载页面的方法;数据可以从服务器获取或发送给服务器。有多种不同的方法建立这种通信通道,每种方法都有各自的优点和限制。这里就简单的狭义的说一下XMLHttpRequest。

XMLHttpRequest(简称XHR)是目前最常用的技术,它允许异步发送和接收数据。所有的主流浏览器对它都提供了完善的支持,而且它还能精确地控制发送请求和数据接收。你可以在请求中添加任何头信息和参数(包括GET与POST),并读取服务器返回的所有头信息,以及响应文本。...

read all...

3951 reads 2 comments

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

分类:Optimize

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

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

3453 reads 1 comments

javascript学习笔记之数组去重

分类:Self

很常用的功能,也是面试里出现比较多的问题。再从新拿出来看看,顺便看一下效率问题。

方法有很多,大致归为两类吧,一类是利用对象的权举属性,一类是利用数组的排序,个人比较倾向于数组,对象嘛,太过强大了,有点浪费的意思,对象和数组比起来很显然了,数组一定是简单于对象的,在这种场合里咱们用数组就足矣,当然对象也是很不错的方法,咱们下边就来一一展示,看个人爱好及你真正应用的地方来决定哪种方法吧。...

read all...

3811 reads 7 comments

javascript学习笔记之生命周期

分类:Self

我们通常定义的客户端生命周期起始于浏览器开始装载某个请求的特定数据,结束于浏览器发起一个新的请求(通常意味着页面的跳转或刷新)。客户端的javascript则作用于这个完整的生命周期过程中。

如果进一步细分,我们可以将客户端生命周期划分为从页面数据被装载页面数据装载完毕初始化阶段以及页面数据装载完毕一直到新的请求被发起之前的运行阶段。在前一个阶段里,javascript代码被浏览器解析,运行环境被初始化,函数和闭包被建立,而那些可以被立即执行的指令被执行并实时地得到结果。在后一阶段里,完成初始化的程序环境进入一个缺省的等待消息的循环,捕获用户操作引发的事件并作出正确响应,这种模式同经典的事件驱动模型非常接近。在这一阶段里,javascrip代码真正扮演一个界面交互行为处理者的角色。...

read all...

3334 reads 0 comment

javascript学习笔记之javascript伪协议

分类:Self

javascript伪协议:不是所有的浏览器都支持javascript伪协议,你可以在浏览器的地址栏里通过“javascript:”的形式来执行javascript代码。这其实也算是给早期的测试工作带来了一个便利,就是可以以命令行的形式来简易的测试自己的javascript代码,而不用单独的再写一个HTML文档。如下代码javascript:document.body.style.backgroundColor="#ff0";void(0);随便打开一个网页,将代码复制到浏览器的地址栏(复制到地址栏的时候请确认前边带有javascript:,个别浏览器会自动忽略掉冒号前的内容),回车,你会发现网页的背景色变成黄色的了,这便是javascript伪协议。

接上顺便说一句void(0);,这个小东西很关键,你可以试试以上代码如果去掉最后的void(0);会产生怎样的结果,没错,不但没执行还将你带到了一个新的窗口,这是因为javascript伪协议默认是将页面带到一个新的document中并显示程序返回结果,所以正常情况下运算的结果会在一个空文档对象内显示,而void(0);则可以阻止这个跳转,就好比我们给A标签添加的return false;一样。...

read all...

3294 reads 0 comment

lazy-load-img jQuery 1.4.1 图片延迟加载

分类:jQuery

说起延迟加载图片可能也算个半生不老的话题了,之所以要重新再提一次是因为网上的大多插件功能略微有些丰富,说实话,觉得有些臃肿,而且个别用到了appear属性,这个在低版本的jQuery中没有还要单独引库,本身也不是很赞同用特高版本的jQuery库,所以在自己用的1.4.1的版本上做了个很简单的延迟加载,功能很简单也很好上手用。

直奔主题看DEMO吧,就三个参数DEMO - lazy-load-img jQuery 1.4.1 图片延迟加载...

read all...

3403 reads 0 comment

jQuery图片滚动-loading异步加载(DOM加载之后)左右滚动

分类:jQuery

之前有个普通的轮播jQuery图片滚动-loading异步加载(DOM加载之后),没有方向感都是同一个方向,也没有上一个下一个的感觉,现在趁有需求又改了一改。把左右滚动的功能实现了。

然后我们UI说了,每次要等都加载完才显示有点慢。好吧,那就加载完第一个就显示出来,其他的在后台继续加载,加载没完成前都是loading的图,其实也就是背景图,也可以继续让几张图都加载完再滚动,代码有注释。DEMO点进来看哈。...

read all...

4040 reads 0 comment

IE6下jQuery load img事件,所有弹出的标签页中如果有一个已经执行过该load,那么其他的都失效。

分类:jQuery

写的比较乱,记录一下,防止以后遇到,也为可能遇到相同问题的你提前打个预防针。

过程是这样。图片轮播,DOM加载后对src进行赋值,然后加载图片,很顺利的过程,但是测试人员给出一个BUG,IE6下,点击页面的链接,弹开新窗口,在新窗口或原来的老窗口里再次点击回到图片轮播的首页时,轮播的load事件不执行了,故图片轮播也就是死在那了,一直显示loading不执行load里的代码。思前想后,是不是IE6的js解析太弱了,导致同一站点的img加载后在其他的标签里也认为是已经load了?那么把img标签放到js循环里动态生成呢?测试OK,具体原理正在研究中。然后同事也弄出个解决方案,就是img标签还是本身就在,src为空,但是把循环给img的src赋值的语句放到load语句之后,测试下也是OK的。...

read all...

3301 reads 0 comment

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

分类:Optimize

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

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

read all...

4236 reads 0 comment

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

分类:Optimize

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

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

read all...

4401 reads 0 comment

CSS3 transition 过渡动画

分类:CSS3

今天熟悉了下CSS3的transition属性,即过渡动画(非常类似于jQuery的animate属性)。有了这个属性之后,一些简单的过渡动画就无需jQuery之类的库了,直接在CSS里即可完成,废话不说,上示例,DEMO - CSS3 transition 过渡动画

代码的组成和参数也相对很简单明了,我们来详细看一下:-webkit-transition: property duration timing-function delay;这一句定义了在webkit浏览器下一个变换动画的4个属性(注:在Firefox浏览器下应使用-moz前缀,Opear下则使用-o前缀)。...

read all...

48280 reads 3 comments

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

分类:Optimize

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

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

read all...

4493 reads 0 comment

CSS3 -webkit-gradient之linear-线性渐变

分类:CSS3

CSS3在webkit核心浏览器下的渐变样式,包括线性渐变(linear)和径向渐变(radial)。本节主要认识一下linear-线性渐变。基本语法如下:background-image: -webkit-gradient(linear,left top,left bottom,from(#f00),to(#ff0),color-stop())}

以上就是创建一个最基本的线性渐变,其含义是:首先告诉浏览器这个是webkit核心的属性,渐变样式为linear,从left top到left bottom,画一个由#f00到#ff0的渐变。结果如图。CSS3 -webkit-gradient之linear-线性渐变...

read all...

3502 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...

3749 reads 0 comment

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

分类:Optimize

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

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

read all...

4429 reads 1 comments

CSS Sprite - 阅大牛文章有感

分类:Optimize

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

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

read all...

3418 reads 0 comment

Firebug 网络面板的红蓝线

分类:Optimize

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

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

read all...

4229 reads 1 comments

CSS3 border-radius

分类:CSS3

一直没怎么动CSS3的样式,今天拿border-radius做个简单的哆啦A梦,感觉还不错,样式处理的还算圆滑。留作笔记吧。(radius翻译为半径)CSS3 border-radius

该属性用于给元素添加圆角效果,同理也可以让元素变成一个圆。...

read all...

46844 reads 1 comments