码迷,mamicode.com
首页 > 其他好文 > 详细

对前端页面的优化小计

时间:2014-10-16 00:26:20      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:style   color   使用   文件   sp   div   代码   工作   ad   

做前端也算10来年了,针对Js及页面相关的功能,基本上知道一些优化,现在做一个简单的总结,这是我个人对互联网的一些理解,当然有强人有更好规范,值得我们去学习

1.因为根据浏览器的加载方式不同,尽量不让head中出现js的加载,如果是在head中的话,这样页面会在等待js下载完成后再进行加载

2.在页面元素呈现之前加载所有需要的css,因为页面(差不多所有的浏览器都是加载一部分内容就通过样式表进行渲染,所以当然越早加载越好。

3.俗话说得好,互联网时代字节就是金钱,所以尽量要保持最少的传输量,对于程序级别那自然就是css,及js的压缩了,所以在项目发布时,一定要进行压缩。

4.保持尽量少的js及css文件引用,因为多一个引用,就多一个请求,那怕请求的文件内容很少,多一次不如少一次,当然非互联网项目,这些可能可以不用考虑,毕竟一个web系统在牛X的机器上面跑着,也没有几个人用,是体现不出来的。

5.当然就是现在的DNS预加载处理了,DNS Prefetch 因为本人做的项目资源基本上都是同一域名,而且现在的访问不太,没有使用,不做评价,但是有很多网站访问量很大的,都采用了,所以我们当然,可以相信,还是有好处的。

6。当然就是div+css的方式显示页面了,用div+css方式显示页面,不是因为我们有多爱他,而是因为如果是table方式的话,两种写法的加载方式不同,div是局部加载,如果配上1,2点的话,页面的显示效果更好了。

7.就是针对图片的显示处理Baseline JPEG和Progressive JPEG,这个需要js的支持,或者专门的代码来实现,简单说明一下,我们大多数的图片处理都是basline方式的就是图片是一行一行的加载的,而Progressive jpeg就是我们平时看到的很我外国网站上面实现在的开始模糊慢慢清晰的图片,效果有在google搜索下有很多对比,大家都知道progress jpeg显示效果好,但是我们一般针对图片都是用c的像素级别来处理以保证图片处理的速度及效果,我没有找到开源的,所以在此不讨论该实现,当然用C#比较好实现progressive jpeg,谁叫C#不是什么服务器都可以用呢,所以就是采用js来针对baseline的图像做预处理,就是说在要显示图片的地方先用一个加载的样式,占位,用js new Image(),指向你要显示的图片,待图片加载完成后,在原来要显示图片的位置,显示出加载完成的图片。

8.其它的一些常用的优化,属于程序员经常要考虑的,比方法,减少算法的运行次数,减少内存中对像的数量等,在写代码时,尤其是前端代码一定要注意。

希望这些简单的总结,对我们的工作带来益处。



对前端页面的优化小计

标签:style   color   使用   文件   sp   div   代码   工作   ad   

原文地址:http://blog.csdn.net/fibona/article/details/40119055

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!