web 性能优化详解(Lighthouse工具、优化方式、强缓存和协商缓存、代码优化、算法优化)

1.性能优化包含的方面

优化性能概念宽泛,可以从信号、系统、计算机原理、操作系统、网络通信、DNS解析、负载均衡、页面渲染。只要结合一个实际例子讲述清楚即可。

2.什么是性能?

Web 性能是客观的衡量标准,是用户对加载时间和运行时的直观体验。

Web 性能指页面加载到可交互和可响应所消耗的时间,以及页面在交互时的流畅度——滚动是否顺滑?按钮能否点击?弹窗能否快速打开,动画是否平滑?

Web 性能既包括客观的度量如加载时间,每秒帧数和到页面可交互的时间;

也包括用户的对页面内容加载时间的主观感觉。 

3.如何进行Web性能优化?

1. 首先需要了解性能指标 - 多块才算快?---》如从请求到页面渲染完毕从多少时间减少到了多少时间

2. 使用专业的工具可量化的评估出网站或应用的性能表现(第三方插件)

3. 从网站页面响应的生命周期,分析出造成较差性能表现的原因

4. 进行技术改造,可行性分析等具体的优化实施---》(如大数据量加载;资源文件进行CDN缓存等)

5. 迭代优化---》(一个模块一个模块不断优化)

4.web性能报告——lighthouse

Lighthouse分析web应用程序和web页面,收集关于开发人员最佳实践的现代性能指标和见解,让开发人员根据生成的评估页面,来进行网站优化和完善,提高用户体验。

5.Lighthouse的使用方式

1. 使用google浏览器自带工具Lighthouse

2. 在google应用商店下载扩展程序

Lighthouse会从5个维度给出打分:检测得分 性能指标 优化建议 诊断结果及已通过的性能

经过检测,Lighthouse会对上述5个维度给出0~100的评估得分,得分能到达90分以上,则说明网站应用在该方面的评估表现符合最佳实践,如下图所示:

整个评测结果会给出优化建议,将从下面几点说明

1. **移除阻塞渲染的资源**,

部分javascript脚本文件和样式表文件可能会阻塞系统通对网站页面的首次渲染,建议可将其以内嵌的方式引用,并考虑延迟加载。报告中会将涉及需要优化的资料文件排列在下面,每个文件还包括尺寸大小信息和优化后预计提升首屏渲染时间的效果,据此可安排资源文件优化的优先级

如elementui很多资源都是放在CDN里面,当使用elementui时就很可能遇到CDN服务器挂掉的时候,就可以将elementui资源通过内嵌script方式进行引入,当然elementui资源很多,实际开发中不可能直接引入,就可以通过npm下载包的形式引入

2. **预连接所需要请求的源**,

提前建立与所要访资源之间的网络连接,有两种方式。第一种是设置(link rel="preconnect")的预连接,另一种是设置(link rel="dns-prefetch")的DNS预解析。

3. **降低服务端的响应时间**

资源请求时,浏览器会发出get请求

图片资源收到同源策略影响,但是是运用了资源嵌入式请求,所以不会有跨域问题

网络查看里面如果区分ajax请求和fetch请求?network里面的type形式,ajax的type是xhr

服务器本身限制:带宽(浏览器和服务器之间传输速度),内核(服务器性能,响应快慢),内存(超过内存就会变慢)

高并发一般在后端,前端比如秒杀活动,太多人点击按钮

4. **适当调整图片大小**

除此之外,报告还给出诊断结果,同理以下几个维度来说明

1. **对静态资源文件使用高效的缓存策略** 

比如对图片,css,js文件的缓存。如使用浏览器缓存;使用CDN静态资源缓存

2. **减少主线程的工作**

 浏览器在渲染主进程时需要处理大量工作:比如解析HTML构建DOM,解析css样式表文件和执行javascript文件。所以渲染进程的主线程繁忙会导致用户响应延迟的不良体验,在Lighthouse中会提供主线程对各个任务的执行耗时,让开发者可以针对异常处理过程进行有目标的优化

3. **减少http请求数**

如10张图片请求十次和将10张图做成一张图成一张图

