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

原文链接: https://www.mk2048.com/blog/blog.php?id=h0jhcahccj2j&title=web%E5%89%8D%E7%AB%AF%E9%A1%B5%E9%9D%A2%E4%BC%98%E5%8C%96%E2%80%94%E2%80%94%E4%B8%AA%E4%BA%BA%E8%A7%81%E8%A7%A3

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资源路径。


更多专业前端知识,请上 【猿2048】www.mk2048.com

猜你喜欢

转载自blog.csdn.net/mabeizui9231/article/details/102744225