2013年4月8日

【前端重构技能天赋】(二)——Javascript、CSS篇

摘要: 少叙闲言承接上一篇,这篇是关于JS、CSS的一些优化,相信很多大家都非常了解了,并且实际上也都在这么做,但我想,很多人和我一样,只知道规范这么做,并不太了解到底为啥这么做,到底好处在哪了?About JS、CSSCSS:样式表置于顶部避免CSS表达式使用外部JS、CSS削减JS、CSS<link> ,@import避免滤镜JS:脚本置于底部使用外部JS、CSS削减JS、CSS不用重复脚本减少访问和操作DOM事件委托1、样式表置顶,Why?浏览器渲染页面都是自上而下的渲染,当在<body>里遇到<link>或是<style>时候会阻塞渲染页面,而且 阅读全文

posted @ 2013-04-08 18:33 _xiaoMo_ 阅读(696) 评论(2) 推荐(2) 编辑

【前端重构技能天赋】(一)——内容篇

摘要: 少叙闲言专业的页面重构师手下出产的页面应该是标准、合理、高效,易扩展,易维护的。为尽早奔向这一NB的方向,吾等前赴后继的前端码农们,升级所需的必要天赋之一:载入更快,更省带宽!结合网上大量关于Yahoo的高性能网站构建的黄金守则,说下自己眼中的守则。守则分为7大类34条,包括内容、服务器、cookie、CSS、Javascript、图片、移动应用。About内容尽量减少HTTP请求减少DNS查找避免跳转缓存AJAX推迟加载预加载减少DOM个数用域名划分内容避免4041、尽量减少HTTP请求当用户载入你的页面时候,有80%的时间是用来下载页面里各个项目,包括图片、样式、脚本、FLash等。所以减 阅读全文

posted @ 2013-04-08 10:28 _xiaoMo_ 阅读(623) 评论(2) 推荐(2) 编辑

2013年3月21日

【JS跨域取XML】之——借助AS的URLLoader

摘要: 最近接到一个功能拓展需求,新需求中所引用的数据接口却只能提供XML格式……无奈自身功力有限,没有想到JS方面理想的解决方案,只好寻求AS工程师的帮忙,经过近2天的联调,最终解决了各浏览下的跨域访问。下面记录demo版代码:父页面HTML:<iframe id="hiddenIframe" style="width:0px; height:0px; border:0px none; *width:1px; *height:0px; overflow:hidden;"></iframe><button value="获 阅读全文

posted @ 2013-03-21 19:00 _xiaoMo_ 阅读(996) 评论(0) 推荐(0) 编辑

2013年3月19日

【总有一些东西要弄清】——说说面试时一系列的CSS问题

