现在位置首页 / 前端开发 /正文

网页打开慢,真是框架的事情吗?

作者: IT小兵 | 2013年6月16日| 热度:℃ | 评论: |参与:

      现在确实是一个宽带的时代了,用户体验又像是产品经理手里的尚方宝剑似地。动不动的就那在UI设计者头上悬着,搞不好就掉下来。

包括UI,样式 ,框架啊。心态就是越新越好,越高级越好。最后,项目上线了,慢了,维护都不好维护了,开始找框架的问题,要缓存,

要精简,甚至推到重来都是常事了。牢骚少发,事情多做....

image


     我们一开始都是一样的,空白。总以为做出来,展示出来给用户就是可以的。慢慢要求用户体验,UI华丽了,用户看着就高兴了。

但是使用中,不是靠面子就过好下面的日子了。

   再后来,用到js的时候,就会找一些开源的,或者共享的代码( [jquery ajax使用及跨域访问解决办法] ),贴进来,顶多是改改相关的代码就用上了。后来就把js文件放在web的最后面,

都觉得这样是那么神秘。

     近几周的一个项目,也遇到类似的问题。加载速度慢,数据处理交给客户端(这可能是web架构的问题了),js文件大,冗余代码过多(项目人员

变化快了,就是这样的问题。)。

image

     通过讨论,从以下几个方面进行优化:


1.js加载,压缩
使用的js库文件、自定义js文件通过js压缩工具,压缩后部署;
js文件加载优化:

1.按照需要的业务逻辑,现在加载必须的js文件,如:获取数据和前几页图片的js。在处理完图片显示后,加载支持滑动、支持分享、支持添加到快捷方式的js文件。

下面是动态加载js的代码。


  1. window.onload = function() {  

  2.    setTimeout(function(){    

  3.        // reference to <head>  

  4.        var head = document.getElementsByTagName('head')[0];  

  5.  

  6.        // a new CSS  

  7.        var css = document.createElement('link');  

  8.        css.type = "text/css";  

  9.        css.rel = "stylesheet";  

  10.        css.href = "new.css";    

  11.        // a new JS  

  12.        var js = document.createElement("script");  

  13.        js.type = "text/javascript";  

  14.        js.src = "new.js";    

  15.        // preload JS and CSS  

  16.        head.appendChild(css);  

  17.        head.appendChild(js);    

  18.        // preload image  

  19.        new Image().src = "new.png";  

  20.  

  21.    }, 1000);  

  22. };  

<script language="javascript" type="text/javascript">
       function include(script_filename) {
           document.write('<' + 'script');
           document.write(' language="javascript"');
           document.write(' type="text/javascript"');
           document.write(' src="' + script_filename + '">');
           document.write('</' + 'script' + '>');
       }

       var which_script = '1.js';
       include(which_script);
       </script>

题外话:

Google的官方文档中很清楚的说明,如果在html中过多的使用JavaScript、Cookie、会话 ID、框架、DHTML 或 Flash 等复杂功能,可能会使搜索引擎抓取工具在抓取网站时会遇到问题。

实在需要使用JavaScript的部分,将这部分JavaScript脚本放在一个或几个.js文件中,这样能够避免干扰到搜索引擎的抓取和分析。
实在不能放在.js文件中的部分JavaScript脚本,将它们放在html代码的底端之前,这样使搜索引擎分析网页时最后才会发现它,降低对搜索引擎的干扰。

[Http请求状态及jquery ajax请求异常处理]

2.图片加载逻辑优化:

 延迟加载:
按需加载图片。如:加载首页图片,在加载首页 图片完成后,继续加载第二页。等滑到第二页时,加载第3 4 页图片。
加载一定像素:
请求图片地址,统一由 图片处理服务 进行返回图片。比如:
首页显示,一张大图,下面3张小图。
请求方式:getimg(500,300,src),getimg(100,80,src2)
由图片处理服务 判断原始图片像素,并返回相应适合手机显示的图片,减少下载流量。

