最近的文章列表

前端开发面试题(很有料)

前端面试题,不仅仅是应付面试用的,通过一份好的前端面试题,可以全方面的考察自己是否是一个合格的前端开发人员,本文末尾有部分答案的链接。

目录

  1. 常见问题
  2. HTML 相关问题
  3. CSS 相关问题
  4. ...
2013/12/2 Comments:
移动Web前端优化总结

手机开发火了很久了,各种app玲琅满目,一直开发pc web版的前端人员,怎么转到移动开发上呢?wap站?好老了,现代浏览器,很大的特点是:webkit内核, 支持html5,css3,国内主流的手机浏览器UC、海豚等,因此pc转移动,也就是要会html5、css3,自然js、html4、css2也是必须的。

高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额外关注对用户基站网络流量使用的情况,设备耗电量的情况。

...

2013/11/30 Comments:
缓存多个DataURI资源 摆脱CSS Sprites图片背景位置的约束

随着html5的广泛应用,为图片链接使用datauri,似乎是一个时髦,有人说,这是为了减少图片的请求数,但是datauri文件增大0.1k; 而且每次都需要解码,消耗cpu;这让手机的芯片情何以堪,为此我们可以考虑缓存这些datauri

在Html5中,可以将图片经过base64编码后直接写在HTML中来展示图片,使用这种方式可以减少Http请求数量,从而可加快页面展示,同时也减少了很多对服务器的压力。

    例: <img src="data:image/png;base64,iVBORw0KGgooCAMAAAC7...(此处略去N个字)...lFTkSuQmCC"/> 

...
2013/11/29 Comments:
网站前端性能优化总结

摘要:网站优化的方面:

一、服务器侧优化(包括:添加 Expires 或 Cache-Control 信息头、压缩内容、设置Etags等)  

二、Cookie优化(包括:减小Cookie体积、对于页面内容使用无coockie域名等)

三、JAVASCRIPT 和 CSS 优化(包括:把 CSS 放到代码页上端、避免 CSS 表达式、从页面中剥离 JavaScript 与 CSS、精简 JavaScript 与 CSS、使用 <link> 而不是 @importChoose <link> over @import、避免使用CSS Filter、JS尽量放到页面最下端、页面展现尽量交给CSS完成等)

...

2013/11/27 Comments:
清空Chrome/IE/FF浏览器dns缓存

为什么要使用浏览器DNS缓存,无非就是提供域名的解析速度(因为直接ip是代表主机的,域名只是ip的马甲,拖了马甲才能睡觉~)

什么是DNS?简而言之是从域名(www.camnpr.com)解析为IP(116.255.161.231)的过程,详情可移步 wikipedia

...

2013/11/27 Comments:
浏览器DNS缓存机制分析-为什么修改hosts不立即生效

经常做Web开发的工程师,都会遇到需要将某个域名绑定到特定IP上,进行测试的情况。大家一般都会用修改hosts文件的方式来解决,但是经常也会遇到修改hosts不生效的情况,而且有时生效,有时不生效的情况也有发生,这到底是为什么呢?


起:DNS缓存机制

关于DNS缓存的机制,有一篇非常详细的文章What really happens when you navigate to a URL

...

2013/11/27 Comments:
[性能]前端单点故障(SPOF)

什么是前端单点故障?

简单理解,即因为某个静态资源(js,css,@font-face自定义字体)加载失败或者阻塞请求,导致页面主体非正常渲染.

出现的症状:页面空白

HTML文档已经加载完毕,但其他资源例如(CSS,JS,字体文件)等加载出现了阻塞,导致页面空白等待的时间。

出现的最主要原因:第三方资源

前端SPOF最频繁出现的原因是第三方内容,如果主站成功返回HTML文档,从主站返回的其他相关资源应该都成功返回,但第三方内容往往不是由主站控制,因此会出现不可预期的错误,所以一个网站的第三方资源不应该在主站资源之前被加载,这将有可能引起前端SPOF。

...
2013/8/28 Comments:
细说JavaScript Source Map (sourceURL / sourceMappingURL)

简单的说,SourceMap是为了压缩后的代码的调试提供方便。 比如:你在项目中引用了jquery.min.js(压缩后的代码),当有个js错误,我们通过控制台显示是第一行出差了,然而第一行有上万个字符,但是,浏览器的错误提示就是在第一行错了,晕,鬼知道第一行哪里错了,这种错误提示就是无意义的了。 纵使,你费了九牛二虎之力,找到错误端,比如:

getJSON:function(e,t,n){return b.get(e,t,n,"json")}
...
2013/8/20 Comments:
[UE]图片由模糊到清晰的渐进式JPEG

我们在看QQ空间里的图片时,都会注意到,先看到模糊的一个轮廓,然后是清楚的图片。(前提:图片很大或者网速有点慢)这对于我们来说(起码是我),是比较容易接受的显示方式,总比显示不出来图片,或者,显示一条图片,要好的多。那么,这是怎么实现的呢?

原来JPEG文件有两种保存方式他们分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式)。两种格式有相同尺寸以及图像数据,他们的扩展名也是相同的,唯一的区别是二者显示的方式不同。

Baseline JPEG

...

2013/8/8 Comments:
[优化]innerHTML和appendChild哪个性能更高

var html = '<div>dom</div>', body.innerHTML=html;var div = document.createElement('div'), txt = document.createTextNode('dom'); div.appendChild(txt); 哪种方式好?

关于代码的优化,有时候要针对不同的浏览器。 上边innerHTML和appendChild哪个好呢?
...

2013/7/15 Comments: