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等格式。
相关推荐
让你的网站不仅拥有专业的外观,还能提供快速的加载速度和优秀的用户体验。 高度可定制 — 这份源码易于修改和扩展,让你随心所欲地定制功能和样式,无需担心技术难题。 SEO优化结构 — 良好的SEO结构让你的网站更...
让你的网站不仅拥有专业的外观,还能提供快速的加载速度和优秀的用户体验。 高度可定制 — 这份源码易于修改和扩展,让你随心所欲地定制功能和样式,无需担心技术难题。 SEO优化结构 — 良好的SEO结构让你的网站更...
让你的网站不仅拥有专业的外观,还能提供快速的加载速度和优秀的用户体验。 高度可定制 — 这份源码易于修改和扩展,让你随心所欲地定制功能和样式,无需担心技术难题。 SEO优化结构 — 良好的SEO结构让你的网站更...
让你的网站不仅拥有专业的外观,还能提供快速的加载速度和优秀的用户体验。 高度可定制 — 这份源码易于修改和扩展,让你随心所欲地定制功能和样式,无需担心技术难题。 SEO优化结构 — 良好的SEO结构让你的网站更...
让你的网站不仅拥有专业的外观,还能提供快速的加载速度和优秀的用户体验。 高度可定制 — 这份源码易于修改和扩展,让你随心所欲地定制功能和样式,无需担心技术难题。 SEO优化结构 — 良好的SEO结构让你的网站更...
让你的网站不仅拥有专业的外观,还能提供快速的加载速度和优秀的用户体验。 高度可定制 — 这份源码易于修改和扩展,让你随心所欲地定制功能和样式,无需担心技术难题。 SEO优化结构 — 良好的SEO结构让你的网站更...
让你的网站不仅拥有专业的外观,还能提供快速的加载速度和优秀的用户体验。 高度可定制 — 这份源码易于修改和扩展,让你随心所欲地定制功能和样式,无需担心技术难题。 SEO优化结构 — 良好的SEO结构让你的网站更...
让你的网站不仅拥有专业的外观,还能提供快速的加载速度和优秀的用户体验。 高度可定制 — 这份源码易于修改和扩展,让你随心所欲地定制功能和样式,无需担心技术难题。 SEO优化结构 — 良好的SEO结构让你的网站更...
一键清理和修复解决方案;专业的电脑修复专家模式;皮肤更换;在线云数据库等等。 Cloud System Booster Pro 功能: 1、系统清理功能。各种浏览器产生的cookies、系统产生的垃圾、注册表碎片、ie缓存、windows历史、...
主要面向大中型行业搜索引擎、地方搜索引擎、专类信息搜索引擎等应用领域设计的专业全文检索产品,为用户提供海量数据全文检索应用的理想解决方案。 K风网页搜索V2.2版本主要改进:改进索引系统读写性能,提高约10...
主要面向大中型行业搜索引擎、地方搜索引擎、专类信息搜索引擎等应用领域设计的专业全文检索产品,为用户提供海量数据全文检索应用的理想解决方案。 K风网页搜索V2.2版本主要改进:改进索引系统读写性能,提高约10...
这是我对下面给出的挑战的解决方案。 我所指的页面托管在这里: : 测试页面: : 使用 Chrome Dev Tools 完成 FPS 分析为了在移动和桌面设备上获得超过 90 的页面速度得分(根据谷歌的页面速度洞察),对主页 (index....
1.介绍 现在很多的网站上都会用到大量的图片,而图片是网页传输中占主要的数据量,也是影响网站性能的...2, 能够专门对图片服务器进行优化-为图片服务设置有针对性的缓存方案,减少带宽成本,提高访问速度。 3, 提高
解决方案,直接取通用属性,无需二次解析,速度更快 原:json.取成员 (0).取通用属性 (“Id”) 新:json.取通用属性 (“[0].Id”) 2.完善“网页_取域名” 将原来的3.50的和3.51重写的加强版合并 3.修复“系统_取...
想要设计更快的网页优化速度,我们可以借鉴成功的优化经验,全球最大的CDN服务商Akamai(阿卡迈)针对移动体验的问题,提供了一套较为完整的解决方案,感兴趣的读者可以前往注册下载;与此同时,我们也可以采用直接...
它覆盖了移动端网页交互体验优化的很多不同方面的实际解决方案,用来优化你的网页运行速度。注意不是让你的站点运行的有多快,而是让你的用户感觉有多快。当下在移动端构建一个优秀的网站逐渐变得越来越简单。无论是...
全书以问题为导向,精选了前端开发中的34个疑难问题,从分析问题的原因入手,逐步给出解决方案,并分析各种方案的优劣,最后针对每个问题总结出高效编程的最佳实践和各种性能优化的方法。全书共7章,内容从逻辑上...
◆ 兼容各种型号手机及浏览器统一解决方案,从可视化开发环境到部署发布一键完成 ◆ 前后台代码统一集成化设计,前后台代码全部统一采用JavascriptV8,开发者无需使用多种编程语言进行前后台设计 ◆ 高度集成化的...
解决网页恶意代码方案 解决忘记账户密码问题 解决文件保护方法 解决无法打开文件夹 解决无法关机问题 解决无法升级更新 解决无法自动保存设置 解决系统声音不正常 解决系统托盘区的图标丢失 解决系统无法...
免费、开源SV-CART网店系统是一项新的专业开放源代码的WEB2.0网上商城系统,是一套集网上购物和网站内容管理于一体的电子商务解决方案。易操作、多功能SV-CART系统注重操作上的便捷易用与功能上的强大完善,您只需轻...