网站重构之加快网页加载速度

简介: 现在的网络越来越发达,什么样的网站都已经出现了,日新月异的今天网页加载的速度已经是一个面临急切危机的事。提高网页打开速度当然也有方法的,分别是加大宽带,对电脑做优化工作,还有就是在制作网页的时候做好相应的优化,听起来也难,其实不然。

现在的网络越来越发达,什么样的网站都已经出现了,日新月异的今天网页加载的速度已经是一个面临急切危机的事。提高网页打开速度当然也有方法的,分别是加大宽带,对电脑做优化工作,还有就是在制作网页的时候做好相应的优化,听起来也难,其实不然。我们只要做到以下的几点就差不多可以提高一些速度了。

  图片的优化:

  谈到图片优化的问题我想网页设计工作者应该是很清楚的,尽量把图片切割的越小打开的速度越快吧,还有降低图像的质量,使用恰当的格式,减去没有必要存在的图片(想颜色单一的地方用颜色代码代替就可以了)。

  css优化:

  css的诞生无疑是现金网络的救星,他让网页加载更高效,浏览体验也相应得到了提高,从而代替了表格。当然如果你对css不太了解的话也会产生大量的垃圾代码,从而拖慢速度。

  例如:

  padding-top:10px;

  padding-right:20px;

  padding-bottom:10px;

  padding-left:20px;

  看看优化后的代码是什么样的:

  padding:10px 20px;

  是不是一下子就少了很多代码了啊^_^

  网址后加斜杠的优化:

  比如www.admincss.com/404,当服务器得到这个请求之后,他要花时间去确定这个地址的文件类型,加入404是一个目录的话,就可以在后面加一斜杠,变成www.admincss.com/404/,服务器也能看的明白了。

  标注清晰的图片高度和宽度:

  我知道很多网页工作者都对这点做的不太理想,以后加跟不加都一个样。其实不然,如果没有清楚的写出height和width的话浏览器就会把整个图片下载下来计算一下,图片多的话浏览器就要不断的调整页面,可想而知速度会怎么样。下面提供一段比较友好的图片代码:

  <img id="admincss" height="200" width="500" src="http://www.admincss.com/admincss.png" alt="admincss" />

  此代码的确是非常适合搜索的胃口,当浏览器得到高度和宽度之后,即使图片无法显示,页面上也会空出一个空位来,然后继续加载下面的内容,这样体验也好了速度也上去了。

  减少http的请求:

  不要在网站上放置过多http请求的东西(图像,脚本等等),每个对象都会延迟加载。减少请求的方法:

  (1)减少不必要的对象

  (2)将附近的两张图片合成一张

  (3)合并相应的css

  <link rel="stylesheet" type="text/css" href="/body.css" />
  <link rel="stylesheet" type="text/css" href="/side.css" />
  <link rel="stylesheet" type="text/css" href="/footer.css" />

  合成一个后:

  <link rel="stylesheet" type="text/css" href="/style.css" />

  总结:以上总结了一些加快网页速度的技巧,去除不必要的加载项;如果要嵌入了其它网站的widget,如果有选择余地,一定要选择速度快的;尽量使用图片来代替flash;能静态化的尽量静态化;统计的代码要放在页尾

目录
相关文章
|
Swift iOS开发 Perl
如何解决Swift混编的module编译错误
前言很多iOS工程都是基于Object-C开发,再逐步向Swift演进,演进过程中不可避免要进行Swift混编。Swift模块需要支持LLVM Module规范,混编工程会遇到各种Module编译错误。这对于不熟悉的同学来说简直是灾难,严重影响开发效率。本文会介绍常见的Module编译错误,希望对大家有所帮助。常见错误1:Could not build module xxx当一个OC模块引用了Sw
7516 1
如何解决Swift混编的module编译错误
|
数据采集 测试技术
Selenium与WebDriver:Errno 8 Exec格式错误的多种解决方案
本文讨论了在使用Selenium和WebDriver自动化测试时常见的执行格式错误(Errno 8 Exec format error)问题。错误通常发生在运行ChromeDriver时,与兼容性或路径配置有关。文章提供了多种解决方案,包括手动更改路径、更新或重新安装webdriver-manager包、下载特定版本的ChromeDriver、修改driver_cache.py文件。此外,还介绍了如何结合代理IP技术使用Selenium进行网页抓取,以提高效率和成功率。示例代码展示了如何配置代理IP并使用Selenium访问网站。通过这些方法,用户可以有效解决执行格式错误,并提高网页自动化测试
1289 1
Selenium与WebDriver:Errno 8 Exec格式错误的多种解决方案
|
10月前
|
数据采集 存储 自然语言处理
魔搭社区每周速递(12.22-12.28)
魔搭ModelScope本期社区进展:1039个模型,128个数据集,63个创新应用,6篇内容。
241 4
|
Ubuntu
vscode配置clang-format自动格式化代码
vscode配置clang-format自动格式化代码
2597 0
|
12月前
|
开发者 Docker 微服务
利用Docker Compose优化微服务架构
在微服务架构中,Docker Compose提供了一种简便有效的方法来定义和运行多容器Docker应用程序,通过YAML文件配置服务、网络和卷,实现一键创建和启动。这不仅确保了开发、测试和生产环境的一致性,还简化了团队协作和维护工作,大幅提升了开发效率。本文将详细介绍Doker Compose的核心优势、基本使用方法及高级功能,帮助你更好地管理和优化微服务架构。
|
12月前
|
缓存 安全 搜索推荐
google hacking字符
google hacking字符
|
API 开发者
淘宝店铺订单接口丨淘宝店铺订单交易接口技术文档
淘宝店铺订单接口丨淘宝店铺订单交易接口技术文档
|
缓存 算法 安全
Linux内存管理宏观篇(五)物理内存:页面分配和释放页面
Linux内存管理宏观篇(五)物理内存:页面分配和释放页面
659 1
|
前端开发 UED 开发者
【前端秘籍】掌握 display: none 与 visibility: hidden 的奥秘,让你的网页设计更上一层楼!
【8月更文挑战第23天】在Web前端开发中,常需控制元素的可见性。本文详细对比了两种主流CSS隐藏方法:`display: none`和`visibility: hidden`。`display: none`彻底移除元素在页面布局中的位置,适用于无需保留空间的隐藏场景;而`visibility: hidden`仅使元素视觉上消失,仍保留其布局位置,适用于需要动画效果或保留布局结构的情况。通过具体示例展示了两种方法的实际应用,帮助开发者根据项目需求选择最合适的方式,提升用户体验。
344 0