针对图片:

对于小型的图片,比如不超过10kb的转化为base64,再通过background-image进行引入

大型图片:适当范围内进行压缩,产品接受范围内

小型icon图标:传统模式使用精灵图;字体图标形式(图标矢量库:放大缩小不会失真)

5.浏览器缓存策略

 强缓存

  - 不会向服务器发送请求,直接从缓存中读取资源,在chrome控制台的Network选项中可以看到该请求返回200的状态码,并且Size显示from disk cache或from memory cache。强缓存可以通过设置两种 HTTP Header 实现:Expires 和 Cache-Control。

  - Cache-Control

    - public 表示响应可以被客户端和代理服务器缓存

    - private 表示响应只可以被客户端缓存

    - max-age=30 缓存30秒后过期,需要重新请求

    - s-maxage=30 覆盖max-age,作用一样,只在代理服务器中生效

    - no-store 不缓存任何响应

    - no-cache 资源被缓存,但是立即失效,下次会发起请求验证资源是否过期

    - max-stale=30 30秒内,即使缓存过期,也使用该缓存

    - min-fresh=30 希望在30秒内获取最新的响应

  -  Expires

    - 缓存过期时间,用来指定资源到期的时间,是服务器端的具体的时间点。也就是说,Expires=max-age + 请求时间,需要和Last-modified结合使用。Expires是Web服务器响应消息头字段,在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而无需再次请求。

    **缺点**受限于本地时间,如果修改了本地时间,可能会造成缓存失效

- 强缓存的两个状态(network中的size属性中进行查看:页面首次打开从服务器获取,刷新后会从memory cache中读取,如果这个页面不关闭然后重新打开一个窗口访问刚才的同一个地址,会从disk cache中读取;都读取不到就会去服务器读取)

  - from memory cache

   - 不访问服务器,一般已经加载过该资源且缓存在了内存当中,直接从内存中读取缓存。浏览器关闭后,数据将不存在(资源被释放掉了),再次打开相同的页面时,不会出现from memory cache。

  - from disk cache

    - 不访问服务器,已经在之前的某个时间加载过该资源,直接从硬盘中读取缓存,关闭浏览器后,数据依然存在,此资源不会随着该页面的关闭而释放掉下次打开仍然会是from disk cache。

协商缓存

  - 协商缓存就是强制缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存,主要有以下两种情况:

    - 协商缓存生效,返回304和Not Modified(比强缓存会慢一些)

    - 协商缓存失效,返回200和请求结果 

6.精炼js代码

代码复用

减少业务复杂度

算法上优化(网站——力扣)

  - 一般情况下,算法中基本操作重复执行的次数是问题规模n的某个函数,用T(n)表示,若有某个辅助函数f(n),使得当n趋近于无穷大时,T(n)/f(n)的极限值为不等于零的常数,则称f(n)是T(n)的同数量级函数。记作T(n)=O(f(n)),称O(f(n)) 为算法的渐进时间复杂度,简称时间复杂度。

动态规划

动态规划常常适用于有重叠子问题和最优子结构性质的问题,动态规划方法所耗时间往往远少于朴素解法。

动态规划背后的基本思想非常简单。大致上,若要解一个给定问题,我们需要解其不同部分(即子问题),再根据子问题的解以得出原问题的解。

- 适用情况

 - 最优子结构

    最优子结构性质。如果问题的最优解所包含的子问题的解也是最优的,我们就称该问题具有最优子结构性质(即满足最优化原理)。最优子结构性质为动态规划算法解决问题提供了重要线索。

 - 无后效性。

    即子问题的解一旦确定,就不再改变,不受在这之后、包含它的更大的问题的求解决策影响

 - 子问题重叠

     子问题重叠性质。子问题重叠性质是指在用递归算法自顶向下对问题进行求解时,每次产生的子问题并不总是新问题,有些子问题会被重复计算多次。动态规划算法正是利用了这种子问题的重叠性质,对每一个子问题只计算一次,然后将其计算结果保存在一个表格中,当再次需要计算已经计算过的子问题时,只是在表格中简单地查看一下结果,从而获得较高的效率。

