优化页面访问速度(四) ——前端优化

优化页面访问速度(四)

——前端优化

(原创内容,转载请注明来源,谢谢)

一、概述

前端的优化,主要可以通过减少HTTP请求、非实时请求改异步、缓存、文件压缩、CDN加速、独立图片服务器等。

二、减少HTTP请求

1、HTTP开销

HTTP请求,需要耗费资源,主要包括域名解析、建立TCP连接、发送请求、等待处理结果、下载资源、解析请求等。

因此,减少HTTP请求,利于优化页面访问速度。

2、图片地图

对于多个图片,如连续的几个按钮,每个按钮都是一个小图片。如果逐个加载图片,则需要发送多个请求,分别获取这些图片文件。

这里,可以将这些图片合并成一张图片,并且用CSS的<map>、<area>来实现定位,针对不同的位置给予不同的点击跳转链接,这样有效减少请求数量。

三、异步请求

对于实时性要求不高的请求,例如记录文章访问量,就可以在进入页面后,加载完毕后,再发送ajax给服务端,进行统计,即可。不需要同步等待,节约时间。

四、缓存

缓存分为浏览器缓存和Nginx层缓存。

1、浏览器

浏览器缓存又分为本地缓存和协商缓存,本地缓存即缓存在浏览器端,协商缓存是缓存在服务端。

1)本地缓存

本地缓存的http状态码是200 from cache,可以在header设置本地缓存,字段是cache-control,参数包括no-store(禁止缓存)、no-cache(禁止本地缓存,允许协商缓存)、max-age=xxx(设置本地缓存的最大时间,单位是秒)。

2)协商缓存

协商缓存的http状态码是304 not modify,浏览器没有命中本地缓存时,或者cache-control字段被设置了no-cache,则浏览器会去服务端请求内容,并在响应头的header中带上参数,if-modified-since表示最后修改时间,if-none-match是文件的指纹(修改后即会有变化)。

服务端会根据参数,判断是否用服务端的协商缓存,并且返回结果给客户端时,会带上响应头参数,Last-modified表示上次请求的时间,ETag表示服务端本次文件的指纹。浏览器会存储这些内容,并在下次请求时发送参数。

2、Nginx

Nginx可以配置缓存时间,首先在location处,匹配需要缓存的内容,例如js、css、jpg、png等,然后再location内部,设置expires = 30d,表示缓存30天。

这样,同样文件名的内容,都会被缓存30天,如果30天内该文件有改动,可以采用带参数的方式避开缓存,例如将xxx.js文件名改为xxx.js?a=1,这样就会跳过本次的缓存,Nginx会缓存该文件。

五、文件压缩

1、minify

Js、css文件,由于都是静态文件,因此可以使用文件压缩,来减少浏览器需要下载的文件大小,以加快响应速度。

文件压缩可以用minify工具,该工具可以将多个js文件压成一个,且会自动把里面的换行、空格等压缩,通常压缩完后文件大小会是原来的40%左右。

2、gzip

除了minify,还可以用gzip,将文件进一步压缩。Gzip压缩文件,采用的原理是Huffman树,将js、css中一些很长且经常使用的变量,用很短的字符来代替,且能保证代替后的内容,具备可还原性。

因此,gzip还会维护一套字典,记录压缩的内容和解压的内容的映射关系。

Gzip压缩后,文件会缩小到30%左右。

压缩有,在Nginx中需要加个配置,在server段,加入gzip on表示开启gzip压缩,另外还有其他几个参数,包括gzip_buffers(即一次发送给客户端的包大小)、gzip_comp_level(压缩级别,越大压的越厉害,但是会消耗CPU)、gzip_min_length(小于这个字节的文件不压缩)、gzip_types(设置需要压缩的文件类型)。

压缩后,刷新浏览器,在开发者模式下,可以看到加载的文件,Content-Encoding:gzip,表示开启压缩成功。

通常,JS、CSS、图片都会需要压缩和缓存,而动态文件通常不能进行这些操作。

六、CDN

1、目的

CDN加速,目的在于加快加载静态文件的速度。

2、原理

CDN,称为内容分发网络,其原理是在网络的各个实际的地点,放置服务器节点,当用户发送请求,经过智能DNS解析,可以根据IP判断地理位置、接入网的运营商类型等,选择路由最短、负载最轻的服务器,进行请求,并且存储该IP。

该服务器中,如果没有需要请求的内容,则会去真正存放代码文件的服务器请求,并且将请求结果进行缓存。后面再有请求发送过来,则直接返回结果。

七、图片服务器

通常,图片服务器需要单独部署,不和代码、数据库、nosql等服务器放在一起。因为图片服务器负载大,请求慢,占用大量的I/O,因此单独建立服务器可以保证不影响到其他服务。

当有多台图片服务器时,可以使用fastDFS工具,来搭建文件系统,管理这些图片服务器。

——written by linhxx 2018.04.24

原文发布于微信公众号 - 爱思考的coder(phpthinker)

原文发表时间:2018-04-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云计算教程系列

如何在Ubuntu 16.04中安装Linux,Nginx,MySQL,PHP(LNMP堆栈)

LNMP软件堆栈是一组可用于为动态网页和Web应用程序提供服务的软件。它是一个描述带有Nginx Web服务器的Linux操作系统的首字母缩写词。其后端数据存储...

1731
来自专栏PHP在线

Cookie与Session问答

1.Cookie运行在客户端,Session运行在服务器端,对吗?

2105
来自专栏DeveWork

WordPress主题开发:添加主题更新提醒功能

WordPress官方的主题都可以自动更新升级,但如果是个人分享的免费或收费主题的话,通过下面的教程,也可以为你的私人主题添加版本更新提示。这个提示会直接显示在...

2228
来自专栏DeveWork

WordPress主题开发:添加主题更新提醒功能

WordPress官方的主题都可以自动更新升级,但如果是个人分享的免费或收费主题的话,通过下面的教程,也可以为你的私人主题添加版本更新提示。这个提示会直接显示在...

2466
来自专栏Youngxj

144G网页在线制作源码 v1.4

3867
来自专栏小狼的世界

Linux下创建可执行bin安装文件

1、简化操作。一般的软件安装过程,如果想要精简步骤,我们一般会将需要在命令行中输入的命令写成一个脚本,同时将安装介质准备好。我们将脚本和安装介质上传到生产环境,...

1732
来自专栏林欣哲

图解Git合并--Merge和Rebase

项目初始情况 ? Merge fast-forward ? 快速合并,直接把指针指向前去,无冲突要解决。 非 fast-forward ? 保留历史记录,解决冲...

3287
来自专栏实用工具入门教程

如何搭建微信订阅号后台服务

微信公众号后台自带的功能可能有时不能满足我们的需要,这时候我们就需要搭建自己的服务端。本实验带您从零开始,基于 NodeJS 搭建起一个可以支撑微信订阅号自动回...

1.7K4
来自专栏自然语言处理

GitHub简明操作指南

GitHub的是版本控制和协作代码托管平台。它可以让你和其他人的项目从任何地方合作。Git也是目前世界上最先进的分布式版本控制系统(没有之一)。最初编写用作Li...

1042
来自专栏XAI

Nginx+Tomcat+Redis负载均衡Session共享实现超级简单(CentOS6.9系统 Java版本)

第一步Nginx+Tomcat 实现负载均衡的测试  相关软件环境 软件名称 版本号 版本说明 Java 1.7 linux版本 Tomcat 8...

50611

扫码关注云+社区

领取腾讯云代金券