优化网页速度的解决方案(转载)

1. 网页速度优化

  网站的加载速度是很多web工程师都面临的问题,易龙天网认为:对于一个网站来说,加快网站访问速度不但提高了用户体验,而且对于SEO也有很大的影响。网页的加载速度快了,搜索引擎蜘蛛抓取的页面也就多了,从而增加了收录、增长了流量。那么在网页速度优化方面应该从哪些方面入手?

  1) 尽可能的减少页面中的dom元素,清除网页中一些冗余的代码。如果需要的化,我们可以把代码中的注释去掉,甚至空行空格之类的也去掉。这样可以加快浏览器的加载速度和渲染速度。

  2) CSS Sprites,可以把网站中一些比较通用的图片进行合并,然后利用CSS背景定位技术来调用图片的不同部分,这样可以大大的减少HTTP的请求。

  3) 为图片指定宽度与高度,为每一个图片都指定一个width属性与height属性,浏览器会预先留出既定的位置,图片下边的代码可以继续加载而不用等待。

  4) 优化图片的大小,将每一张图片都保存成web所用格式,并将质量优化到50-65之间。色彩丰富的图片使用jpg格式,色彩单一的图片使用gif格式,需要设置透明度的图片使用png格式。

  5) 使用浏览器缓存,为一些不经常变化的文件设置一个相对较长的过期时间,留在缓存中的文件就不用再向服务器发出HTTP请求了,这样减少了浏览器向服务器发出的HTTP请求数。

  6) 在服务器端启用GZIP压缩,当启用了GZIP后,网站服务器向客户端传输数据之前,是经过压缩了的,从而减小了浏览器的负载量。

  7) 将css样式表放在html页面头部进行预加载,尽量不要在样式中使用css表达式。

  8) 将js代码放在html页面底部最后加载。

  9) 尽量不要再html页面中插入iframe。

  2. 网页加载及渲染

  2.1. 网页加载顺序

  1) IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。

  2) 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)

  3) 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载,阻塞加载。

  4) 当引用了JS的时候,浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建。

  5) 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。

  6) JS、CSS中如有重定义,后定义函数将覆盖前定义函数DOM树的情况,所以 就会阻塞其他的下载和呈现。

  2.2. html页面加载解析流程

  1) 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;

  2) 浏览器开始载入html代码,发现标签内有一个标签引用外部CSS文件;

  3) 浏览器又发出CSS文件的请求,服务器返回这个CSS文件;

  4) 浏览器继续载入html中部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;

  5) 浏览器在代码中发现一个标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;

  6) 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;

  7) 浏览器发现了一个包含一行Javascript代码的标签,赶快运行它;

  8) Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个

(style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码;

  9) 终于等到了的到来,浏览器泪流满面……

  10) 等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下标签的CSS路径;

  11) 浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。

  3. 网页速度优化工具

  3.1. firefox插件firebug

  1) Firebug 是网页浏览器 Mozilla Firefox 下的一款开发类插件。

  2) 它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力助手。

  3) Firebug从各个不同的角度剖析Web页面内部的细节层面,可以监控请求头、响应头、显示资源加载瀑布图,给Web开发者带来很大的便利。

  3.2. yahoo开发工具yslow

  1) 安装YSlow必须首先先安装 Firebug。

  2) YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。

  3) YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会列出具体的修改意见。

  3.3. page speed

  1) Page Speed 是开源 Firefox/Firebug 插件。

  2) Page Speed 对网站的网络服务器配置和前端代码执行若干测试。这些测试基于一组已知可增强网页性能的最佳实践。

  3) 在网页上运行 Page Speed 的网站管理员会获得一组针对各网页的分数,以及有关如何改善网页性能的有用建议。

  3.4. httpwatch

  1) HttpWatch是强大的网页数据分析工具。

  2) 它是集成在Internet Explorer工具栏。

  3) HttpWatch 是一款能够收集并显示页页深层的信息。它能够在显示网页同时显示网页请求和回应的日志信息。甚至可以显示浏览器缓存和IE之间的交换信息。

  4) 每一个HTTP记录都可以详细的分析其 Cookies、消息头、字符查询等信息。支持HTTPS及分析报告输出为XML、CSV等格式。

时间: 2024-10-25 23:45:27

优化网页速度的解决方案(转载)的相关文章

优化网页速度的7种方法

为什么网站优化要把网页静态化? SEO优化过程中,把动态网页转化为静态页面是许多SEO优化人员常常做的事情,面对这种SEO优化操作的行为很多人可能有疑问,那就是为什么网站优化要把网页静态化?下面就给大家详细的介绍一下关于网页静态化的一些问题. 什么是动态页面?什么是静态页面? 动态网页:是以.asp..jsp..php..perl..cgi等形式为后缀,并且在动态网页网址中有一个标志性的符号——“?”.动态页面是以ASP.PHP.JSP.Perl.或CGI等编程语言制作的,用上面两个指标基本上可

如何有效的优化网页的加载速度?优化网页速度的7种方法

