前端开发优化总结

发现的一篇关于前端优化的文章,总结的很全面,要做到面面俱到很难,往往是想优化而没有时间去优化,就像我们公司,一个项目连着一个项目~新员工的培训都省了,还想优化前端啊,不过我真的想有机会和老大好好的整合下公司网站的前端代码~不过要把前端优化的工作放在平时的写代码中去,就不需要刻意的后期优化了。在项目开发中,后台需要搭建好框架,前端更是需要搭建好框架,并且在页面实现中得到实现,只有这样才能事半功倍。

前段时间简单的研究了下前端优化相关的知识,本文算是一个阶段性的总结,或者当做一个优化的参考List。

前言

前端是庞大的,包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,前端优化的目的是什么?

  1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。
  2. 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。
    总之,恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。

前端优化的途径有很多,按粒度大致可以分为两类,第一类是页面级别的优化,例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等;第二类则是代码级别的优化,例如Javascript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等等。另外,本着提高投入产出比的目的,后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。

一、页面级优化

关于jQuery ready()方法一些用法解释

jQuery的ready方法的是开发中经常用到的,作用相当于我们的body onload,是当页面DOM准备就绪的时候才运行的代码,最常用的就是在DOM渲染加载之前,先给document绑定ready事件,然后当页面DOM都准备好之后才运行这个事件。
关于jQuery的ready有以下几种用法

最常用也是最标准的ready方法

$(document).ready(){
});

简写的jQuery ready()

$(function(){
});

这是因为jQuery的选择器第一个参数假如为空,那么默认的是document

JS的Image对象可用于检测图片类型是否合法

项目中假如碰到了上传图片文件时,需要在后台加检测程序,判断图片类型是否合法,以防止一些非法的文件上传,如果对js的Image对象比较熟悉我们可以使用下面的方法在前端层次上检查下图片类型是否合法。


       var img = new Image();
        img.onload = function(){
            alert('load');
        };
        img.onerror = function(){
            alert('error');
        };
        img.src = 'logo.png';

onbeforeunload与a标签在IE中的冲突bug

onbeforeunload 是window的一个事件,目前Firefox,IE都支持,主要用来提示用户是否真的要离开该页面,通常在一些比较重要的数据提交之前,防止用户误操作导致数据丢失。典型的应用如gmail中,在写邮件的时候,如果刷新页面或者关闭页面,会出现提示。

但是在IE下点击一些a标签时,也会触发onbeforeunload事件。并且href中写javascript:void(0)也不行,而在Firefox中不会出现类似的情况。于是查资料对onbeforeunload事件重新认识了一下:

a标签触发事件的顺序

onclick、onbeforeunload跟href三者之间的先后运行关系是这样的:onclick > onbeforeunload > href,知道了这个道理,我们就可以通过一些方法阻止onbeforeunload。另外在IE浏览器中,假如href为#,那么也不会触发onbeforeunload事件。

解决IE6背景图片不缓存的BUG

IE6在背景图片缓存上有一个bug:它会每次都从服务器端读取背景图片。例如我们使用a:hover更换背景图片,在IE6下会出现每次鼠标滑过则重新向服务器请求图片,如果服务器反应较慢,那么hover效果就会出现短暂的空白,令人极度不爽。虽然可以通过CSS sprites的方式解决问题的,但效果差强人意。

示例:
a{ background:url(normal.gif); } a:hover { background:url(hover.gif); }
如果为超级链接定义上述的css样式以实现鼠标悬浮时的动态效果,在firefox下是没有什么问题的,第一次加载之后,浏览器都会从缓存读取背景图片.

解决方法

具体的解决方法就是在页面中加入一段简单的javascript脚本,告诉IE6:本地有背景图片的话就不要麻烦服务器了。 document.execCommand("BackgroundImageCache",false,true);

关于这段脚本的放置方式有两种:

前端开发常见图片格式详解

前端开发设计,打交道最多的就是图片啦~今天就来个图片格式讲解,也许一些围绕你的问题可以在这篇文章中找到答案

Gif格式图片的特点

透明性

Gif是一种布尔透明类型,既它可以是全透明,也可以是全不透明,但是它并没有半透明(alpha 透明)。

