前端性能优化(四)01-页面性能优化之优化原则——尽量减少HTTP请求 使用内容传送网络CDN 避免空src或空href值 启用gzip压缩 CSS放顶部,JS放底部 减少DNS查找
前端性能优化(四)01-页面性能优化之优化原则——尽量减少HTTP请求 & 使用内容传送网络CDN & 避免空src或空href值 & 启用gzip压缩 & CSS放顶部,JS放底部& 减少DNS查找
优化原则
1、尽量减少HTTP请求
在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出。
一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行。
而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时,将会频繁的与服务器建立连接,与释放连接,这必定会造成资源的浪费,且每个HTTP请求都会对服务器和浏览器产生性能负担。
网速相同的条件下,下载一个100KB的图片比下载两个50KB的图片要耗费的网络资源更多。所以,请减少HTTP请求。
具体的方法:
组合文件,优化图片,使用sprites设计风格: 将背景图片合并成一个文件,通过
background-image
和background-position
控制显示;确保您的图像不大于它们所需的图像,它们采用正确的文件格式(PNG通常更适用于少于16种颜色的图形,而JPEG通常更适合照片)并且它们是针对Web压缩的。
使用CSS sprites在网站上经常使用的图像创建模板,如按钮和图标。CSS sprites将您的图像组合成一个大图像,一次加载所有(这意味着更少的HTTP请求),然后只显示您想要显示的部分。这意味着您通过不让用户等待加载多个图像来节省加载时间。
有一些在线工具:
- Sprite Cow
- Spritebox
肉联图片,使用
data:URL
方案将图像数据嵌入实际页面中。这可以增加HTML文档的大小。将内嵌图像组合到(缓存的)样式表中是一种减少HTTP请求并避免增加页面大小的方法。简化页面的设计
2、使用内容传送网络CDN
内容分发网络(CDN),也称为内容传送网络,是用于分发传送内容的负载的服务器网络。从本质上讲,您网站的副本存储在多个地理位置不同的数据中心,以便用户可以更快,更可靠地访问您的网站。
对于初创公司和私人网站来说,CDN服务的成本可能过高,但随着您的目标受众变得越来越大并变得更加全球化,CDN对于实现快速响应时间是必要的。
请记住,最终用户响应时间的80-90%用于下载页面中的所有组件:图像,样式表,脚本,Flash等。这是Performance Golden Rule。而不是从重新设计应用程序架构的艰巨任务开始,最好首先分散您的静态内容。这不仅可以大大缩短响应时间,而且由于内容交付网络,它更容易实现。
内容传送网络(CDN)是分布在多个位置的Web服务器的集合,以更有效地向用户传送内容。选择用于向特定用户传送内容的服务器通常基于网络接近度的度量。例如,选择具有最少网络跳数的服务器或具有最快响应时间的服务器。
CDN服务商有很多,这里就不再多说:专门做CDN服务器的蓝讯、网宿、帝联、快网,还有阿里云、腾讯云、华为云等。国外如Akamai Technologies,EdgeCast或level3
除了去购买一些CDN服务商的服务以外,对于大多数开发者,可以使用公共CDN网络上的资源,如以下的方式去使用CDN加速:
<!-- google -->
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"
></script><!-- cdnjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><!-- qiniu cloud -->
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script><!-- other cdn -->
<scriptcrossorigin="anonymous"integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh"src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"
></script>
3、避免空src或者是href值
空的src和href都会导致多余的HTTP请求,虽然不影响加载时间,但是会对服务器产生不必要的流量和压力。浏览器仍然会向服务器发起一个 HTTP 请求:
- IE 向页面所在的目录发送请求
- Safari、Chrome、Firefox 向页面本身发送请求
- Opera 不执行任何操作
空的src的image严重的以至于影响整个网站的用户体验,空 src
产生请求的后果不容小憩:
- 给服务器造成意外的流量负担,尤其时日 PV 较大时;
- 浪费服务器计算资源;
- 可能产生报错。
有两种形式:
HTML形式
<img src=""> <a href=""></a>
JavaScript形式
var img = new Image(); img.src = "";
解决办法:
- 删除空的
src
和href
标签 - 给
a
标签的href
属性,连接到实际的页面:
<a href="#"></a>
<a href="#nogo"></a>
<a href="##"></a>
<a href="###"></a>
<a href="void(0);"></a>
<a href="void(0)"></a>
<a href=";"></a>
<a href=""></a>
- 禁止跳转,添加
cursor:pointer
样式
<style>a{cursor: pointer}
</style>
<a>点击一</a>
<a onclick="doSomething()">点击二</a>
- 给
a
标签创建一个带有描述信息的href
属性,并监控click
事件调用preventDefault()
函数。
<a href="#Something_De scriptive" id="my_id">Trigger</a>
<script>$("#my_id").click(function(e){e.preventDefault(); //取消单击事件的默认动作以阻止链接的跳转。// 其他的代码
})
</script>
优点:
- 让
<a>
够响应键盘事件并获得焦点(从而屏幕阅读器能够读出背后的内容,增强可访问性) - 优雅降级,在网络连接很差,还没有加载到CSS的时候,
<a>
依然有手型与正常的link样式。
4、gzip的组件
所有现代浏览器都支持 gzip
压缩并会为所有 HTTP 请求自动协商此类压缩。启用 gzip
压缩可大幅缩减所传输的响应的大小(最多可缩减 90%),从而显著缩短下载相应资源所需的时间、减少客户端的流量消耗并加快网页的首次呈现速度。
从HTTP / 1.1开始,Web客户端表示支持使用HTTP请求中的Accept-Encoding标头进行压缩。
Accept-Encoding:gzip,deflate
压缩包括XML和JSON在内的任何文本响应都是值得的。不应对图像和PDF文件进行gzip压缩,因为它们已经过压缩。试图对它们进行gzip不仅会浪费CPU,还可能会增加文件大小。
比如,在nginx中开启gzip压缩:
# 开启gzip
gzip on;
# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别,1-10,数字越大压缩的越好,也越占用CPU时间,后面会有详细说明
gzip_comp_level 2;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png font/ttf font/otf image/svg+xml;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";
其他web容器启动gzip的方法:
- Apache:使用 mod_deflate
- Nginx:使用 ngx_http_gzip_module
- IIS:配置 HTTP 压缩功能
5、CSS放在顶部,JS放在底部
把Javascript脚本在底部,删除阻止渲染的JavaScript
在HTML文件<body>
中指定外部样式表和内联样式块可能对浏览器的渲染性能产生不利影响。
- 浏览器阻塞渲染网页直到所有外部的样式表都已被下载。
- (用
<style>
标记指定的)内联样式块可能会导致reflows和页面跳动。
因此,把外部样式表和内联样式块放在页面的<head>
中是很重要的。通过确保样式表首先被下载和解析,可以让浏览器逐步渲染页面。
具体做法:
将内联样式块和
<link>
元素从页面<body>
移动到页面<head>
中。HTML 4.01规范(第12.3节)规定,始终把使用
<link>
标签的外部样式表放在<head>
部分里,还要确保您指定的样式有正确的顺序。把
<style>
区块放在<head>
部分里。使用css媒体类型
如果可以让CSS
资源只在特定条件下使用,这样这些资源就可以在首次加载时先不进行构建CSSOM
树,只有在符合特定条件时,才会让浏览器进行阻塞渲染然后构建CSSOM
树。
CSS
的媒体查询正是用来实现这个功能的,它由媒体类型以及零个或多个检查特定媒体特征状况的表达式组成。
<!-- 没有使用媒体查询,这个css资源会阻塞渲染 -->
<link href="style.css" rel="stylesheet">
<!-- all是默认类型,它和不设置媒体查询的效果是一样的 -->
<link href="style.css" rel="stylesheet" media="all">
<!-- 动态媒体查询, 将在网页加载时计算。
根据网页加载时设备的方向,portrait.css 可能阻塞渲染,也可能不阻塞渲染。-->
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<!-- 只在打印网页时应用,因此网页首次在浏览器中加载时,它不会阻塞渲染。 -->
<link href="print.css" rel="stylesheet" media="print">
使用媒体查询可以让CSS资源不在首次加载中阻塞渲染,但不管是哪种CSS资源它们的下载请求都不会被忽略,浏览器仍然会先下载CSS文件。
把Javascript脚本在底部,删除阻止渲染的JavaScript
浏览器必须通过在呈现页面之前解析HTML来构建DOM树。如果您的浏览器在此过程中遇到脚本,则必须先停止并执行它,然后才能继续。
具体做法:
将脚本定义或引用放置到<body>
底部。
<script defer="defer">
defer 属性规定是否对脚本执行进行延迟, 脚本将在页面完成解析时执行。
蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。
此图告诉我们以下几个要点:
defer
和async
在网络读取(下载)这块儿是一样的,都是异步的(相较于 HTML 解析)- 它俩的差别在于脚本下载完之后何时执行,显然
defer
*是最接近我们对于应用脚本加载和执行的要求的 - 关于
defer
,此图未尽之处在于它是按照加载顺序执行脚本的,这一点要善加利用 async
则是一个乱序执行的主,反正对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行- 仔细想想,
async
对于应用脚本的用处不大,因为它完全不考虑依赖(哪怕是最低级的顺序执行),不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的,最典型的例子:Google Analytics
6、减少DNS查找
用户访问网站的过程如下:
在地址栏输入网站地址,如www.example.com;
本地DNS得到这个请求,查询本地DNS缓存,如果有这条记录,则直接返回对应的IP;否则,请求网络上的DNS服务器,得到相应的IP,返回给客户机,并缓存这条记录;
浏览器向得到的IP发起建立连接请求,得到响应后建立连接,请求数据;
Server端计算所需数据,并返回给client端;
client端,即浏览器,解析数据并显示在浏览器窗口中,至此,请求完成。
在 一次请求中,DNS解析可以占到请求时间的三分之一左右(这点有待验证),所以如果可以缩短DNS解析时间,就可以加快页面的打开速度。
缩短DNS解析的 方法可以通过延长DNS缓存的时间,选用更快的DNS Server,减少域名总数(例如原来有5个img server,分别为img1.xxx.com至img5.xxx.com,则现在可以减少到3个)等等,但是减少域名个数又会降低资源并行下载的数量, 因为同一域名最多可以并行下载两个资源,所以这里需要一个折衷方案,作者的建议就是将资源分布在大于等于2但小于等于4个域名上(这个也有待验证,例如针 对多大的系统选用多少个域名是最合理的等)。
使用DNS预解析
这里会有一些兼容性问题,可以参见:http://caniuse.com/#feat=link-rel-dns-prefetch
在网页体验中我们常会遇到这种情况,即在调用百度联盟、谷歌联盟以及当前网页所在域名外的域名文件时会遇到请求延时非常严重的情况。那么有没有方法去解决这种请求严重延时的现象呢?
一般来说这种延时的原因不会是对方网站带宽或者负载的原因,那么到底是什么导致了这种情况呢。湛蓝试着进行推测,假设是DNS的问题,因为DNS解析速度很可能是造成资源延时的最大原因。在页面header中添加了以下代码(用以DNS预解析):
<meta http-equiv="x-dns-prefetch-control" content="on" /><link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
<link rel="dns-prefetch" href="http://nsclick.baidu.com" />
<link rel="dns-prefetch" href="http://hm.baidu.com" />
<link rel="dns-prefetch" href="http://eiv.baidu.com" />
dns-prefetch需慎用,多页面重复DNS预解析会增加重复DNS查询次数。
使用场景:
- 新用户访问,后端可以通过 Cookie 判断是否为首次进入站点,对于这类用户,DNS Prefetch 可以比较明显地提升访问速度
- 登录页,提前在页面上进行下一跳页用到资源的 DNS Prefetch
- 页面中的静态资源在不同的domain下,如CSS、JS、图片等文件
- 电商网站的商品页大量载入不同domain下的商品图,如淘宝
- 手机网页
- 大型网站
- js或服务端重定向
Chrome中的一些指令:
chrome://histograms/DNS.PrefetchQueue
:查看队列状态chrome://histograms/DNS
:查看从浏览器启动到上一页的DNS记录chrome://dns
:查看个域名DNS统计chrome://net-internals/#dns
:清除host缓存
前端性能优化(四)01-页面性能优化之优化原则——尽量减少HTTP请求 使用内容传送网络CDN 避免空src或空href值 启用gzip压缩 CSS放顶部,JS放底部 减少DNS查找相关推荐
- web前端开发,如何提高页面性能优化?
web前端开发,如何提高页面性能优化? 内容方面 减少HTTP请求次数 减少DOM操作 减少DNS查询 使用Ajax 可缓存 css方面 把css样式HTML代码页的上端 从页面中分离css代码,从外 ...
- 【前端必备】七、页面性能优化
1.文件优化 图片优化 一些修饰类图片可用CSS代替 将多个图标文件整合到一张图片中 (CSS Sprite) 选择正确的图片格式: gif无损压缩,适合logo.线条等小型简单图像 jpeg适合照片 ...
- 前端性能优化 - 使用内容分发网络CDN
为什么使用CDN 当引入的组件越来越多时,运用 webpack 打包后的 app.js 文件容易变得过大,对首屏加载很不友好. 使用CDN的第三方资源的JS代码,将不再打包到本地服务的JS包中.减小本 ...
- Tomcat启用GZIP压缩,提升web性能
一.前言 最近做了个项目,遇到这么一个问题:服务器返回给客户端的json数据量太大(大概65M),在客户端加载了1分多钟才渲染完毕(当然这加载时间也和本地的下行带宽有关),费时耗流量,用户体验极其不好 ...
- webpack抽离css,压缩css代码 和 js代码
前言 在实际生产环境中,较少使用style-loader,css代码被打包到了 main.js里面,这时候就需要对css代码进行抽离优化. module.exports = {module:{rule ...
- Node.js服务器启用Gzip压缩
Gzip是什么 复制大神们的解释吧: GZIP最早由Jean-loup Gailly和Mark Adler创建,用于UNIX系统的文件压缩.我们在Linux中经常会用到后缀为.gz的文件,它们就是GZ ...
- Spring Boot + Gzip 压缩超大 JSON 对象,传输大小减少一半
1. 业务背景 是这样的,业务背景是公司的内部系统有一个广告保存接口,需要 ADX 那边将投放的广告数据进行保存供后续使用.广告数据大概长这样: {"adName":"& ...
- Java编程性能调优-01|字符串性能优化不容小觑,百M内存轻松存储几十G数据
一.字符串性能优化不容小觑,百M内存轻松存储几十G数据 一.String 对象是如何实现的? String str1= "abc"; String str2= new String ...
- 服务器四通道内存性能提升,四通道内存性能怎么样
四通道的内存有提升,但是性价比不是很好,如果是发烧友那不需要考虑什么了,如果是实用主义者四通道带来的性能的提升可能不会在使用中有太多的明显的感受. 组建四通道内存很简单,有足够的内存条卡槽,X79的芯 ...
- 如何提高页面加载速度 || 前端的性能优化 || 浏览器渲染页面的过程是什么
1.降低请求量 ① 合并资源,减少http请求数量. ② lazyLoad,如图片懒加载.分批加载,每次只加载一部分. ③ 使用字体图标或CSS绘制,来代替部分图片. 2.加快请求速度 ...
最新文章
- RDKit:基于RECAP生成片段
- reactnative 获取定位_react native 获取地理位置的方法示例
- linux 生成字母序列,Python序列之字符串
- 人工智能火了 高端人才成了香饽饽
- 27.垃圾收集器(Serial收集器、ParNew收集器、Parallel收集器、Parallel Old 收集器、CMS收集器、G1收集器、常用的收集器组合)
- 计算机与操作系统小结
- php用while循环做出1到10的乘积,PHP实现笛卡尔积算法的实例讲解
- TQ2440实现触摸屏和qt图形 解决segmentation fault
- 推荐一篇我高中同班同学的文章[转载]
- 清空上传控件HtmlInputFile的方法
- MySql自动同步主库数据(Canal)
- Linux的编辑器、编译器、配置文件、及其安装方法的理解
- 2017中国开发者调查报告-云栖社区
- linux系统认证中级是什么,目前国内常见的几种Linux认证及其所需价格
- 文笔很差系列4 - Kris Kremo
- php免费问答源码,whatsns问答系统PHP免费源码 v4.1
- Matlab矩阵和数组的操作
- Gohead学习笔记
- Jackson (一)下载
- 计算机进程管理 360,电脑的进程管理得英文怎么打啊???
热门文章
- wegame与客户端服务器连接中断95,wegame连接服务器失败
- 德兰梅尔-诚邀您参加2022生物发酵展(济南),7月14日与您相约
- Combating the Elsagate Phenomenon: Deep Learning Architectures for Disturbing Cartoons
- Vue.js项目实战——Day(1)
- ios点击推送闪退_iphone闪退是什么原因?
- 《Python编程从入门到实践 第二版》第八章练习
- 全排列算法(字典序法、SJT Algorithm 、Heap‘s Algorithm)
- 2021“西湖论剑“网络安全大赛Writeup
- java经纬度曲线简化_JAVA 后台计算 经纬度 最短距离
- 为什么网站要使用手机验证码?