【代码优化】如何提高网页加载速度

原文链接

1、减少页面请求:

从WEB运行原理上讲,IIS请求是无状态的,在服务器端一直是连接和关闭的不断进行着,如果能减少服务器请求,总的时间将会减少。

之前我下载163邮箱的登陆页面的图片时发现,它们的只用到了一个图片来完成整个页面的所有图片,当时我就纳闷了,这跟平时做的网站不一样呀。然来这样做减少浏览器的请求次数,用httpwatch你会发现请求的总时间大大减少了。同样的想法,在做css样式,JavaScript代码的时候也要做到尽可能的放在一个文件下来减少WEB请求。

2、页面压缩技术,给我们js,HTML代码进行瘦身。

 jQuery 作为JS最轻量级的类库,它的原类库是242KB,压缩后的它竟只有91.6KB。     常见的压缩工具有Google Closure Compiler、YUI Compressor、JsPacker、gzip。我常用的是gzip,因为它的压缩率是最高的。用jdk压缩后它会把一些空格去掉,把我们很长的变量名换成换成很短的字母来代替。

3、样式、行为、结构分离。

当第一次访问页面的时候,用户就可以把CSS,JS代码下载下来,这样做虽然第一次使网页加载的速度变慢了,但后面的页面将快很多。当用户访问这个网站的其它的页面时,由于其它页面也引用了这个CSS样式和JS代码。浏览器发现它已经下载好了,下一次就可以不用下载了。这样就做到了一次下载,后续速度的效果。

4、使用存储过程

在运行存储过程前,数据库已对其进行了语法和句法分析,并给出了优化执行方案。这种已经编译好的过程可极大地改善SQL语句的性能。由于执行SQL语句的大部分工作已经完成,所以存储过程能以极快的速度执行。这种预编译的sql语句就可以直接执行而节省了很大一部分查询的时间。

5、一些细节:

把CSS样式放在头部,如果JS很多的话,把js代码放在尾部。这样做可以尽可能的先加载页面的DOM结构,然后才可以级用户体验。如果JS很多的大的话,页面都没加载完,何来用户体验之说呢。

6、适当的使用AJAX

现在的Ajax好像有点被神话了,好像网页只要Ajax了,那么就不存在效率问题了。其实这是一种误解。拙劣的使用Ajax不会让你的网页效率更高,反而会降低你的网页效率。Ajax的确是个好东西,但是请不要过分的神话它。使用Ajax的时候也要考虑上面的那些准则。

7、尽量少使用样式工具为我们生成的页面样式代码,自己动手把样式写在样式文件里。尽量写得通用些。

8、页面缓存

在大型的门户网站都用到了缓存技术,它是以空间换时间的技术。

缓存主要是为了提高数据的读取速度。因为服务器和应用客户端之间存在着流量的瓶颈,所以读取大容量数据时,使用缓存来直接为客户端服务,可以减少客户端与服务器端的数据交互,从而大大提高二次页面的访问速度的程序的效率。

9、配置网站的实体标签:

 这个Etag不是给用户用的,而是给浏览器缓存用的。Etag是服务器告诉浏览器缓存,缓存中的内容是否已经发生变化的一种机制。通过Etag,浏览器就可以知道现在的缓存中的内容是不是最新的,需不需要重新从服务器上重新下载。

10、使用CDN技术。

我们上网下载东西的时候经常会看见什么“南方服务器”、“北方服务器”的就是用到了CDN技术来提高下载速度与稳定性。

CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度(来自百度百科)。

11.使用Gzip压缩文档:

 GZIP编码是用来改进网页性能的方法,不仅可以减小存储空间,还可以减少传输所需的时间。将网站中的文件使用Gzip压缩后,可以显著的增加网页加载速度,同时也可以降低网站的带宽流量消耗。

12.样式表文件放在外部调用:

 把页面中需要用到的javascript和CSS样式表文件放在另外的文件夹中,这样一来在打开网站其它页面时就会缓存这些调用的文件,从而加快网站页面的加载速度。

13.给javascript文件减肥:

 这个方法不同于gzip压缩功能,缩小JavaScript文档有很多方法,比如去除不必要的空格等其他标签等。减少脚本文件后可以显著的提高网页的访问速度。

14.图片使用height和width属性

 每个图片的height和width属性可以让浏览器在加载图片之前就知道图片的长和宽,并预留出指定的长宽待图片加载后显示。如果没有这两个属性,浏览器还需要在读取图片成功后再处理一次页面布局样式,这无疑减慢了网页加载速度。所以在固定图片大小的情况下最好都使用上长和宽属性。

15.CSS文件压缩瘦身

DIV+CSS是现在流利的网页布局方式,DIV定义了元素,CSS控制显示效果。所以往往我们会把CSS写到另外一个或多个外部链接CSS文件中,并且CSS文件代码也有很多行。我们可以使用一些CSS压缩工具来删除CSS文件中不必要的多余内容,如重复定义样式、空格等来瘦身。可以尝试使用一下CleanCSS工具来压缩你的CSS文件。

16.整合CSS、JS文件减少HTTP请求次数

  现在的网页都有多个图片、CSS外部文件链接、Javascript外部脚本链接。所以当访问一个网页时浏览器需要多次向服务器请求这些文件。在请求和加载之间会产生不少的时间差。特别是一些网页上有多个小图片、图标按钮的网页,有多少图片,浏览器就需要请求多少将这些小文件,多将请求这些小图片文件将明显影响网页的加载速度。所以我们应该尽可能将小图片拼合一个PNG大图片上,然后通过坐标来显示图标。一次请求一个大图片比多次请求小图片速度要快不少。同样,最好将CSS和Javascript尽可能地整合到一个文件中都有助于加快网页载入速度。