这里推荐一个jquery的懒加载插件。

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.

在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.

这里有几个可用的 demo 页面提供给那些匆忙的人参考: 基本选项, 淡入展示效果, script 脚本缺失的降级处理, 水平滚动, 容器内水平滚动, 容器内垂直滚动, 页面内存在超多图片, 延时加载图片


3.减少http请求

  一次请求能够实现的逻辑,不要再次请求http服务器。每次请求http服务器的性能消耗,不能光看服务器的处理,还要考虑http请求建立的消耗。比如:我们这次减少一次http请求,减少了100ms。


4.Html控件组织:

用到js就用到dom组件的创建,我们都知道,DOM操作的效率是很低的,而且不是一般的慢,而且这也是引发性能问题的常见问题之一。为什么会慢呢?因为对DOM的修改为影响网页的用户界面,重绘页面是一项昂贵的操作。太多的DOM操作会导致一系列的重绘操作,为了确保执行结果的准确性,所有的修改操作是按顺序同步执行的。我们称这个过程叫做回流(reflow),同时这也是最昂贵的浏览器操作之一。回流操作主要会发生在几种情况下:

  • * 当对DOM节点执行新增或者删除操作时。

  • * 动态设置一个样式时(比如element.style.width="10px")。

  • * 当获取一个必须经过计算的尺寸值时,比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值(在兼容DOM的浏览器中,可以通过getComputedStyle函数获取;在IE中,可以通过currentStyle属性获取)。

解决问题的关键,就是限制通过DOM操作所引发回流的次数。大部分浏览器都不会在JavaScript的执行过程中更新DOM。相应的,这些浏览器将对对DOM的操作放进一个队列,并在JavaScript脚本执行完毕以后按顺序一次执行完毕。也就是说,在JavaScript执行的过程中,用户不能和浏览器进行互动,直到一个回流操作被执行。( 失控脚本对话框 会触发回流操作,因为他执行了一个中止JavaScript执行的操作,此时会对用户界面进行更新)

如果要减少由于DOM修改带来的回流操作,有两个基本的方法。第一个就是在对当前DOM进行操作之前,尽可能多的做一些准备工作。一个经典的例子就是向document对象中添加很多DOM节点:

for (var i=0; i < items.length; i++){
   var item = document.createElement("li");
   item.appendChild(document.createTextNode("Option " + i);
   list.appendChild(item);
}

这段代码的效率是很低的,因为他在每次循环中都会修改当前DOM结构。为了提高性能,我们需要将这个次数降到最低,对于这个案例来说,最好的办法是建立一个文档碎片(document fragment),作为那些已创建元素元素的临时容器,最后一次将容器的内容直接添加到父节点中:

var fragment = document.createDocumentFragment();
for (var i=0; i < items.length; i++){
   var item = document.createElement("li");
   item.appendChild(document.createTextNode("Option " + i);
   fragment.appendChild(item);
}
list.appendChild(fragment);

经过调整的代码,只会修改一次当前DOM的结构,就在最后一行,而在这之前,我们用文档碎片来保存那些中间结果。因为文档碎片没有任何可见内容,所以这类修改不会触发回流操作。实际上,文档碎片也不能被添加到DOM中,我们需要将它作为参数传给appendChild函数,而实际上添加的不是文档碎片本身,而是它下面的所有子元素。


html的优化效果是非常明显。以前需要1-2秒呈现的数据,现在能控制在1s左右呈现了。


总结:

1.每个项目优化是必须的。但是优化不是说推到重来,而是重构,即使最后发现大部分都变更了,但是也不是重新打地基再来。

2.每个细节都是重要的。你自以为完全没有问题的地方,也可能是你开发的时候,就心安理得的写出来的冗余代码。

3.多用百度、google搜索相关的问题。你遇到的问题,可能别人早已经做的很好。不要自己再做一个轮子。比如:懒加载的jquery插件。



点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询