`
wangemperor
  • 浏览: 39745 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

优化网页速度的解决方案

 
阅读更多

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等格式。


分享到:
评论

相关推荐

    前端性能优化:掌握解决方案.zip

    本资源"前端性能优化:掌握解决方案.zip"提供了一种系统性学习和实践前端性能优化的方法。下面,我们将详细探讨这个主题,涵盖多个关键知识点。 首先,前端性能优化的基础在于理解网页加载流程。当用户访问一个页面...

    藏经阁-移动网页加速的通用解决方案探讨和实践.pdf

    藏经阁-移动网页加速的通用解决方案探讨和实践 移动网页加速是当前互联网行业的热门话题,许多大型互联网公司如Facebook、...我们的解决方案可以解决移动网页加速的核心问题,提高移动网页的加载速度和用户体验。

    SEO优化解决方案网站优化

    以下是对SEO优化解决方案的详细说明: 1. **网站修改与调整**:优化的第一步是对网站进行全面检查和修改,包括但不限于:优化网页标题、元描述和关键词;确保网站内容高质量、原创且具有相关性;改善网站结构,使...

    Riverbed广域网优化应用解决方案

    Riverbed的广域网优化应用解决方案是针对企业面临的一个核心挑战——如何在广域网上高效运行各种关键业务应用。随着全球化和远程工作的发展,企业必须确保其员工无论身处何处,都能快速、稳定地访问文件共享、电子...

    网页爬虫解决方案.docx

    综上所述,网页爬虫解决方案需要结合分词技术、数据存储策略、关键字段的精确提取、性能优化以及分布式计算框架,如Hadoop,来构建高效、稳定且适应性强的爬虫系统。同时,热词词库和分词引擎的运用将进一步提升信息...

    藏经阁-移动网页加速的通用解决方案探讨和实践__52.pdf

    通过了解移动网页加速的重要性和挑战性,我们可以更好地理解移动网页加速的技术手段和解决方案,并提高移动网页的加载速度和用户体验。 知识点: 1. 移动网页加速的重要性:移动网页加速可以提高用户体验,提高...

    网页爬虫解决方案.pdf

    网页爬虫解决方案主要关注如何高效、准确地抓取和处理大量网络数据,尤其在面对复杂的文本结构和性能要求时。以下是对标题和描述中涉及的知识点的详细说明: 1. **分词处理**:在处理复杂型文本时,尤其是中文文本...

    IE问题解决补丁优化程序+加快网页的浏览速度.解决ie卡死等问题

    标题中的“IE问题解决补丁优化程序+加快网页的浏览速度....总的来说,这个“IE问题解决补丁优化程序”旨在提供一个全面的解决方案,以改善用户在使用IE浏览器时的体验,使其运行更加顺畅,减少卡死和性能问题。

    LTE网页浏览优良率优化实践案例.pdf

    优化网页浏览优良率是通信运营商持续改进网络性能的关键任务之一。本案例主要针对LTE网络环境下,如何通过开启TCP ACK分裂功能来提升网页浏览的优良率。 **一、问题描述** 在客户感知的网络质量评价体系中,网页...

    数据流量优化及带宽管理解决方案.ppt

    总结来说,这个数据流量优化及带宽管理解决方案集成了流量分析、带宽管理、安全防护、用户认证、行为审计等多种功能,旨在解决网络中的流量不均、带宽浪费、安全风险等问题,为企业和运营商提供了一个全面优化网络...

    配件物流解决方案配件物流解决方案

    在客户收益方面,配件物流解决方案提供了全面的功能设计,覆盖了企业管理的多个关键环节,如库存控制、订单处理、物流追踪等,从而优化了整体运营效率。通过数据同步,可以有效避免因人为因素导致的数据错误和冗余,...

    软件优化(速度问题)

    - **解决方案**:将一些频繁使用的动态库转换为静态库,或将多个相关的动态库合并为一个更大的动态库,以减少加载次数和提高加载效率。 ##### 3. Release版本与Debug版本的区别 - **Debug版本**:包含大量的调试...

    精通CSS高级Web标准解决方案PDF扫描高清版

    《精通CSS:高级Web标准解决方案》是一本专为前端开发者深度探索CSS技术的权威指南,由英国的三位知名Web开发专家尼尔·巴德(Nigel Bardsley)、克里斯·科利森(Chris Collison)和加雷斯·莫尔(Gareth Moore)...

    VMware服务器虚拟化解决方案.doc

    VMware服务器虚拟化解决方案是一种高效、经济且灵活的IT基础设施优化方法,旨在解决企业在扩展运算能力时遇到的挑战。随着企业的发展,IT部门需要频繁增加服务器以满足不断变化的操作环境需求,这导致了服务器数量的...

    B2B现存的两大问题及其解决方案

    【标题】:“B2B现存的两大问题及其解决方案” 【描述】:本内容主要探讨了B2B电子商务领域面临的问题及对应的解决策略,包括网站搜索引擎优化问题和电子支付的挑战。 【标签】:“RT RT RT” 【部分内容】: ...

    大数据的解决方案

    标题中的“大数据的解决方案”指的是在处理海量数据时所采用的技术和策略,这些数据超出了传统数据库管理系统的能力范围。大数据通常具有高容量、高速度和多样性等特征,因此需要特殊的工具和技术来采集、存储、管理...

    性能优化思路

    因此,优化设计应结合实际需求,寻找性价比最高的解决方案,避免过度设计。 数据库优化是许多系统性能提升的关键。这包括建立正确的主键、外键和索引,实现读写分离,业务数据分离,以及选择合适的隔离级别以降低锁...

    如何优化浏览器-这篇解决方案文件提供有关用户如何优化Internet浏览器,使之更好的让Windows Live Hotmail工作的信息。

    本篇解决方案文件提供了针对Internet Explorer 6、7和8的优化指南,旨在确保这些浏览器能更好地运行Windows Live Hotmail。以下是优化浏览器的具体步骤和相关知识点: 1. **清理缓存与Cookies**: - 缓存存储了...

Global site tag (gtag.js) - Google Analytics