web前端页面优化——个人见解

web前端页面优化，我们从JavaScript、css、html这3个方面说下，我的见解，希望大神们能有刚好优化方法，一起探讨。

一、  有关javascript方面 优化见解。

　1. 首先举个例子：下载1个 100KB 的js文件，要比4个 25KB的js文件快。　

　　   因此，我们得出了一个结论：

　　　　”那就是减少http 请求js的数量“，

　　　但是问题来了，我们又不能把所有的js放在一起，因为当加载一个巨形的js文件，会导致我们的页面卡停（没有加载完引入的js时，页面不会再次执行）

　　　所以，我们引入了 Requirejs. 

　　　Requirejs的优点: 1. 实现js文件的异步加载，避免网页失去响应; 2. 管理模块之间的依赖性，便于代码的编写和维护。（有关requirejs的案例网上很多，在此就不说使用方法了）

　2.   合并请求js的http链接

　　　例如当我请求2个存放位置在同意目录下的js。

　　　（1）. http://www.test/test/js/jquery-1.9.1.js

　　　（2）. http://www.test/test/js/tool.js

　　　 我们可这样写：　

　　　  http://www.test/test/js/??jquery-1.9.1.js,tool.js　

 

　3.  使用” lazyload” (懒加载),网上有很多这样的教程。

　　我在此只说明”懒加载”的使用情况时，当你的页面有很多图片的时候，但是每次展示一两张，只有在下拉 或 点击时，才显示后面的图片。 就用懒加载

　　　

二、 在css 方面，优化见解。

1. 我们还可以通过把采用“精灵图“(sprites)技术,把页面常用的图片如logo,icon等图片合成在一张图片上，到时候再使用css绝对定位。这样可以减少图片的http请求。
2. 通用法则：”减少http请求“，合理规划css样式文件的数量和大小。达到加载性能最优。

三、 在html 方面，优化见解

1. 把<script>标签放在紧靠body 的闭合标签的</body>标签的上面。 因为，代码是自上而下执行的。把js的引用放在下面，这是页面会展示已经加载的元素（比起浏览器展示空白页面，这样要强一些）

四、 静态资源路径，使用CDN资源路径。

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有