Archive for 三月 2010
只测试了ie6和chrome,和Firefox.chrome和Firefox均是目前最新版本,1代表可编辑,0代表不可编辑
No tags
如果对于 reflow 这个概念你还不太清楚或者不知道，请先阅读：
- 《Notes on HTML Reflow》
- 《What is a reflow?》
- 《Gecko:Reflow Refactoring》
- 《reflow》
- 《形象化的reflow》
- 《样式的执行效率-reflow》
Yahoo! 性能工程师 Nicole Sullivan 在最新的文章 《Reflows & Repaints: CSS Performance making your JavaScript slow?》 中总结了导致 reflow 发生的一些因素：
- 调整窗口大小（Resizing the window）
- 改变字体（Changing the font）
- 增加或者移除样式表（Adding or removing a stylesheet）
- 内容变化，比如用户在input框中输入文字（Content changes, such as a user typing text in
an input box） - 激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激活)（Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)）
- 操作 class 属性（Manipulating the class attribute）
- 脚本操作 DOM（A script manipulating the DOM）
- 计算 offsetWidth 和 offsetHeight 属性（Calculating offsetWidth and offsetHeight）
- 设置 style 属性的值 （Setting a property of the style attribute）
reflow 会引起开销，影响页面的性能，那如何才能做到合理的优化呢？Nicole Sullivan 也提供了部分建议：
- 如果想设定元素的样式，通过改变元素的 class 名 (尽可能在 DOM 树的最里层)（Change classes on the element you wish to style (as low in the dom tree as possible)）
- 避免设置多项内联样式（Avoid setting multiple inline styles）
- 应用元素的动画，使用 position 属性的 fixed 值或 absolute 值（Apply animations to elements that are position fixed or absolute）
- 权衡平滑和速度（Trade smoothness for speed）
- 避免使用 table 布局（Avoid tables for layout）
- 避免使用CSS的 JavaScript 表达式 (仅 IE 浏览器)（Avoid JavaScript expressions in the CSS (IE only)）
详细阅读：
No tags
var x = 1; delete x; // false x; // 1
几个周前,我有幸浏览了一遍Stoyan Stefanov的Object-Oriented Javascript(面向对象的JavaScript?)一书.这本书在亚马逊网站上有着异常高的评价,所以我很好奇地想看一下它到底是否真的值得如此推崇.我从函数那一章开始阅读,作者的叙述方式让我感到愉悦;后面跟的例子也被组织的非常恰当,以渐进的形式展现在读者面前,看起来即使是初学者也能很容易地掌握它.然而,几乎在同时我立刻被一个通篇出现的有趣的关于删除函数的失误迷惑住了.这里同时存在一些其他的错误,例如声明函数和函数表达式之间的不同,但是我们在这里暂时不讨论这些问题. 书中声称"函数被创建成一个普通的变量–它可以被拷贝到一个不同的变量中,也可以被删除".在这些阐述的后面,跟了这样一个例子:
>>> var sum = function(a, b) {return a + b;}
>>> var add = sum;
>>> delete sum
true
>>> typeof sum;
"undefined"
排除掉漏掉两个分号,你还能看出这个例子有什么错误么?按常理来讲,问题在于删除一个sum变量时不会成功的;delete函数返回的不应该是true,sum的类型也不应该是undefined.所有的一切都是因为在JavaScript中变量时不可能被删除的.至少不能用这种方式来删除. 那么这个例子中发生了什么呢?是排版错误?还是故意消遣大家?也许都不是.这整个程序片段都是来自firebug的真实输出,Stoyan一定是用firebug来做过快速的测试.几乎可以肯定firebug在删除行为上有着一些不同寻常的规则.firebug诱导Stoyan犯了错误!那么到底在这期间都发生了什么呢? 为了回答这个问题,我们需要理解delete操作在JavaScript到底是如何运作的:到底什么东西可以被删除,什么不能被删除,为什么会这样.今天我将在这篇文章里详细阐述这些问题.我们将会看到firebug的那怪异的然而事实上并不是非常怪异的行为.我们将深入研究党我们创建一个变量,一个函数,创建属性,然后删除它们的时候表象的背后都发生了些什么.我们将看到浏览器的普遍行为和一些臭名昭著的bugs;我们也会讨论到ECMAScript第五版的严格模式是如何改变delete的行为的. 如你所想,网络上关于delete的文献是极其稀少的.MDC(指Firefox文档库,可以去google搜索)里的文章可能是最全面的资源,但是碰巧在这个主题上缺少了一些有趣的细节研究;奇怪的是,正式这些被忽略的细节中的一个原因引起了firebug的奇怪的行为.MSDN参考文档则基本没有参考价值.
Theory(原理)
那么为什么我们可以删除对象的属性呢:
var o = { x: 1 };
delete o.x; // true
o.x; // undefined
而不是变量呢?就像这样:
var x = 1; delete x; // false x; // 1
或者是function,例如这样:
function x(){}
delete x; // false
typeof x; // "function"
注意:当一个属性不能被删除的时候delete方法将返回一个false值.
(全文…)
No tags
到目前为止,我的人生只经历过一次面试,这次面试上面考官只问了一个问题,那就是<em>和<strong>标签是用来做什么的,很杯具的是我当时连em表现成斜体都不知道,更别说什么语义化了,然后理所当然被刷了.
这一次就来仔细总结下这两个标签和H系列标签
1.em和strong,i和b.
还是贴一篇玉伯的文章吧,阐述很详细:
http://lifesinger.org/blog/2008/12/the-different-of-em-and-strong/
首先,em和i在现在的浏览器上表现为斜体,strong和b表现为粗体,但是因为斜体的字体会导致锯齿,所以一般都不太用em.但是按照语义化来说,应该适当使用em,样式可以用css来控制,而且不敢确保以后的浏览器会将em渲染成什么效果,这也是为什么不能依赖标签本身的表现来使用标签的原因,说不定ie9突然觉得em渲染成灰色的粗体更好一点,然后改了渲染方式,应该用标签来表示结构,而不是样式.
在语意上,em表示对内容的强调,strong也表示强调,但是强调的程度更重一些.玉伯文章里也说了在html5里,em表示局部强调,strong表示全局强调.我的理解就是,em表示你在看到这个网页的时候你不必注意em里的内容,而是在深入阅读的时候通过em的强调来理解内容的含义,而strong则表示你一眼看去就知道了内容的重点,例如用在每篇文章的第一句话里.这也就是个局部和全局的概念吧.
玉伯文章里还提到:em 表示内容的着重点（stress emphasis），strong 表示内容的重要性（strong importance).这个理解起来其实也就是局部和全局的概念,可以自己去体会.
i和b标签前一阵传言即将被抛弃,不推荐使用,很多人用它来表示单纯的样式,当成一个非语义化的标签,但是在html5中他们被赋予了语意,b 元素现在描述为在普通文章中仅从文体上突出的不包含任何额外的重要性的一段文本。例如：文档概要中的关键字，评论中的产品名。或者代表强调的排版方式。i 元素现在描述为在普通文章中突出不同意见或语气或其他的一段文本，例如：一个分类名称，一个技术术语，一个外语中的谚语，一个想法等。或者代表斜体的排版方式.
有一点要注意,按照理论,应该更多地应用em标签来表示着重,因为按常理,要着重加着重强调的总是比着重一次的几率少很多,所以strong只应该用在需要的地方,不能够乱用.
2.H1,H2…….H6标签.
H标签用来定义标题,同时暗示文档结构,虽然样式上H1-H6分别呈现不同的大小,但是不要随便使用H标签来表示字体大小,也不要在一个标题中出现多个H标签,他们应该用来表示文档层次.
文档的第一层标题应该总是用H1来表示,虽然H1的字体非常大,但是可以用css控制样式,不要因为H1太大,于是选用H2作为第一层标题,这样会让某些搜索引擎感到迷惑.而且最好不要跳跃使用,H1下一级标题就应该用H2,而不是其他更小的H.记住原则即可,不要用样式去选择标签.
No tags
1.优化HTML
http://jeekundo.com/2010/02/309
2.像Google一样开会
http://www.isweetriver.com/2010/google-meetings
3.加速Javascript：DOM操作优化
http://www.blogjava.net/emu/archive/2010/03/01/314185.html
1.基础:本次分析原理就是在各个浏览器下input内容变化的时候触发事件的各种不兼容性.在ie下用onpropertychange事件,在其他浏览器里用input事件.
2.用例:对每个浏览器分别测试如下的情况:
–输入英文字母时–开启输入法时–大小写不同时–输入运算符时–按下tab键时–输入法中按下空格时–按下控制键时–复制粘贴时–删除文本时–等等
3.测试开始:(只标出特殊情况,没标出的表示正常触发,每次只触发一次事件)
chrome:+开启输入法时,可以捕捉到输入事件.+开启输入法的时候按下空格键,触发两次事件,猜测一次是空格触发的,一次是输入法改变输入框里的文本时触发的.+开启输入法的时候,按下空格后,立即按下大写锁定,此后所有的输入事件都会被触发两次,原因不知.+没有开启输入法的时候,方向键不会触发事件,但是开启输入法后,方向键可以触发事件.+剪切和粘贴都会触发事件.+tab键不处罚事件,开启输入法时,按tab键触发事件.+按住shift和其他键(例如:数字键),每输入一个字符触发两次事件.
Firefox:+开启输入法时,不能扑捉到事件,但是按下空格时,可以触发两次事件.+任何时候方向键都不触发事件.+开启输入法的时候,按下空格后,立即按下大写锁定,此后所有的输入事件都会被触发两次,原因不知.+按下tab键的时候不触发事件.++Firefox页面刷新的时候内容会被保留在输入框里.+按住shift和其他键(例如:数字键),每输入一个字符触发两次事件.
opera:+正常情况下,在输入框里按下tab键会触发一次事件,但是此后只要不刷新页面,tab键都不会再触发此事件.+开启输入法后不会触发事件,开启后,方向键和tab键都不触发事件.+开启输入法时,按下空格只触发一次事件,不会出现触发两次事件的情况.+粘贴的时候触发事件,剪切的时候不触发
ie:+输入法不会触发事件,按空格也都是只触发一次,方向键任何时刻都不触发.+刷新页面的时候内容会留在input里,而且注意,不管input是不是空的,刷新页面后自动触发一次事件.
3.总结.
就一句话,差异很大.
注意input事件可以用在chrome,Firefox,opera里,但是只能用 addEventListener绑定,不能用ontype形式,而onpropertychange可以用on形式,也可以用attachEvent绑定
MAX_VALUE 属性是 JavaScript 中可表示的最大的数。它的近似值为 1.7976931348623157 x 10(308)
转载请注明:来自hello,JavaScript,地址:http://www.beiju123.cn/blog
1.首先当然是我们组的招聘,要和我在一起工作,那就发邮件给yuanxin@taobao.com,圆心哥哥对人可好了,大家完全不用紧张.http://ued.taobao.com/job/season3/
2.快乐淘宝和阿里云都比较缺人,有意者可以直接联系我,我帮忙推荐简历:xinyu198736@gmail.com
3.支付宝UED招聘:http://ued.alipay.com/job/
4.杭州19楼网站UED招聘:http://corp.dukuai.com/corp/page/join.html
5.搜狐技术产品中心招聘UED:http://space.chinavisual.com/action-model-name-hr-itemid-5535
6.豆瓣招资深视觉设计师:http://jobsdigg.com/story/5349/
每日一博,并不是每日都写,只是写的更经常一点,但是也会写的简短一点.
大家应该都知道怎么动态加载图片吧,类似这样:
var img=new Image();
img.onload=function(){document.getElementById("log").innerHTML+="dd";}
img.src="19677.png";
可是在ie6里有一点小问题,那就是在处理GIF的时候,onload并不是只触发一次,而是每隔一段时间就触发一次,这是在和同事的讨论中发现的,触发间隔应该就是gif的帧速吧,这个没研究过.
所以在处理gif的时候要特别注意这个问题,我想出的解决方法是在onload事件里加一个:this.onload=null.
有人说这样形成了懒惰函数,我还不知道什么是懒惰函数,等研究研究再说吧.
今天改了一下博客的主题,发现博客主题在ie6下变样了,后来发现是因为某篇文章里的某个图片太大了撑开了容器,导致样式错位,前几天公司需求里也曾遇到过要编写一个等比缩放的东西,后来不了了之,今天就一起解决了它吧.
1.等比缩放?
等比缩放就是一张图片按照比例缩放,而不是按照容器大小去缩放,那样会变形而且变得很丑,例如下面的示例:
这是原图片,大小是200*100:
,
如果不按比例缩放成100*100:
,很明显变形了.
我现在要的效果是这样的:
在两边多出两块空白,图片是100*100的,但是里面的内容是没有变形的.
2.OK,还有那些需求?
(全文…)
No tags
转载请注明:来自hello,JavaScript,地址:http://www.beiju123.cn/blog
转载请注明:来自hello,JavaScript,地址:http://www.beiju123.cn/blog