摘要: 仅以此篇缅怀那些笔试100次,问100次的CSS问题。问: CSS选择符有哪些?哪些属性可以继承?优先级?内联和important哪个优先级高?选择符1通配选择符(*)表示页面内所有元素的样式*{font-size:12px;margin:0;padding:0;}2类型选择符(body、div、p、span等)网页中已有的标签类型作为名称的选择符div{width:10px;height:10px;}3群组选择符(,)对一组对象同时进行相同的样式指派a:link,a:visited{color:#fff;}4层次选择符(空格)包含选择符对某对象中的子对象进行样式指派#header top{. 阅读全文

posted @ 2013-03-19 23:49 _xiaoMo_ 阅读(667) 评论(5) 推荐(2) 编辑

2013年3月15日

【拆了CSS照样是页面】之——HTML语义化(含H5)

摘要: 介绍HTML是提供网页文档内容的上下文结构和含义;HTML本身是没有表现的,我们看到的例如<h1>是粗体,字号为2em;<strong>的加粗,不要认为这些是html的表现,这是html的默认样式在起作用,所以我们要知道html和页面的表现是没有关系的,表现是CSS的事。html在页面中的作用是结构、含义,说白了就是划分内容,这里放什么,我们放的是什么。结构化一个页面比作房子,那HTML就是钢筋混凝土的墙,房盖房梁一样的架子;而CSS就是装饰材料,地板油漆一类的东西。好的页面结构就是在没有CSS装饰的情况下,页面结构依然清晰明了,房屋依然可现。而人们常说的DIV+CSS 阅读全文

posted @ 2013-03-15 18:06 _xiaoMo_ 阅读(891) 评论(0) 推荐(1) 编辑

2013年3月8日

【javascript继承】之——原型链继承和类式继承

摘要: 什么是继承啊?答:别人白给你的过程就叫继承。为什么要用继承呢?答:捡现成的呗。好吧,既然大家都想捡现成的,那就要学会怎么继承!在了解之前,你需要先了解构造函数、对象、原型链等概念......JS里常用的两种继承方式:原型链继承(对象间的继承)类式继承(构造函数间的继承)原型链继承://要继承的对象var parent={ name : "baba" say : function(){ alert("I am baba"); }}//新对象var child = proInherit(parent);//测试alert(c... 阅读全文

posted @ 2013-03-08 18:15 _xiaoMo_ 阅读(845) 评论(2) 推荐(0) 编辑

2013年3月7日

【IE大叔的嘴歪眼斜】之—— 由hasLayout引发的临床CSS Bug表

摘要: IE大叔这嘴歪眼斜的毛病不是一天两天了,集体拉出来测试时候,明明大家都在微笑,就丫一副呲牙咧嘴的......哎,没办法,谁让咱国内市面上都是这种呲牙咧嘴的浏览器呢.....(关注IE678死亡速度)查阅,翻读,摘抄,记录,再逐一实践,总结,终于对他这个臭毛病有了根源上的认识。hasLayout!先上定义:它是IE的特有属性。它决定着一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算组织内容。为了区别这两个概念,渲染引擎采用了hasLayout的属性,true或false,当属性为true时,我们说这个元素触发了布局(Layout)。具有hasLayout属性的标签:< 阅读全文

posted @ 2013-03-07 19:02 _xiaoMo_ 阅读(1189) 评论(3) 推荐(2) 编辑

2013年3月6日

【F12一下,看看页面里的第一行】——说说浏览器兼容性模式

摘要: 面试官:请你谈谈标准(Standards)模式、怪异(Quirks)模式、准标准(Almost Standards)模式,当你打开IE9时候会看见,浏览器模式,文档模式,兼容性视图,这些又是什么?尼玛啊......这些都是什么鸟东西......好吧,一点点来:先明白一个词DTD(文档类型定义),也就是你F12后,页面里第一行的一串东西,即doctype声明。这一串东西就是告诉浏览器你要用何种模式来渲染页面,说白了就是让浏览器用何种标准的CSS进行页面布局。有三种模式供你选择:标准模式(Standards Mode)准标准模式(Almost Standards Mode)怪癖模式(Quirks 阅读全文

posted @ 2013-03-06 18:55 _xiaoMo_ 阅读(844) 评论(3) 推荐(0) 编辑

【总有一些东西老是忘】之——常见HTML的块级标签、内联标签

摘要: 笔试时候,考基础什么的是最讨厌了(包括百度的笔试)块级元素内联元素 address - 地址 block - 块引用 center - 居中对齐块(不推荐) dir - 目录列表(HTML5踢出) div - 常用的不能再常用了 dl - 列表 fieldset - 一个包含着form组的框 form - 表了个单 h1 ~ h6 各种尺寸标题 hr - 水平分隔线(不推荐) menu - 菜单列表 noframes - 浏览器不支持frames显示的块 noscript -浏览器不支持script显示的块 ol - 有序列表 ul - 无序列表 p - 段落... 阅读全文

posted @ 2013-03-06 11:31 _xiaoMo_ 阅读(791) 评论(1) 推荐(0) 编辑

2013年3月5日

【IE大叔的杀马特审美】之——CSS盒子模型

摘要: 干前端,跑不了和IE大叔打交道.....有句话叫存在即合理,IE大叔在前端界是灰常的NB啊,既然咱改变不了世界,就只能改变自己。先上定义:为了给浏览器上各个元素排版定位,浏览器会根据渲染模式为元素生产4个矩形框,分别从外到内为margin、border、 padding、content,它们不可分割,但可能重合,这就是所谓的盒子模型,即CSS对一个元素渲染后的抽象形态。来一起看看大叔的眼里的盒子。总结一哈: 盒子模型的范围也包括 margin、border、padding、content 但W3C认为:盒子大小= content ... 阅读全文

posted @ 2013-03-05 18:31 _xiaoMo_ 阅读(817) 评论(6) 推荐(0) 编辑

导航