对前端页面的优化小计

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

1.由于依据浏览器的载入方式不同。尽量不让head中出现js的载入。假设是在head中的话，这样页面会在等待js下载完毕后再进行载入

2.在页面元素呈现之前载入全部须要的css，由于页面（几乎相同全部的浏览器都是载入一部分内容就通过样式表进行渲染，所以当然越早载入越好。

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

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

5.当然就是如今的DNS预载入处理了，DNS Prefetch 由于本人做的项目资源基本上都是同一域名，并且如今的訪问不太。没有使用，不做评价，可是有非常多站点訪问量非常大的。都採用了。所以我们当然，能够相信，还是有优点的。

６。当然就是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#不是什么server都能够用呢，所以就是採用js来针对baseline的图像做预处理。就是说在要显示图片的地方先用一个载入的样式，占位，用js　new Image()，指向你要显示的图片。待图片载入完毕后。在原来要显示图片的位置，显示出载入完毕的图片。

8.其他的一些经常使用的优化。属于程序猿经常要考虑的。例如法。降低算法的执行次数。降低内存中对像的数量等，在写代码时，尤其是前端代码一定要注意。

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