_xiaoMo_ - 博客园

【前端重构技能天赋】（二）——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_ 阅读(698) 评论(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_ 阅读(628) 评论(2) 推荐(2) 编辑

【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_ 阅读(1004) 评论(0) 推荐(0) 编辑

【总有一些东西要弄清】——说说面试时一系列的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_ 阅读(673) 评论(5) 推荐(2) 编辑

【拆了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_ 阅读(895) 评论(0) 推荐(1) 编辑

【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_ 阅读(846) 评论(2) 推荐(0) 编辑

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

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

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

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

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

posted @ 2013-03-06 18:55 _xiaoMo_ 阅读(853) 评论(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_ 阅读(798) 评论(1) 推荐(0) 编辑

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

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

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

墙砖攻城师