首先,我们来看下网页的加载流程.打开一个网页,会先拉取一个html页面,然后浏览器解析了这个html页面后,会根据页面的内容,去拉取javascript.css和图片文件,最终根据这些文件,将页面渲染出来. 我们可以看到,影响一个网页展示速度的主要因素不是网页本身,而是它依赖的一些其它文件,如果优化了这些资源的加载速度,那么网页展示的速度也就上去了. 让我来一一列举: 1.优化图片资源的格式和大小 一个网页中,图片资源的大小占比是最多的,而且单个的文件的大小也很可观.因此,在保证图片质量不变的情

转:网页速度优化一览

原地址:http://phpstudy.net/b.php/43006.html 相信互联网已经越来越成为人们生活中不可或缺的一部分.ajax,flex等等富客户端的应用使得人们越加"幸福"地体验着许多原先只能在C/S实现的功能.比如Google机会已经把最基本的office应用都搬到了互联网上.当然便利的同时毫无疑问的也使页面的速度越来越慢.自己是做前端开发的,在性能方面,根据yahoo的调查,后台只占5%,而前端高达95%之多,其中有88%的东西是可以优化的. 以上是一张web2.

搜索引擎优化(SEO)解决方案

  搜索引擎优化(SEO)解决方案 在此之前,希望大家能重新审视搜索引擎,通俗来讲就是我们日常所用的百度.谷歌.搜狗.雅虎等.磨刀不误砍柴工,知己知彼,百战不殆! 一.搜索引擎是什么? 搜索引擎(Search Engine)是指根据一定的策略.运用特定的计算机程序从互联网上搜集信息,在对信息进行组织和处理后,为用户提供检索服务,将用户检索相关的信息展示给用户的系统.搜索引擎包括全文索引.目录索引.元搜索引擎.垂直搜索引擎.集合式搜索引擎.门户搜索引擎与免费链接列表等. 二.搜索引擎如何工作? 第

毫秒必争,前端网页性能最佳实践--转载

转载,原文地址:http://www.cnblogs.com/developersupport/p/webpage-performance-best-practices.html#httprequest 你愿意为打开一个网页等待多长时间?我一秒也不愿意等.但是事实上大多数网站在响应速度方面都让人失望.现在越来越多的人开始建立自己的网站,博客,你的网页响应速度如何呢?在这篇文章中我们来介绍一下提高网页性能的最佳实践,以及相应的问题解决方案,让站长或者即将要成为站长的朋友了解如何去测试和提高网站响应

Tomcat 7优化前及优化后的性能对比(转载)

一.运行环境 CPU: Intel(R) Pentium(R) [email protected]  : 内存:4G,装的是32位win7,只认出3G,没有花时间去整ramdisk之类的东西: 操作系统:win7 32位: JDK:1.7.0_55 Tomcat:7.0.53 大家不要笑,公司电脑,就给配这样的,慢的要死,悲剧! 下面所有测试都是基于1000个请求做的,且都是访问Tomcat默认的ROOT首页 二.未调优前 并发用户数从10-1000挨个测试,测试结果如下: 从上面的测试结果来看

搜索引擎优化网页设计:最佳实践

作为一名网页设计师,网页的设计是我们一个最直观的辨认.我们现在的生活依赖于网络,依赖于这个快速让我们互知和沟通的工 具.它早已不仅仅是一个静态的页面,而是一个有思想有文化无国界的一个内容涵盖量丰富的另一个世界.比如洞穴人的壁画.比如古埃及的形象文字,而现代人有 网页设计,是的,它非常重要. 那么,我要问,我们如何才能把一个信息准确快速的传达给他人?这时,我们就需要做SEO. 什么是SEO? SEO代表搜索引擎优化.它可以帮助和改善你的网站排名.我们知道,搜索者75%的人都只会看google第一页

Visual Studio 使用 Parallel Builds Monitor 插件迅速找出编译速度慢的瓶颈,优化编译速度

原文:Visual Studio 使用 Parallel Builds Monitor 插件迅速找出编译速度慢的瓶颈,优化编译速度 嫌项目编译太慢?不一定是 Visual Studio 的问题,有可能是你项目的引用关系决定这个编译时间真的省不下来. 可是,编译瓶颈在哪里呢?本文介绍 Parallel Builds Monitor 插件,帮助你迅速找出编译瓶颈. 本文内容 下载安装 Parallel Builds Monitor 编译项目 寻找瓶颈 项目依赖瓶颈 CPU 瓶颈 IO 瓶颈 下载安装

SEO优化网页伪静态的生成方式和伪静态的用处

伪静态是什么?伪静态就是动态网页通过重写URL的方法实现去掉动态网页的参数,但在实际的网页目录中并没有必要实现存在重写的页面. 伪静态的生成的2种方式: 1.框架型伪静态,这种是非常简单而且也是非常便于识别的,它的原理比较简单,就是做一个静态的主框架页面,然后把动态的内容链入副框架内,这个单从它的URL就可以看出眉目,如果整个网站的URL都是一样的,那么就一定是框架伪静态的. 2.利用组件把asp的后辍显示为htm,这种方法的原理是有一点难度的,它主要是利用一个组件强制性的把asp文件的后辍显示