6. 一道面试题:从浏览器地址栏输入URL后,到页面渲染出来,整个过程都发生了什么?

1、首先浏览器在输入URL之后,会先解析URL,判断是否合法;

2、合法的话会查看浏览器缓存,判断是否有缓存,如果有缓存,则显示;

3、如果没有缓存,浏览器会向服务器发送HTTP协议,会进行DNS解析,获取IP地址;

4、浏览器和服务器进行TCP连接,进行三次握手;

5、握手成功之后,浏览器会向服务器发送http请求,请求数据包;

6、服务器处理请求,将数据返回给浏览器;

7、浏览器收到HTTP响应后,会解析它;

8、浏览器发送异步请求,然后渲染页面

可以做到性能优化的点

  • 发出请求之前,对页面事件(滚动等)进行优化
  • 获取到数据后,部分,分页渲染
  • 资源文件缓存
  • 代码优化等

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/107370.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2.3 初探Hadoop世界

文章目录 零、学习目标一、导入新课二、新课讲解(一)Hadoop的前世今生1、Google处理大数据三大技术2、Hadoop如何诞生3、Hadoop主要发展历程 (二)Hadoop的优势1、扩容能力强2、成本低3、高效率4、可靠性5、高容错性 (三…

在C++和Python的项目中使用ROS

如果搜索如何使用ROS,搜索结果肯定是先建立工作空间,在创建功能包等等步骤,但其实不需要这么麻烦。 在Python中使用ROS,只需要在Pycharm的Project Structure中的Add Content Root加入ros的packages就可以了,如下图 在…

二叉树题目:从前序与中序遍历序列构造二叉树

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题:从前序与中序遍历序列构造二叉树 出处:105. 从前序与中序遍历序列构造二叉树 难度 5 级 题目描述 要…

<三>Qt斗地主游戏开发:主界面初始化显示

1. 主界面效果 效果关键点: 1)拖动标题栏可实现主界面拖动 2)logo图标名称及主界面背景 3)最小化及关闭 2.思路分析 1)背景图片及logo图标的设定比较简单,通过stylesheet即可实现。通过QWidget的拖动即可实…

算法leetcode|84. 柱状图中最大的矩形(rust重拳出击)

文章目录 84. 柱状图中最大的矩形:样例 1:样例 2:提示: 分析:题解:rust:go:c:python:java: 84. 柱状图中最大的矩形: 给定 n 个非负整…

【git的使用方法】——上传文件到gitlab仓库

先进入到你克隆下来的仓库的目录里面 比如:我的仓库名字为zhuox 然后将需要上传推送的文件拷贝到你的克隆仓库下 这里的话我需要拷贝的项目是t3 输入命令ls,就可以查看该文件目录下的所有文件信息 然后输入git add 文件名 我这边输入的是 &#x…

处理ElementUI组件默认样式多次重复问题

