优化网页速度的7种办法

9q13nh

来人人都是制品经理【起点学院】，BAT实战派制品总监手把手系统带你学制品、学运营。

周末连续两天给大众讲了面向对象编程的重点特性「封装」和「继承」，倘若你期待今天继续讲「多态」这个特性，可能你要失望了，今天并无「多态」，而是教你怎样优化网页加载速度，我便是这么不按规矩出牌，哈哈。

周末在家宅着，刷了不少的网页，发掘非常多网站都无优化它的加载速度，有时打开一个网页要等待10来秒才可加载完成，虽然网页内容很不错，然则给我的第1印象便是慢，不可忍啊！

其实有非常多简单粗暴，又特别有疗效的优化办法，我觉得有必要给各位制品经理分享一下，好让你们去督催研发哥哥优化，改善一下网页的加载体验～

首要，咱们来看下网页的加载流程。打开一个网页，会先拉取一个html页面，而后浏览器解析了这个html页面后，会按照页面的内容，去拉取javascript、css和照片文件，最后按照这些文件，将页面渲染出来。

咱们能够看到，影响一个网页展示速度的重点原因不是网页本身，而是它依赖的有些其它文件。倘若优化了这些资源的加载速度，那样网页展示的速度亦就上去了。

有那些简单粗暴的办法呢？让我来一一列举：

1.优化照片资源的格式和体积

一个网页中，照片资源的体积占比是最多的，况且单个的文件的体积亦很可观。因此呢，在保准照片质量不变的状况下，尽可能的运用高压缩率的照片格式，照片格式能够根据这个优先级选取webp > jpeg > png > bmp。同期亦要按照照片展示尺寸来拉取体积最为匹配的照片资源，不要没事就把原图拉下来运用。以前我就遇到过这种状况，一个196*196体积区域展示的照片，它的文件竟然达到了几兆，最后才发掘把1960*1960分辨率的原图拉下来了。

2.开启网络压缩

大部分浏览器在发出请求时，会带上这个标记「Accept-Encoding: gzip, deflate」，暗示这个浏览器能够接受以gzip压缩方式传输数据，倘若你的网页服务器亦支持gzip压缩数据，那样数据以gzip方式传输时，会减少70～80%的流量。

3.运用浏览器缓存

同一个站点下面的区别页面，常常都会复用一部分资源文件，倘若把这些资源文件设置为可缓存的，那样在刷新或转到另一个页面时，都无须再从网络拉取关联资源，这般就大大加快了网页的加载速度。

4.减少重定向请求

有的网站针对区别的终端制作了区别的页面，例如说在手机上拜访博客，会从weibo.com重定向至weibo.cn，每一次重定向都会引起浏览器重新发起请求，延长加载时间。针对这种状况，应该尽可能运用响应式设计，一个weibo.com站点覆盖至所有终端。

5.运用CDN存储静态资源

CDN是一种静态内容分发网络，它在每一个省，乃至每一个城市都安排有自己的服务器，用于分发这些静态内容，那样当某个城市的用户要拉取某个资源时，他会首选从本地的CDN服务器上拉取，这般能够保准他最快速的得到该资源。据砖家统计，网络资源中有70%的是静态资源。这就寓意着，有70%的内容产生后是不会变化，那样将它们所有放在CDN上面，能够提高这70%的资源的下载速度。

6.减少DNS查找次数

非常多人爱好把区别的照片挂在区别当域名下，例如说照片A挂在a.pm-teacher.com，照片B挂在b.pm-teacher.com。当一个网页同期运用照片A和照片B时，浏览器需要查找两个域名，要晓得，每次解析域名都是会浪费时间的，因此尽可能的将所有照片放在一个域名下。

7.压缩css和js内容

这儿说的压缩和第2点并不重复，上面说到的压缩是不改变文件内容的压缩。而css和js中有海量的空格和变量命名（如hello="hello word";），倘若将这些空格去除，并用简单的字母来代换变量名（如a="hello word";），那样这些css和js原文件的体积亦会缩小，这般亦对加快拉取速度是有帮忙的。

不晓得你有无看出来，上面说到的优化方法的核心就3点：减少请求数、减少资源体积、找最快的服务器。倘若你是一个网站的制品经理，快去找你们的研发确认是不是有做过类似的优化吧。

#专栏作家#

给制品经理讲技术，微X公众号（pm_teacher），人人都是制品经理专栏作家。资深程序猿，专注客户端研发若干年，对前端、后台技术略懂，热衷于对新的科技行业的探索。