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).
(2).
我们可这样写:
3. 使用” lazyload” (懒加载),网上有很多这样的教程。
我在此只说明”懒加载”的使用情况时,当你的页面有很多图片的时候,但是每次展示一两张,只有在下拉 或 点击时,才显示后面的图片。 就用懒加载
二、 在css 方面,优化见解。
- 我们还可以通过把采用“精灵图“(sprites)技术,把页面常用的图片如logo,icon等图片合成在一张图片上,到时候再使用css绝对定位。这样可以减少图片的http请求。
- 通用法则:”减少http请求“,合理规划css样式文件的数量和大小。达到加载性能最优。
三、 在html 方面,优化见解
- 把<script>标签放在紧靠body 的闭合标签的</body>标签的上面。 因为,代码是自上而下执行的。把js的引用放在下面,这是页面会展示已经加载的元素(比起浏览器展示空白页面,这样要强一些)
四、 静态资源路径,使用CDN资源路径。