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

网页的加载速度是评估网站质量一个重要指标。原因在于大多数用户能够容忍的网页加载时间只有几秒,如果超出了访客的忍受范围他们会毫不留情地关掉你的网 页,所以网页载入速度会极大地影响网站的流量和访问。以下总结了几种可以明显提高网站加载速度的初步简单技巧方式,如果你的网站存在载入速度慢的问题不妨 与此为参考对网页做些初步优化。

  • 网页加载提速之 – 优化网页图片文件

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

  • 网页加载提速之 – 图片使用height和width属性

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

  • 网页加载提速之 – CSS文件压缩瘦身

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

  • 网页加载提速之 – 目录地址后加上斜杠(/)

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

  • 网页加载提速之 – 整合CSS、JS文件减少HTTP请求次数

现在的网页都有多个图片、CSS外部文件链接、Javascript外部脚本链接。所以当访问一个网页时浏览器需要多次向服务器请求这些文件。在请求和加 载之间会产生不少的时间差。特别是一些网页上有多个小图片、图标按钮的网页,有多少图片,浏览器就需要请求多少将这些小文件,多将请求这些小图片文件将明 显影响网页的加载速度。所以我们应该尽可能将小图片拼合一个PNG大图片上,然后通过坐标来显示图标。一次请求一个大图片比多次请求小图片速度要快不少。 同样,最好将CSS和Javascript尽可能地整合到一个文件中都有助于加快网页载入速度。
写在最后,这里只提到了一些简单的初级皮毛,因为这些是最容易做的优化方式。下一步我们还需要考虑网页代码(php或aspx)是否优化高效、服务器的响 应速度、服务器带宽是否够用等等更深层的因素。但如果将上面几点做到位,相信网页加速速度会提高不少。所以如果你有更多经验请在讨论区留言分享给大家吧。

时间: 2024-12-16 06:38:28

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

【前端开发】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要多,并

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

原文链接 1.减少页面请求: 从WEB运行原理上讲,IIS请求是无状态的,在服务器端一直是连接和关闭的不断进行着,如果能减少服务器请求,总的时间将会减少. 之前我下载163邮箱的登陆页面的图片时发现,它们的只用到了一个图片来完成整个页面的所有图片,当时我就纳闷了,这跟平时做的网站不一样呀.然来这样做减少浏览器的请求次数,用httpwatch你会发现请求的总时间大大减少了.同样的想法,在做css样式,JavaScript代码的时候也要做到尽可能的放在一个文件下来减少WEB请求. 2.页面压缩技术,

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

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

如何提高网页加载速度

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

4月6日学习笔记——css设置网页打印样式

有三种方法 1. 为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css: <link rel="stylesheet" href="css/noprint.css" media="screen" />  用于打印的css:<link rel="stylesheet" href="css/print.css" media="print" />

2016年7月19日学习笔记

2016年7月19日学习笔记 计算机系统的组成部分 计算机系统由硬件系统和软件系统两大部分组成 硬件系统 冯.诺依曼体系结构: 1946年数学家冯.诺依曼提出运算器,控制器,存储器,输入设备,输出设备. 具体变现为一下硬件: 运算器,控制器  ------>  CPU 存储器          ------>  内存(断电数据清空),硬盘(可永久存储数据) 输入设备------>  键盘,鼠标等 输出设备------>  显示器 打印机等 软件系统 OS : Operating S

2014年7月17日学习笔记--PHP的循环结构学习

今天重新开始学习PHP, 为了学习PHP买了书,但书是一本大部头的书,不好带一直没有好好学习,我决定把书拆了分章来看,这样也方便带 也可以很快完成任务. 今天在linux mint 17上安装了lnmp 环境 和brackets工具,来学PHP,小的例子用vim来完成的. 记录一下自己美化的九九乘法表 代码如下: <?php     for($i=1;$i<=9;$i++){         for($j=1;$j<=9;$j++){             if($i>=$j){

2016年7月21日学习笔记

2016年7月21日学习笔记 Linux安装以后出现的文件目录的作用: 文件系统的类型 LINUX有四种基本文件系统类型:普通文件.目录文件.连接文件和特殊文件,可用file命令来识别. 普通文件:如文本文件.C语言元代码.SHELL脚本.二进制的可执行文件等,可用cat.less.more.vi.emacs来察看内容,用mv来改名. 目录文件:包括文件名.子目录名及其指针.它是LINUX储存文件名的唯一地方,可用ls列出目录文件. 连接文件:是指向同一索引节点的那些目录条目.用ls来查看是,连