动画

Gif这种格式支持动画。

无损耗性

Gif是一种无损耗的图像格式,这也意味着你可以对gif图片做任何操作也不会使 得图像质量产生损耗。

水平扫描

Gif是使用了一种叫作LZW的算法进行压缩的,当压缩gif的过程中,像素是由上到下水平压缩的,这也意味着同等条件下,横向的gif图片比竖向的gif图片更加小。例如50010的图片比10500的图片更加小

间隔渐进显示

Gif支持可选择性的间隔渐进显示

由以上特点看出只有256种颜色的gif图片不适合照片,但它适合对颜色要求不高的图形(比如说图标,图表等),它并不是最优的选择,我们会在后面中看到png是最优的选择。

Img,Script,Link等标签为空可导致页面多余请求

把页面中的img,script,link等标签为空链可以导致页面多余请求的问题,包括IE,Firefox,chrome,Safari!但是相对于img,script跟link的src、href为空时,在IE下不做请求,而Chrome, Safari, 和 Firefox则会出现一次多余的新请求。下面详细讲解一下:

img src为空的情况分析

无论是在html中写入<img src='' />还是在js中通过Image对象建立var img = new Image(); img.src = "";,都会导致向你的服务器多做一次请求。而具体请求的情况分析如下:

  1. 在IE中,这样做会请求一次当前页面所在的目录。如在http://js8.in/demo/a.html 中出现这种空src的标签,会导致重新请求一次:http://js8.in/demo/
  2. 在Safari 和 Chrome中,将请求当前页面本身。
  3. 在Firefox 3.5以前的版本中,有和Safari同样的问题,但是在3.5中修正了这个BUG。
  4. 在Opera 中,不会做额外的请求。

解决IE6 select z-index无效,遮挡div的bug

在最近的一个项目中,遇到了IE6 select遮挡div的bug,为了解决这个bug我查了很多资料,试图找到一个最最有效的方法,很多人是通过iframe的方法来解决,其实我查了国外的很多资料也是通过iframe的方法来解决的。今天我说说iframe解决的一般方法,已经使用jQuery插件bgiframe解决IE6 select z-index无效,遮挡div的bug。

解决方法之一:Iframe包裹select元素

使用iframe包住select,这样iframe有z-index,只要在div上设置的z-index比iframe的高即可~这种方法有一定的局限性,不可能每个select都要加个iframe吧?所以不推荐!代码如下:

<iframe style="z-index:1;position: absolute; ">
<!-- 用iframe 解决此bug -->     
            <select name="country">                    
                 <option value="1">china</option>     
                <option value="2">japanese</option>     
                <option value="1">U.S.A</option>     
             </select>     
</iframe>  

解决方法之二:以Iframe作为div的子元素,覆盖select元素

建立一个跟div同宽同高的iframe,并且z-index比div要低。这种方法推荐使用:

jQuery弹出框插件wBox 1.0正式发布

jQuery插件wBox 1.0正式发布——经过一系列的wBox需求分析,进行了wBox的代码重构,去除了一些鸡肋的功能~根据公司项目的需要进行了功能的调整,并且在界面上进行了美化处理~

wBox截图

查看wBox代码实例wBox1.0下载

wBox新功能及其变化

  1. 优化代码~
  2. 美化界面~
  3. 默认可拖动,drag为false关闭
  4. 新增wBox关闭方法:wBox.close()
  5. 新增wBox打开方法:wBox.showBox()
  6. 新增wBox定时关闭设置:通过参数timeout设置定时关闭时间
  7. 新增在不触发click事件的前提,显示wBox,$(s).wBox({show:true})
  8. 去除灯箱功能(准备做一个单独的jQuery灯箱插件)
  9. 去除设置窗口位置

jQuery插件wBox准备更新

随着断桥残雪写的jQuery插件wBox的用户越来越多,越来越多的人提出了wbox的需求,可是我最近比较忙,没有时间改写wBox,正好公司的一个新项目要采用wBox,提出了很多要求,我准备在接下来的一些时间中更新下wBox,并且解决IE6下的一些布局上的bug、添加一些新的功能,大家敬请期待吧~
嘻嘻~

wBox粗糙的主页