前端之页面性能优化

时间:2022-02-28 06:12:03

提到页面性能优化,诸位老哥能想到哪些方式呢?
这篇文章我们就一下常用的页面性能优化的方式

 1.资源压缩合并,减少http请求

其实这种方法没什么好说的,因为http是无连接的协议,每请求一次就会断开,所以每次连接会花费时间,请求也会花费时间,页面响应就会变慢,资源压缩合并就会显著减少http请求次数,提升页面性能,css sprite就是这种原理

2.非核心代码异步加载

主要是用于js加载,因为js是单线程的,而大多数的网站的js文件就是跨域加载,就会比较缓慢,这时候就可以让核心js代码先执行,非核心代码异步执行,具体方法有哪些呢?

①动态script标签

使用document.createElement(‘script’);来动态创建script标签实现

②defer

给script标签加入一个defer属性,这样这个script标签就会在页面全部加载完之后执行。

③async

给script标签加入一个async属性,他与defer不同的是,具有defer属性的script会根据先后顺序执行,而async则是哪个script加载完成哪个先执行,不会根据先后顺序。

3.http缓存

这应该是页面性能优化最有效的方法了,如果你没有给页面设置http缓存,那么其他的方法可能起到的方法微乎其微。
他的主要原理就是当你访问一个网页,浏览器会将资源缓存在本地,下次访问时不会再去访问服务器,这样就会大大加快页面响应
注意http缓存不是cookie,localstorage,这两个是存储方式
http缓存分为强缓存和协商缓存,强缓存就是在过期时间内不会再去访问服务器请求这些资源,协商缓存是在过期以后不知道服务器内容有没有发生改变,访问服务器,如果无改变就会执行本地资源
http缓存的关键字key都会在响应头中,我们打开一个网页看一下控制台
前端之页面性能优化
画红线的就是http缓存了,我们一个一个说,
Cache-Control 强缓存,max-age就是它的最大过期时间单位是s
Etag协商缓存,他就如同一个hash值,如果请求服务器的hash值改变,那么浏览器就会重新向服务器请求这些资源,如果未发生改变,则会执行本地资源。
Expires 强缓存,它的value值就是过期时间,这个时间是客户端本地时间,那么如果客户端时间与服务器时间不一致怎么办呢,所以Cache-Control就应运而生,两者都存在的情况会依照Cache-Control来执行
Last-Modified 协商缓存,最后修改时间,同Etag差不多
http缓存就说这么多,详细的内容可以去各种前端大牛的博客里看,专门有讲的。

4.CDN加速

因为国内有多个网络运营商,服务器地区与客户端地区如果相隔很远又不是一个运营商,那么请求这个网站资源速度就会很慢,cdn就可以让用户请求资源加快。

5,dns预解析

link rel=”dns-prefetch” href=”http://www.baidu.com”

这一句各位老哥应该很熟悉了,在head中加入这行代码就会实现dns预解析。

meta http-equiv=”x-dns-prefetch-control” content=”on”

这一句可能有人见过,在http1.0中,几乎所有的a标签连接都是预解析dns的,但是在http1.1中a标签没有预解析,所以这一行代码就是预解析开关。

好了页面性能优化就说到这,有很多大牛博客把每一种说的都很详细老哥们可以自己去找找看