前端页面性能优化的几种方式(强烈推荐)

有的人可能会回答local storage 和session storage，其实不是这个。浏览器缓存和存储不是一回事。

4、使用CDN

浏览器第一次打开页面时，缓存是起不了作用的。这个时候，CDN就上场了。

5、DNS预解析

一、资源压缩合并，减少http请求

合并图片（css sprites）、CSS和JS文件合并、CSS和JS文件压缩

图片较多的页面也可以使用 lazyLoad 等技术进行优化。

精灵图等

二、非核心代码异步加载

异步加载的方式：（这里不说框架，只说原理）

动态脚本加载

defer

async

动态脚本加载

使用document.createElement创建一个script标签，即document.createElement(‘script’)，然后把这个标签加载到body上面去。

参考链接：

javascript 异步加载

defer

通过异步的方式加载defer1.js文件：

async

HTmL5新增特性。

通过异步的方式加载async1.js文件：

defer和async的区别

defer：在HTML解析完之后才会执行。如果是多个，则按照加载的顺序依次执行。

async：在加载完之后立即执行。如果是多个，执行顺序和加载顺序无关。

代码举例：

Document 上方打印的结果是：

同步任务

defer1

defer2

因为defer的加载是有顺序的，所以两个引入defer文件按顺序执行。如果把引入的文件改为async的方式加载，打印的结果可能是：

同步任务

async2 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源徽信搜索公众号【编程进阶路】

async1

参考链接：

浅谈script标签的defer和async

三、利用浏览器缓存

缓存：资源文件（比如图片）在本地存有副本，浏览器下次请求的时候，可能直接从本地磁盘里读取，而不会重新请求图片的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会被更新。

协商缓存

协商缓存：浏览器发现本地有资源的副本，但是不太确定要不要使用，于是去问问服务器。

当浏览器对某个资源的请求没有命中强缓存（也就是说超出时间了），就会发一个请求到服务器，验证协商缓存是否命中。

前端页面性能优化的几种方式(强烈推荐)相关推荐

前端页面性能优化的几种方式
前端页面性能优化的几种方式提升页面性能优化的常见方式: 资源压缩合并,减少http请求非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别利用浏览器缓存 --> ...
前端页面性能优化 - 字体加载优化
相比于英文的字库来说,中文字库的体积非常之大,小则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是一种关系型数据库,可以很好地支持大数据量的存储,但是一般来说,数据库中的表越小,在它上面执行的查询也就越快.因此,在创建表的时候,为了获得更好的性能,我们可以将表 ...

前端页面性能优化的几种方式(强烈推荐)

前端页面性能优化的几种方式(强烈推荐)相关推荐

最新文章

热门文章