问题截图: 解决办法: 在postcss.config.js文件里添加配置项: module.exports {plugins: {autoprefixer: {},cssnano: {} //添加这行代码}, } 处理结果: github issues: https://github.com/ElemeFE/element/is…

算法|每日一题|只出现一次的数字Ⅲ|位运算

260.只出现一次的数字III 原题地址:力扣每日一题:260.只出现一次的数字III 之前整理过本题及其扩展,详细说明了思路和做法,链接如下: 只出现一次的数字I,II,III class Solution {public int[] s…

C++ vector 自定义排序规则(vector<vector<int>>、vector<pair<int,int>>)

vector< int > vector<int> vec{1,2,3,4};//默认从小到大排序 1234 sort(vec.begin(),vec.end()); //从大到小排序 4321 sort(vec.begin(),vec.end(),greater<int>());二维向量vector<vector< int >> vector<vector<int>> vec{{0…

Ubuntu下安装Go

如果要添加PATH环境变量&#xff0c;建议添加至~/.bashrc目录下&#xff0c;而不是这篇文章所说的~/.profile或/etc/profile&#xff1a; Download and install - Go Official Website

【LeetCode刷题(数组and排序)】:存在重复元素

给你一个整数数组 nums 。如果任一值在数组中出现 至少两次 &#xff0c;返回 true &#xff1b;如果数组中每个元素互不相同&#xff0c;返回 false 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3,1] 输出&#xff1a;true 示例 2&#xff1a; 输入&#xff1a;nums [1,2…

WorkPlus即时通讯办公软件,助力企业实现移动化办公

在移动互联网的时代背景下&#xff0c;企业对于高效的移动平台需求日益迫切。WorkPlus作为领先品牌&#xff0c;致力于为企业打造卓越的移动平台&#xff0c;助力企业实现协作与效率的突破。本文将探讨WorkPlus如何通过其专业的解决方案&#xff0c;为企业打造无限可能的移动办…

14.8 Socket 一收一发通信

通常情况下我们在编写套接字通信程序时都会实现一收一发的通信模式&#xff0c;当客户端发送数据到服务端后&#xff0c;我们希望服务端处理请求后同样返回给我们一个状态值&#xff0c;并以此判断我们的请求是否被执行成功了&#xff0c;另外增加收发同步有助于避免数据包粘包…

android 如何确定MediaCodec输出的确切YUV格式

在Android中&#xff0c;您可以通过MediaCodec的MediaFormat对象来确定输出的确切YUV格式。以下是如何获取这些信息的步骤&#xff1a; 1、初始化并配置MediaCodec&#xff1a; 在设置MediaCodec之后&#xff0c;例如在调用configure()后或在第一次接收到输出缓冲区后&#x…

android 13.0 静默安装app和静默卸载app功能实现

1.概述 在13.0的产品开发中,对于调用pm的系统api实现静默安装已经受限,并且在8.0 9.0以后由于系统对于权限控制越来越严格 所以说通过adb shell 来安装卸载app都受到了限制但是又不想通过调用系统接口 弹出对话框 让用户同意后在安装 所以就需要 在系统中增加静默安装app的接…

【Kotlin精简】第4章 函数

1 简介 函数是用来运行代码的载体&#xff0c;可以在一个函数里编写很多行代码&#xff0c;当运行这个函数时&#xff0c;函数中的所有代码会全部运行。 Kotlin中的函数同Java完全面向对象的规则不太一样&#xff0c;在Kotlin的世界里&#xff0c;函数也是准C位的&#xff0c;…

微服务架构 | 超时管理

INDEX LSA 级别与全年停机时间速查表LSA 级别实战TP 性能超时时间设计原则 LSA 级别与全年停机时间速查表 计算公式&#xff1a;60 * 60 * 24 * 365 * (1-LSA) 31,536,000‬ * (1-LSA) 系统级别LSA级别全年停机时间099.999%5分钟099.99%52分钟199.9%8.8小时299%3.65 天 LSA…

基于 ACK Fluid 的混合云优化数据访问(五):自动化跨区域中心数据分发

作者&#xff1a;车漾 前文回顾&#xff1a; 本系列将介绍如何基于 ACK Fluid 支持和优化混合云的数据访问场景&#xff0c;相关文章请参考&#xff1a; -基于 ACK Fluid 的混合云优化数据访问&#xff08;一&#xff09;&#xff1a;场景与架构 -基于 ACK Fluid 的混合云优…

android apk 加固后重新签名

APP安全检测&#xff0c;代码有泄露风险&#xff0c;需要加固 &#xff0c;找个几个平台&#xff0c;最终在腾讯加固平台有免费10个基础加固 &#xff0c;随后对APP进行加固&#xff0c;加固之后发现需要重新签名 1.查看项目中build.gradle文件中buildToolVerson 中Android S…

科研上新 | 第2期:可驱动3D肖像生成;阅读文本密集图像的大模型;文本控制音色;基于大模型的推荐智能体

编者按&#xff1a;欢迎阅读“科研上新”栏目&#xff01;“科研上新”汇聚了微软亚洲研究院最新的创新成果与科研动态。在这里&#xff0c;你可以快速浏览研究院的亮点资讯&#xff0c;保持对前沿领域的敏锐嗅觉&#xff0c;同时也能找到先进实用的开源工具。 本期内容速览 …