17.目录地址后加上斜杠(/)

  如访客点击访问这样一个目录地址:http://www.zhen.com/dajiaguifan,去打开这个目录下的index.html文档。当服务器收到请求后它需要消耗一些时间来分析这是一个文件还是一个目录。但是如果我们在最后加上一个斜杠(/),服务器就知道你是在访问一个目录地址,然后就直接加载默认文档index.html或index.PHP就行了。这样服务器就不用花时间来分析这个地址,也起到了一定加速的作用。

原文链接

时间: 2024-11-05 13:39:43

【代码优化】如何提高网页加载速度的相关文章

【前端开发】25种提高网页加载速度的方法和技巧

尊重原创:http://blog.csdn.net/wxzking/article/details/4089384 您希望加快网页的加载速度吗?了解如何通过缩短加载时间来改善拨号上网用户的浏览体验,在某些情形下,加载时间最多可缩短 80%.下面介绍二十五中网速方法和技巧. 一.使用良好的结构 可扩展 HTML (XHTML) 具有许多优势,但是其缺点也很明显.XHTML 可能使您的页面更加符合标准,但是它大量使用标记(强制性的 <start> 和 <end> 标记),这意味着浏览器

如何提高网页加载速度(二)

优化网页图片文件你的网页一定有图片,加载一个网页往往图片的总尺寸是最大的,特别是那些颜色丰富的背景图片和大副广告图片.所以一般要在同等图片质量的情况下要尽可能地 减小图片尺寸.在Photoshop中我们可以用保存为Web图片的选项试一下.图片也有几种常用的文件格式.如JPEG一般是用来存储照片或全彩色图片 的,比如照片.屏幕截图等.GIF图片格式的颜色要比JPEG少,适合做小图,如制作按钮.Logo等,另外GIF支持动态效果.PNG跟GIF比较相 似,但它的尺寸较大,支持的颜色也比GIF要多,并

4月6日学习笔记——如何提高网页加载速度(前端面试考点)

网页的加载速度是评估网站质量一个重要指标.原因在于大多数用户能够容忍的网页加载时间只有几秒,如果超出了访客的忍受范围他们会毫不留情地关掉你的网 页,所以网页载入速度会极大地影响网站的流量和访问.以下总结了几种可以明显提高网站加载速度的初步简单技巧方式,如果你的网站存在载入速度慢的问题不妨 与此为参考对网页做些初步优化. 网页加载提速之 – 优化网页图片文件 你的网页一定有图片,加载一个网页往往图片的总尺寸是最大的,特别是那些颜色丰富的背景图片和大副广告图片.所以一般要在同等图片质量的情况下要尽可

如何提高网页加载速度(一)

今天手机看漫画  连着wifi速度卡成汪,无奈至极. 正好自己学前端,有提高加载速度的内容的内容,不过只是提及,还没有正式学到,自己在网上查了看看,分享一下. 优化网页图片文件 图片使用height和width属性 CSS文件压缩瘦身 目录地址后加上斜杠(/) 整合CSS.JS文件减少HTTP请求次数 减少数据库调用 JS文件放在HTML代码最后 CSS或者JS代码要合并 采用CSS Sprite(CSS精灵)方式处理背景图片 减少对服务器的文件请求

如何提高网页加载速度

一.Img:设置图片宽高,可以让浏览器在加载图片之前就知道图片的宽高.否则,读取图片后还需要重新处理一遍页面布局:改变图片文件格式,如png>gif>jepg 二.使用外链方式,css在header,js在body后.可以对css.js等进行整合压缩,提高加载速度 三.目录地址后加上/:因为服务器收到请求后要辨别将加载目录还是文件,加上/后就知道要加载的目录

如何通过预加载器提升网页加载速度

预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措.Mozilla 官方发布数据,通过预加载器技术网页的加载性能提升了19%,Chrome测试了 Alexa 排名前2000名网站,性能有20%的提升. 它并不是一门新技术,有人认为只有 Chrome 才具备这个功能.也有人认为它是有史以来提升浏览器性能最有效的方法.如果你第一次接触预加载器,也许心中已经有了无数个问号.什么是预加载器?它是如何提升浏览器性能的? 首先需要了解浏览器是如何加载网页的 一个网页的加载依赖于脚本文件.CS

提高网站加载速度的3项黄金守则

如何优化网页加载速度是每个前端开发工程师需要了解的,也是前端开发工程师需要具备的基本条件. 优化网站加载速度的原理主要是减少网站文件的大小,减少HTTP请求数.网站文件越小,浏览器加载页面会比较轻松,打开页面的速度也会提升:一个HTTP请求,对页面打开速度造成的延时大概是0.01秒,HTTP的请求数越多,网站打开的速度就会越慢. 那么如何减少网站文件的大小,减少HTTP请求数呢?笔者做前端(重构方向)有2年多了,这里分享3项优化网站加载速度的方法,希望能给有需要的同学以及刚接触前端的初学者带来帮

网页加载速度优化4--图片懒加载

当前网页设计理念主要以大气简洁主流(文艺小清新网站例外).更多的信息用图片来展示. 由于图片都是高清,所以会影响到网页加载速度.这里我们就用到图片的懒加载(延迟加载)功能. 最快速解决方案:jquery lazyload插件. Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加

优化网页加载速度

1.提高网站加载速度的3项黄金守则 http://www.cnblogs.com/yiwd/archive/2013/06/06/3121606.html