前端页面性能优化的几种方式
前端页面性能优化的几种方式
提升页面性能优化的常见方式:
- 资源压缩合并,减少http请求
- 非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别
- 利用浏览器缓存 --> 缓存的分类 --> 缓存的原理
- 使用CDN
- DNS预解析
一.资源压缩合并,减少http请求
- 合并图片(css sprites)、CSS和JS文件合并、CSS和JS文件压缩
- 图片较多的页面也可以使用 lazyLoad 等技术进行优化。
- 精灵图等
二、非核心代码异步加载
异步加载的方式:(这里不说框架,只说原理)
- 动态脚本加载
- defer
- async
动态脚本加载
使用document.createElement创建一个script标签,即document.createElement(‘script’),然后把这个标签加载到body上面去。
defer和async的区别
- defer:在HTML解析完之后才会执行。如果是多个,则按照加载的顺序依次执行。
- async:在加载完之后立即执行。如果是多个,执行顺序和加载顺序无关。
代码举例:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!--通过异步的方式引入两个外部的js文件--><script src="./defer1.js" defer></script><script src="./defer2.js" defer></script>
</head><body>
<script>console.log('同步任务');
</script>
</body></html>
上方打印的结果是:
同步任务
defer1
defer2
因为defer的加载是有顺序的,所以两个引入defer文件按顺序执行。如果把引入的文件改为async的方式加载,打印的结果可能是:
同步任务
async2
async1
三、利用浏览器缓存
缓存:资源文件(比如图片)在本地存有副本,浏览器下次请求的时候,可能直接从本地磁盘里读取,而不会重新请求图片的url。
缓存分为:强缓存和协商缓存
强缓存:不用请求服务器,直接使用本地的缓存。
强缓存是利用 http 响应头中的Expires或Cache-Control实现的。
浏览器第一次请求一个资源时,服务器在返回该资源的同时,会把上面这两个属性放在response header中。比如:
注意:这两个response header属性可以只启用一个,也可以同时启用。当response header中,Expires和Cache-Control同时存在时,Cache-Control的优先级高于Expires。
下面讲一下二者的区别。
1、Expires:服务器返回的绝对时间。
是较老的强缓存管理 response header。浏览器再次请求这个资源时,先从缓存中寻找,找到这个资源后,拿出它的Expires跟当前的请求时间比较,如果请求时间在Expires的时间之前,就能命中缓存,否则就不行。
如果缓存没有命中,浏览器直接从服务器请求资源时,Expires Header在重新请求的时候会被更新。
缺点:
由于Expires是服务器返回的一个绝对时间,存在的问题是:服务器的事件和客户端的事件可能不一致。在服务器时间与客户端时间相差较大时,缓存管理容易出现问题,比如随意修改客户端时间,就能影响缓存命中的结果。所以,在http1.1中,提出了一个新的response header,就是Cache-Control。
2、Cache-Control:服务器返回的相对时间。
http1.1中新增的 response header。浏览器第一次请求资源之后,在接下来的相对时间之内,都可以利用本地缓存。超出这个时间之后,则不能命中缓存。重新请求时,Cache-Control会被更新。
协商缓存
协商缓存:浏览器发现本地有资源的副本,但是不太确定要不要使用,于是去问问服务器。
当浏览器对某个资源的请求没有命中强缓存(也就是说超出时间了),就会发一个请求到服务器,验证协商缓存是否命中。
协商缓存是利用的是两对Header:
- 第一对:Last-Modified、If-Modified-Since
- 第二对:ETag、If-None-Match
1、Last-Modified、If-Modified-Since。过程如下:
(1)浏览器第一次请求一个资源,服务器在返回这个资源的同时,会加上Last-Modified这个 response header,这个header表示这该资源在服务器上的最后修改时间:
2)浏览器再次请求这个资源时,会加上If-Modified-Since这个 request header,这个header的值就是上一次返回的Last-Modified的值:
(3)服务器收到第二次请求时,会比对浏览器传过来的If-Modified-Since和资源在服务器上的最后修改时间Last-Modified,判断资源是否有变化。如果没有变化则返回304 Not Modified,但不返回资源内容(此时,服务器不会返回 Last-Modified 这个 response header);如果有变化,就正常返回资源内容(继续重复整个流程)。这是服务器返回304时的response header:
缺点:
Last-Modified、If-Modified-Since一般来说都是非常可靠的,但有可能出现的问题是:服务器上的资源变化了,但是最后的修改时间却没有变化。这一对header就无法解决这种情况。于是,下面这一对header出场了。
2、ETag、If-None-Match。过程如下:
(1)浏览器第一次请求一个资源,服务器在返回这个资源的同时,会加上ETag这个 response header,这个header是服务器根据当前请求的资源生成的唯一标识。这个唯一标识是一个字符串,只要资源有变化这个串就不同,跟最后修改时间无关,所以也就很好地补充了Last-Modified的不足。如下:
3)服务器第二次请求时,会对比浏览器传过来的If-None-Match和服务器重新生成的一个新的ETag,判断资源是否有变化。如果没有变化则返回304 Not Modified,但不返回资源内容(此时,由于ETag重新生成过,response header中还会把这个ETag返回,即使这个ETag并无变化)。如果有变化,就正常返回资源内容(继续重复整个流程)。这是服务器返回304时的response header:
(4)浏览器如果收到304的响应,就会从缓存中加载资源。
四、使用CDN
怎么最快地让用户请求资源。一方面是让资源在传输的过程中变小,另外就是CDN。
要注意,浏览器第一次打开页面的时候,浏览器缓存是起不了作任何用的,使用CDN,效果就很明显。
五、DNS预解析
(dns-prefetch)通过 DNS 预解析来告诉浏览器未来我们可能从某个特定的 URL 获取资源,当浏览器真正使用到该域中的某个资源时就可以尽快地完成 DNS 解析。
第一步:打开或关闭DNS预解析
你可以通过在服务器端发送 X-DNS-Prefetch-Control 报头。或是在文档中使用值为 http-equiv 的meta标签:
<meta http-equiv="x-dns-prefetch-control" content="on">
需要说明的是,在一些高级浏览器中,页面中所有的超链接(a标签),默认打开了DNS预解析。但是,如果页面中采用的https协议,很多浏览器是默认关闭了超链接的DNS预解析。如果加了上面这行代码,则表明强制打开浏览器的预解析。(如果你能在面试中把这句话说出来,则一定是你出彩的地方)
第二步:对指定的域名进行DNS预解析
如果我们将来可能从 smyhvae.com 获取图片或音频资源,那么可以在文档顶部的 标签中加入以下内容:
<link rel="dns-prefetch" href="http://www.smyhvae.com/">
当我们从该 URL 请求一个资源时,就不再需要等待 DNS 解析的过程。该技术对使用第三方资源特别有用。
前端页面性能优化的几种方式相关推荐
- 前端页面性能优化 - 字体加载优化
相比于英文的字库来说,中文字库的体积非常之大,小则1M,动辄几十 M 的体积非常常见.所以在前端页面性能优化中,字体加载的优化就显得尤为重要.阅读了相关的知识和文章,在研究了市面上字体加载方案之后,我 ...
- web前端页面性能优化SEO优化
首先什么叫网站? 网站一般分为前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端应该是属于功能的表现.并且影响用户访问体验的绝大部分来自前端页 ...
- 前端页面性能优化指标
前端页面性能优化指标 一.有哪些指标 LCP(Largest Contentful Paint) FID( First Input Delay) CLS(Cumulative Layout Shift ...
- 实现前端页面跳转的几种方式
实现前端页面跳转的几种方式 推荐使用 <script language='javascript'> document.location = 'http://mail.qq.com/do ...
- 前端页面性能优化(完整归纳版)
前端页面性能优化 当优化前端页面性能时,可以从多个方面入手.以下是一些常见的优化技巧,使用 Markdown 格式展示: 1. 优化资源加载 压缩和合并文件:减少请求次数,通过压缩和合并 CSS.Ja ...
- web前端页面性能优化小结
一.提倡前端开发工程师在书写xhtml的时候做到结构语义化. 结构中主要包括了head和body两个部分,但是我们经常说的是结构语义化主要是body中的标签,但是我在这里还是简单的说一下head,he ...
- web前端页面性能优化(提升页面加载速度)
我们都知道,对于web应用来说性能很重要,然而性能的优化相关知识非常庞大而复杂,对于性能优化我们需要做些什么,或者瓶颈是什么通常是我们不太了解的.(当然技术大牛除外) 通过查阅相关资料,了解到了一些关 ...
- 页面性能优化的五种办法
前言 大部分用户希望网页能在 2 秒之内就完成加载.事实上,加载时间每多 1 秒,你就会流失 7% 的用户.如果加载需要太长时间,他们就会放弃访问. 以下是我总结性能优化常见的办法: 一.资源压缩与合 ...
- MySQL 性能优化的 9 种方式
1.选择最合适的字段属性 Mysql是一种关系型数据库,可以很好地支持大数据量的存储,但是一般来说,数据库中的表越小,在它上面执行的查询也就越快.因此,在创建表的时候,为了获得更好的性能,我们可以将表 ...
最新文章
- Xamarin.Android之Fragment Walkthrough
- Computer:屏幕录像专家软件的简介、安装、使用方法之详细攻略
- BZOJ4161 常系数齐次线性递推
- 如何快速解决虚拟机中的CentOS7无法上网的方式
- linux服务器黑屏_xshell连接Linux系统(小红帽7.3)服务器,导致服务器黑屏
- 前端学习(1320):同步和异步得区别
- android开发适配深色模式,手机不支持深色模式,如何用软件解决深色模式的问题?(附有系统全局深色模式实现方法...
- 电脑测试软件_一种笔记本电脑转轴扭力测试仪
- C#基础知识-编写第一个程序(二)
- 一台电子计算机埃尼阿克的介绍,世界之最——第一台电子计算机
- php返回代码翻译,php 在线翻译函数代码
- chrome官网下载网址
- html dreamweaver模板,Dreamweaver如何制作网页模板
- ubuntu14.04不能上网
- 不做ui了 转行做什么_ui设计师是做什么的 想转行可以吗
- html样式zoom,CSS zoom属性用法及代码示例
- 深度学习的权重衰减是什么_权重衰减和L2正则化是一个意思吗?它们只是在某些条件下等价...
- GEA 4.5比较各种旋转表达方式
- 设计模式学习笔记--享元(Flyweight)模式
- 张三的酸奶厂:C++用贪心算法解POJ2393_Yogurt factory问题