自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(44)
  • 收藏
  • 关注

转载 你是如何测试JavaScript代码的?

如何用Qunit测试你的JavaScript代码posted by疯狂小强at 三月 31, 2011 所属分类JQuery,前端工具,开发经验18,242次阅读17篇评论»标签:javascriptJQuery前端工具分享到:QQ空间新浪微博人人网开心网更多19QUnit, 由jQuery团队开发,是一个对JavasScri

2015-03-20 20:38:01 6109

转载 AMD vs. CommonJS?

js开发者对js模块加载的尝试和创新从来都没有停止过,尤其是当nodejs的出现后,模块化加载的必要性更加凸显。本文不讨论如何在nodejs环境来模块化加载(创造者已经利用commonJS机制解决),只讨论在浏览器环境下如何来模块加载的思路,并提出一些我的看法。浏览器环境与nodejs的环境的最大差异是,对于nodejs的环境,大多数情况下被依赖的模块文件本身就在本地(它们都在服务器上),

2015-03-20 20:26:38 1098

转载 解释下原型继承的原理。

prototype与[[prototype]]在有面象对象基础的前提下,来看一段代码:12345678910111213141516//Animal构造函数function Animal(name){

2015-03-19 22:26:37 6496

转载 解释下 JavaScript 中 this 是如何工作的。

调用一个函数会暂停当前函数的执行,传递控制权和参数给新函数。除了声明时定义的形式参数,每个函数还接收两个附加的参数:this和arguments。参数this在面向对象编程中非常重要,它的值取决于调用的模式。在JavaScript中一个有4中调用模式:方法调用模式、函数调用模式、构造器调用模式和apply调用模式。这些模式在如何初始化关键参数this上存在差异。1.方法调用模式当一个函数被

2015-03-19 20:45:09 6490

转载 解释下事件代理

在传统的事件处理中,你按照需要为每一个元素添加或者是删除事件处理器。然而,事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越大。JavaScript事件代理则是一种简单的技巧,通过它你可以把事件处理器添加到一个父级元素上,这样就避免了把事件处理器添加到多个子级元素上。它是怎么运作的呢?      事件代理用到了两个在JavaSciprt事件中常被忽略的特性:事件冒泡以及

2015-03-19 16:04:54 4502

转载 什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?

FOUC - Flash Of Unstyled Content 文档样式闪烁原因有:1、使用@import方法导入CSS时,例如: @import "../fouc.css";此方式由于IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。2、将样式表

2015-01-05 16:54:32 3477

转载 请谈一下你对网页标准和标准制定机构重要性的理解。

网页标准和标准制定机构都是为了能让web发展的更‘健康’,首先约束浏览器开发者遵循统一的标准,其次约束网站开发者,这样降低开发难度,开发成本,SEO也会更好做,也不会因为滥用代码导致各种BUG、安全问题,最终提高网站易用性。

2015-01-05 16:51:09 4058

原创 你都使用哪些工具来测试代码的性能?

jspref用来测试js代码的性能参照http://www.iteye.com/news/25351

2015-01-05 16:47:09 3595 1

转载 请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。

利用css3的动画新性animation来完成,目前只有webkit内核的浏览器支持此属性,所以前面加了-webkit        css3实现幻灯片效果                   .cb-slideshow,        .cb-slideshow:after{            position:fixed;           

2015-01-05 16:14:36 2562

转载 如果你参与到一个项目中,发现他们使用 Tab 来缩进代码,但是你喜欢空格,你会怎么做?

1、建议项目使用EditorConfig之类的规范2、为了保持风格的一致性,保持原有3、直接使用vim里的retab命令将所有的tab转换成空格

2015-01-05 14:40:29 2231

转载 请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)

