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

2018-06-24 01:45:48来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:走近webpack(1)--多入口及devServer的使用

下一篇:基于Three.js的360度全景--photo-sphere-viewer--简介