1、减少http请求(合并文件、合并图片)2、优化图片文件,减小其尺寸,特别是缩略图,一定要按尺寸生成缩略图然后调用,不要在网页中用resize方法实现,虽然这样看到的图片外形小了,但是其加载的数据量一点也没减少。曾经见过有人在网页中加载的缩略图,其真实尺寸有10M之巨…普通图像、icon也要尽可能压缩后,可以采用web图像保存、减少颜色数等等方法实现。3、图像格式的选择(GIF:提供的颜

2015-01-05 13:44:51 24272

转载 为什么利用多个域名来提供网站资源更有效?浏览器同一时间可以从一个域名下载多少资源?

1. 静态内容和动态内容分服务器存放,使用不同的服务器处理请求。处理动态内容的只处理动态内容,不处理别的,提高效率,这样使得CDN(内容分发网络)缓存更方便 2、 突破浏览器并发限制 (你随便挑一个 G家的 url: https://lh4.googleusercontent.com/- si4dh2myPWk/T81YkSi__AI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-

2015-01-05 12:59:24 9819

转载 你如何对网站的文件和资源进行优化?

1、文件合并(目的是减少http请求):Web性能优化最佳实践中最重要的一条是减少HTTP 请求,它也是YSlow中比重最大的一条规 则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射 (Image Map)和使用Data URI来编码图片。CSS Sprites和图像映射现在已经随处可见了,但由于IE6和IE7不支持Data URI以及性能问题

2015-01-05 10:15:49 13099

转载 请解释一下什么是“语义化的 HTML”。

随着 CSS 的深入人心,结构、表现与行为的逐渐分离,HTML 语义化成了炙手可热的卖点。语义化的 HTML 首先要强调 HTML 结构一个网页就好像一幢房子,HTML 结构就是钢筋混泥土的墙,一幢房子如果没有钢筋混泥土的墙那就是一堆废砖头,也就称不上是房子了。CSS 是装饰材料,是油漆,是用来装饰房子的。CSS 如果没有 HTML 结构那也就什么都不是了,没有了实际使用价值。CSS 完全依靠

2015-01-04 22:13:33 2468

转载 你能描述一下渐进增强和优雅降级之间的不同吗?如果提到了特性检测,可以加分。

渐进增强(progressive enhancement):一开始只构建站点的最少特性,然后不断地对不同的浏览器追加不同的功能优雅降级(graceful degradation):一开始就构建站点的完整功能,然后针对浏览器进行测试和修复“优雅降级”和“渐进增强”都关注于同一网站在不同设备里不同浏览器下的表现程度。关键的区别则在于它们各自关注于何处,以及这种关注如何影响工

2015-01-04 20:35:29 2789

转载 你能描述一下当你制作一个网页的工作流程吗?

内容分析:分清展现在网络中内容的层次和逻辑关系结构设计:写出合理的html结构代码布局设计:使用html+css进行布局样式设计:首先要使用reset.css交互设计:鼠标特效行为设计:js代码,ajax页面行为和从服务器获取数据测试兼容性;优化性能。

2015-01-04 15:34:33 4025

转载 谈谈你喜欢的开发环境。(例如操作系统,编辑器,浏览器,工具等等。)

easyeclipse,sublime以及Fierbug,chrome自带的元素审查;IEtest

2015-01-04 15:27:39 1109

转载 在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的?

UI:界面美观,要有个性,考虑用户使用的逻辑要简单,用起来舒适自由。使用习惯要符合大部分用户的习惯,比如少让用户输入,采用选择的方式,提供搜索和提示功能。安全性:参照http://zhidao.baidu.com/link?url=V9p85yMAWdPRALrmO0-                      A1EhnliZMtpswj0W4xxuRPq1a1UqXpwKzstqVMHLm

2015-01-04 10:55:53 3579

转载 解释一下你对盒模型的理解,以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。

盒子模型分为两类:W3C标准盒子模型和IE盒子模型 (微软确实不喜欢服从他家的标准)这两者的关键差别就在于:W3C盒子模型——属性高(height)和属性宽(width)这两个值不包含 填充(padding)和边框(border)IE盒子模型——属性高(height)和属性宽(width)这两个值包含 填充(padding)和边框(border)我们在编写页面代码的时候应该

2015-01-03 22:22:03 10027

转载 解释下浏览器是如何判断元素是否匹配某个 CSS 选择器?

先产生一个元素集合,然后从后往前判断;       浏览器先产生一个元素集合,这个集合往往由最后一个部分的索引产生(如果没有索引就是所有元素的集合)。然后向上匹配,如果不符合上一个部分,就把元素从集合中删除,直到真个选择器都匹配完,还在集合中的元素就匹配这个选择器了。举个例子,有选择器:body.ready #wrapper > .lol233先把所有 class

2015-01-03 21:40:04 2937

转载 如果设计中使用了非标准的字体,你该如何去实现?

所谓的标准字体是多数机器上都会有的,或者即使没有也可以由默认字体替代的字体。方法:1、用图片代替  2、web fonts在线字库,如Google Webfonts,Typekit 等等;http://www.chinaz.com/free/2012/0815/269267.shtml  3、@font-facehttp://www.qianduan.net/google-

2015-01-03 21:00:03 5661

转载 使用 CSS 预处理器的优缺点有哪些?(SASS,Compass,Stylus,LESS) 描述下你曾经使用过的 CSS 预处理的优缺点。

缺点:简单来说CSS预处理器语言较CSS玩法变得更高级了,但同时降低了自己对最终代码的控制力。更致命的是提高了门槛,首先是上手门槛,其次是维护门槛,再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。优点:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。通俗的说,CSS预处理器用一种专门的编程语言,进行Web

2015-01-03 20:19:24 4238

转载 在书写高效 CSS 时会有哪些问题需要考虑?

1.样式是:浏览器是从右向左来解析一个选择器的 2.ID最快,Universal最慢 有四种类型的key selector,解析速度由快到慢依次是:ID、class、tag和universal 3.不要tag-qualify (永远不要这样做 ul#main-navigation { } ID已经是唯一的,不需要Tag来标识,这样做会让选择器变慢。) 4.后代选择器最糟糕(换句话说,下面这个选择器

2014-12-30 21:03:23 2818

转载 如何优化网页的打印样式?

1、指定媒体的两种方法:方法A:Media属性media="screen" href="screenstyles.css" />方法B:@media或@import@import url("screenstyles.css") screen; @media print {     /* 打印时使用的样式放置在此 *}

2014-12-30 20:10:22 4202

转载 你熟悉 SVG 样式的书写吗?

是绘制矢量图形的html5的标签,它是用SVG 使用 XML 格式定义图形的。其定义格式为://XML标准文件头,从左到右依次表示:版本号是1.0,standalone 定义了外部定义DTD 文件的存在 //因为上面是no<svg viewBox = "0 0 1000 1000" version = "1.1"  xmlns="http://www.w3.org/20

2014-12-30 15:55:35 1975

转载 你用过媒体查询,或针对移动端的布局/CSS 吗?

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css,适合相应的设备显示;即响应式布局@media screen and (min-width: 400px) and (max-width: 700px) { … }@media handheld and (min-width: 20em), screen and (min-width: 20em) { … }

2014-12-30 15:52:34 6510

转载 你用过栅格系统吗?如果使用过,你最喜欢哪种?

Bootstrap中的流式布局;Bootstrap提供了两种布局方式,固定式布局和流式布局方式,Bootstrap的布局实际上是在栅格外加个容器(container),因此两种布局方式的唯一区别是:固定布局加的是固定宽度(width)的容器,流式布局加的是自适应(或叫可变)宽度的容器。1.固定布局body>       div class="container">

2014-12-30 10:51:10 2269

转载 有哪些的隐藏内容的方法(如果同时还要保证屏幕阅读器可用呢?)

1.display:none;的缺陷搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。2. visibility: hidden ;的缺陷这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间3.overflow:hidden;一个比较合理的方法.texthid

2014-12-29 22:39:01 2810

转载 讨论CSS hacks,条件引用或者其他

为了实现浏览器兼,主要有以下几种方式:1、给标记添加包含User Agent的class属性”   这种方式得到的标记可能会是这样的:<html class="ua-wk ua-wk535">2、条件样式表        这种注释的方式只有IE浏览器支持,其他浏览器只会把它当做html注释,不起任何作用。一般使用Javascript或者服务器端程序判断User Ag

2014-12-29 21:43:07 1348

转载 你最喜欢的图片替换方法是什么,你如何选择使用?

对于这个问题既要考虑到用户体验又要考虑到搜索引擎1、1>"image.gif" alt="Image Replacement">1> 首先使用图片;然后给图片添加一个alt值,对搜索引擎友好一些。缺点:对搜索引移开文字擎不友好,搜索引擎对于图片alt属性的权重肯定是低于H1的,就算你的图片是放在H1标签里面。2、移开文字1>Image Replacement1> h1

2014-12-29 09:58:56 3177

转载 解释下 CSS sprites,以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。CSS Sprites为一些大型的网站节约了带宽,让提高了用户的加载速度和用户体验,不

2014-12-28 22:58:47 3303

转载 列举不同的清除浮动的技巧,并指出它们各自适用的使用场景。

http://www.cnblogs.com/yuzhongwusan/archive/2008/06/18/1224383.html1.使用空标签清除浮动  在所有浮动标签后面添加一个空标签 定义css  clear:both.    弊端就是增加了无意义标签。2.使用overflow   包含浮动元素的父标签添加css属性 overflow:auto; zoom:1;

2014-12-28 22:33:51 2763

原创 解释下浮动和它的工作原理

浮动元素不会占据文档流当浮动元素碰到包含它的元素的边框或者其他浮动元素的边框时会停留下来。

2014-12-26 19:00:59 4103

原创 描述下 “reset” CSS 文件的作用和使用它的好处。

重置浏览器的css默认属性;浏览器的品种不一样,那么对默认样式的解释不一样,通过reset可以达到显示一致的效果。

2014-12-26 18:25:23 3960

转载 MIME的理解

MIME的英文全称是"Multipurpose Internet Mail Extensions" 多功能Internet 邮件扩充服务,它是一种多用途网际邮件扩充协议,在1992年最早应用于电子邮件系统,但后来也应用到浏览器。服务器会将他们发送的多媒体数据类型通知给浏览器,而通知的方式就是MIME类型,然后浏览器会根据这个类型分辨是什么类型的文件,然后从进入系统中进行查找,看看哪那个插件可以执行

2014-12-26 18:02:19 600

转载 请描述一下 cookies,sessionStorage 和 localStorage 的区别?

http://handyxuefeng.blog.163.com/blog/static/454521722013111714040259/

2014-12-20 23:02:43 2092

转载 如果把 HTML5 看作做一个开放平台,那它的构建模块有哪些?

, ,,

2014-12-20 22:53:02 2199

转载 data-属性的作用是什么?

HTML5规范里增加了一个自定义data属性.为前端开发者提供自定义的属性,这些属性集可以通过对象的dataset属性获取,不支持该属性的浏览器可以通过 getAttribute方法获取...div.dataset.commentNum; // 10需要注意的是,data-之后的以连字符分割的多个单词组成的属性,获取的时候使用驼峰风格:比如user-list="user_list">d

2014-12-20 22:41:49 12097

转载 如果网页内容需要支持多语言,你会怎么做?在设计和开发多语言网站时,有哪些问题你必须要考虑?

采用统一编码UTF-8方式编码1- 应用字符集的选择;所以对提供了多语言版本的网站来说,Unicode字符集应该是最理想的选择。它是一种双字节编码机制的字符集,不管是东方文字还是西方文字,在Unicode中一律用两个字节来表示,因而至少可以定义65536个不同的字符,几乎可以涵盖世界上目前所有通用的语言的每一种字符。 所以在设计和开发多语言网站时,一定要注意先把非中文页面的字符集定义为“utf

2014-12-20 22:00:46 6721

转载 为什么允许以text/html发送XHTML 1.0文档?

XHTML是一种XML格式。严格地说应该用一个XML相关的媒体类型(meida type)(如application/xhtml+xml、application/xml或text/xml)来发送XHTML。但是XHTML 1.0是经过精心设计的,XHTML文档只要在制作时略加注意便可在传统的HTML用户代理上工作。只需你遵守一些简单的规则,你就可以使许多XHTML 1.0文档能够在传统的浏

2014-12-20 21:50:48 561

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除