浏览器性能优化（初笔记后续修改补充）

article/2025/11/10 20:17:44

参考：【前端工程师面试宝典】学习说明_互联网校招面试真题面经汇总_牛客网 (nowcoder.com)

性能优化

前端性能优化的手段

方面：加载优化、执行优化、渲染优化、样式优化、脚本优化

加载优化:减少HTTP请求、缓存资源、压缩代码、无阻塞、首屏加载、按需加载、预加载、压缩图像、减少Cookie、避免重定向、异步加载第三方资源

执行优化：CSS写在头部，JS写在尾部并异步、避免img、iframe等的src为空、尽量避免重置图像大小、图像尽量避免使用DataURL

渲染优化：设置viewport、减少DOM节点、优化动画、优化高频事件、GPU加速

样式优化：避免在HTML中书写style、避免CSS表达式、移除CSS空规则、正确使用display：display、不滥用float等

脚本优化：减少重绘和回流、缓存DOM选择与计算、缓存.length的值、尽量使用事件代理、尽量使用id选择器、touch事件优化

加载优化

（1）减少HTTP请求：

1.图片请求压缩：css精灵图（sprite）其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。

2.页面组件初始化元素不要过多，合并css和js进行请求（单独合并）

页面的请求数(首次加载同时请求数不能超过4个)，移动设备浏览器同时响应请求为4个请求(Android支持4个，iOS5+支持6个)

（2）缓存资源利用：

1.所有静态资源都要在服务器端设置缓存，并且尽量使用长缓存(使用时间戳更新缓存)，缓存的命中机制–>浏览器章节（寻找访问内容报文结果）

（3）压缩代码：

1.代码体积优化，例如常见库包的min形式，减少不必要的注释段等。

（4）标签阻塞：

1.link引起的阻塞，预处理解析器解析到link标签，阻塞dom的渲染，阻塞的是cssdom的解析过程，但是会延缓render tree的生成，所以会阻塞渲染。

2.script标签内可以操纵dom元素，可以引起页面的回流重绘，所以script标签与GUI渲染线程是与js线程互斥的，也是减少重构的次数，script会阻塞dom解析（避免重复解析）和渲染。

3.link标签阻塞执行栈，js运行时，有可能会请求样式信息，如果此时还没有加载和解析样式，js就有可能会得到错误的回复，产生很多问题。因此浏览器在<link>标签的加载和解析过程中，会禁止脚本运行。

（5）首屏加载优化，后台加载次要信息。

（6）按需加载：import处理

1懒加载实现（判断页面滚动调节自适应引入资源）,对引入资源标签体的链接置空，防止预处理解析扫描到进行引入。

2media Query加载？

（7）图像的压缩，

    • 使用TinyJpg和TinyPng压缩图像
    • 使用CSS3、SVG、IconFont代替图像
    • 使用img的srcset按需加载图像
    • 选择合适的图像：webp优于jpg，png8优于gif
    • 选择合适的大小：首次加载不大于1014kb、不宽于640px
    • PS切图时D端图像保存质量为80，M端图像保存质量为60

（8）减少cookie 重定向和异步加载（服务崩溃阻塞）

执行优化

（1）css头部，js尾部并且异步（js标签的阻塞性质）

（2）避免src为空，空src会重新加载当前页面，影响速度和效率

（3）减少重绘次数，减少相关引起重绘的操作。

（4）DataURL图像没有使用图像的压缩算法，文件会变大，并且要解码后再渲染，加载慢耗时长

渲染优化

（1）设置viewport：HTML的viewport可加速页面的渲染（定义视口，可以进行到视口处时候再渲染？）

（2）减少DOM节点：数据结构冗余，处理复杂度，基础属性继承。

（3）优化动画：（详解一下）

深入解析 EventLoop 和浏览器渲染、帧动画、空闲回调的关系 - 知乎 (zhihu.com)

一些特殊调用执行关系：

每一轮的eventloop都会伴随渲染么？

首先浏览器会在合并两次临近的定时器任务

事件循环最后的渲染处理都会执行么–>不是(需要根据屏幕刷新率、页面性能、页面是否在后台运行来共同决定，通常来说这个渲染间隔是固定的)–>浏览器会保持帧率的稳定，调节页面的动画渲染帧

浏览器判断执行渲染后，对渲染的文档执行下列操作

  1. 对于需要渲染的文档，如果窗口的大小发生了变化，执行监听的 resize 方法。
  2. 对于需要渲染的文档，如果页面发生了滚动，执行 scroll 方法。
  3. 对于需要渲染的文档，执行帧动画回调，也就是 requestAnimationFrame 的回调。
  4. 对于需要渲染的文档， 执行 IntersectionObserver 的回调。
  5. 对于需要渲染的文档，重新渲染绘制用户界面。
  6. 判断 task队列和microTask队列是否都为空，如果是的话，则进行 Idle 空闲周期的算法，判断是否要执行 **requestIdleCallback** 的回调函数。

requestAnimationFrame 在哪个阶段执行?

浏览器认定的最后渲染机会前加入回调队列

requestIdleCallback 在哪个阶段执行？

requestIdleCallback 是浏览器提供给我们的空闲调度算法，让我们把一些计算量较大但是又没那么紧急的任务放到空闲时间去执行。不要去影响浏览器中优先级较高的任务，比如动画绘制、用户输入等等。

它会分片执行，并且采用50ms等机制，防止阻塞用户的输入。

resize、scroll 这些事件是何时去派发的?

resize和scroll事件其实自带节流，它只在 Event Loop 的渲染阶段去派发事件到 EventTarget 上。

（4）函数的节流防抖，减少渲染。

（5）GPU：

  • GPU加速：使用某些HTML5标签和CSS3属性会触发GPU渲染，请合理使用(过渡使用会引发手机耗电量增加)
    • HTML标签：video、canvas、webgl
    • CSS属性：opacity、transform、transition

样式优化：

（1）避免在HTML中书写style（这一点是标签属性还是）
（2）避免CSS表达式：CSS表达式的执行需跳出CSS树的渲染（插入了js语句）
（3）移除CSS空规则：CSS空规则增加了css文件的大小，影响CSS树的执行
（4）正确使用display：display会影响页面的渲染
display:inline后不应该再使用float、margin、padding、width和height
display:inline-block后不应该再使用float
display:block后不应该再使用vertical-align
display:table-*后不应该再使用float和margin
（5）不滥用float在渲染时计算量比较大，尽量减少使用
（6）不滥用Web字体：Web字体需要下载、解析、重绘当前页面，尽量减少使用
（7）不声明过多的font-size：过多的font-size影响CSS树的效率
值为0时不需要任何单位：为了浏览器的兼容性和性能，值为0时不要带单位
（8）标准化各种浏览器前缀，无前缀属性应放在最后
（9）CSS动画属性只用-webkit-、无前缀两种
其它前缀为-webkit-、-moz-、-ms-、无前缀四种：Opera改用blink内核，-o-已淘汰
（9）避免让选择符看起来像正则表达式：高级选择符执行耗时长且不易读懂，避免使用

脚本优化

（1）减少不必要的DOM操作，class整体改变，减少重绘和回流，不要在大量重绘间进行访问。

（2）缓存DOM的选择与计算值。防止多次计算。

（3）缓存.length等计算值，get（）函数的调用处理。

（4）避免绑定多个事件，多使用代理绑定的策略。

（5）使用id选择器（唯一性）

常用规则

雅虎军规

2-5-8原则

  • 用户在2秒内得到响应，会感觉页面的响应速度很快 Fast
  • 用户在2~5秒间得到响应，会感觉页面的响应速度还行 Medium
  • 用户在5~8秒间得到响应，会感觉页面的响应速度很慢，但还可以接受 Slow
  • 用户在8秒后仍然无法得到响应，会感觉页面的响应速度垃圾死了

网站的优化，性能指标，量化指标

检测方案：

lighthouse性能检测

在这里插入图片描述

通过静态化、图片懒加载、图片压缩、异步加载（js和css）、优化代码等方式进行优化。

优化的简单方法：

加载资源

异步js：可以设置defer，async属性让其异步加载，而不会阻塞渲染。defer和async的区别在于async加载完就立即执行，没有考虑依赖，标签顺序等。而defer加载完后会等它前面引入的文件执行完再执行。一般defer用的比较多，async只能用在那些跟别的文件没有联系的孤儿脚本上。

异步css：通过异步css实现标签加入文档中，通过media媒体查询，在不同的环境中加载不同的

preconnect：预先建立访问地址链接：

dns-prefetch
域名预解析

<``link` `rel``=``"dns-prefetch"` `href``=``"//example.com"``>

preconnet
预连接

<``link` `rel``=``"preconnect"` `href``=``"//example.com"``>``<``link` `rel``=``"preconnect"` `href``=``"//cdn.example.com"` `crossorigin>

prefetch
预加载

<link rel=``"prefetch"` `href=``"//example.com/next-page.html"` `as``=``"html"` `crossorigin=``"use-credentials"``>``<link rel=``"prefetch"` `href=``"library.js"` `as``=``"script"``>

prerender
预渲染

<``link` `rel``=``"prerender"` `href``=``"//example.com/next-page.html"``>

代码优化

减少css选择器的嵌套。用sass，less这种css预处理器很容易造成多层嵌套。优化前代码里最多的有七八层嵌套，对性能有一定影响。重构后不超过三层

dom优化：

改变标签的内部调用html()方法，一次性加入多个元素

文档碎片：(fragment)。通过document.createDocumentFragment()可以新建一个fragment。向fragment中appendChild元素的时候是不会阻塞渲染进程的。最后将fragment替换掉页面上的元素。

尾调用优化：

js执行栈–>栈帧的减少

尾调用由于是函数的最后一步操作，所有不需要保留外层函数的调用帧，因为调用位置、内部变量等信息都不会再用到了，只要直接用内层函数的调用帧，取代外层函数的调用帧就可以了。

如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。这就是“尾调用优化”。注意，只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”。

减少栈（栈帧数量减少）负载


http://chatgpt.dhexx.cn/article/c6KXdjKy.shtml

相关文章

深入浏览器内部谈性能优化

深入浏览器内部谈性能优化

1. 浏览器发展历史 a. 1995 年&#xff0c;美国网景公司因“网景浏览器”的发布而快速崛起 b. 同年&#xff0c;微软发布windows95&#xff0c;捆绑IE c. 2002年&#xff0c;微软占据了浏览器市场80%的份额 2. 浏览器三大进化路线&#xff08;Web应用能做的事以及未来发展趋…
阅读更多...
GreenPlum数据库数据脱敏

GreenPlum数据库数据脱敏

1、首先备份要操作的数据库表&#xff0c;防止对原表误操作。 2、例子&#xff1a;数据库表名&#xff1a;st_person&#xff0c;要操作的字段为&#xff1a;phone 3、select phone from st_person ; --看看表里该字段是否有数据&#xff0c;大概格式是什么&#xff0c;该表…
阅读更多...
数据库防火墙、数据库加密、数据库脱敏真的可用吗？

数据库防火墙、数据库加密、数据库脱敏真的可用吗？

数据库是所有信息系统的核心&#xff0c;数据库的安全通常是指其中所存数据的安全&#xff0c;是网络安全、信息安全的重要组成部分。目前有很多相关性产品&#xff0c;如数据库加密、数据库防火墙、数据库脱敏、数据库审计等。 一、数据库防火墙 数据库防火墙系统&#xff1a;…
阅读更多...
mysql动态脱敏查询_数据库动态脱敏

mysql动态脱敏查询_数据库动态脱敏

原标题&#xff1a;数据库动态脱敏 产品简介 中安威士数据动态脱敏系统(简称VS-DM)&#xff0c;通过截获并修改数据库通讯内容&#xff0c;对数据库中的敏感数据进行在线的屏蔽、变形、字符替换、随机替换等处理&#xff0c;达到对用户访问敏感数据真实内容的权限控制。对存储于…
阅读更多...
MySQL 脱敏函数

MySQL 脱敏函数

项目场景&#xff1a; 示例:项目涉及到敏感数据&#xff0c;例如手机号、姓名等使用mysql存储函数解决。 解决方案&#xff1a; 提示&#xff1a;以下主要使用mysql函数CONCAT、LEFT、RIGHT。 1、CONCAT(str1,str2,…) CONCAT()函数返回结果为连接参数产生的字符串。如有任…
阅读更多...
跨数据库跨系统，数据脱敏有新招

跨数据库跨系统，数据脱敏有新招

作者介绍 贝壳找房DBA团队&#xff0c;负责链家、贝壳找房的数据库服务治理及运维&#xff0c;包括MySQL、Redis、Kafka、RocketMQ、TiDB等产品。为保证线上服务高效、安全、稳定运行&#xff0c;面向研发同学提供一站式的数据库操作平台&#xff0c;建设了满足99.99%标准的高可…
阅读更多...
imperva数据库脱敏-server2008

imperva数据库脱敏-server2008

首先安装一个server2008其他的server也行 然后安装java环境 后安装tomcat中间件 一路默认就好 这就是tomcat的控制台 然后安装postgresql数据库 官方的要求是9.1-9.3的版本。 这个数据库也是默认安装就好。里面的密码我设的的Webco123 数据库安装完成 下一步安装发现脱敏的控…
阅读更多...
《Sharding-JDBC》——数据库分表+数据库脱敏实现方案

《Sharding-JDBC》——数据库分表+数据库脱敏实现方案

本文从实际情况出发&#xff0c;解决生产中单表数据过大&#xff0c;和数据被拖库导致的问题&#xff0c;并进行的解决方案。本案例使用的框架为轻量型的jfinal&#xff0c;分表数据库脱敏&#xff0c;均采用了Apache的shardingsphere。 首先我们要先明确这样一个业务场景&…
阅读更多...
mysql数据脱敏_数据脱敏|静态脱敏|动态脱敏—数据库脱敏_产品

mysql数据脱敏_数据脱敏|静态脱敏|动态脱敏—数据库脱敏_产品

1、敏感数据自动识别 数据脱敏系统可通过预定义敏感数据特征库&#xff0c;在任务执行过程中通过智能匹配识别敏感数据&#xff0c;最大限度的实现脱敏工作自动化&#xff0c;简化以手工方式按字段名定义敏感数据的繁琐工作。 2、丰富的脱敏算法 数据脱敏系统内置同义替换、数据…
阅读更多...
使用sql语句对数据库脱敏

使用sql语句对数据库脱敏

最近帮领导整理了一下数据库&#xff0c;给数据库的某些字段进行脱敏&#xff0c;现在整理一下&#xff0c;嘻嘻 1、姓名脱敏 update table set 列 REPLACE(列,SUBSTR(列,2,1),*) 姓名脱敏之后的效果&#xff1a; 2、手机号脱敏 UPDATE table SET 列 ( CASE WHEN 列 IS NO…
阅读更多...
数据库脱敏（mybatis 拦截器实现）

数据库脱敏（mybatis 拦截器实现）

1.使用数据库本身自有的函数进行加密 UPDATE tuc_user SET mobileNo HEX(AES_ENCRYPT(mobileNo, ‘xxxxxx’)); 2.注解类 2.1 SensitiveData package com.wisedu.campuses.sensitive;import java.lang.annotation.*;/*** author MR.MEI*/ Inherited Target({ElementType.T…
阅读更多...
数据库安全关键技术之数据库脱敏技术详解

数据库安全关键技术之数据库脱敏技术详解

数据库脱敏是一种采用专门的脱敏算法对敏感数据进行变形、屏蔽、替换、随机化、加密&#xff0c;并将敏感数据转化为虚构数据的技术。按照作用位置、实现原理不同&#xff0c;数据脱敏可以划分为静态数据脱敏&#xff08;Static Data Masking, SDM )和动态数据脱敏&#xff08;…
阅读更多...
网页数据库设计

网页数据库设计

这次是找一个网页,写er图,然后根据er图设计模型,然后生成数据库表 我找的是起点中文网,根据这个网站做了分析,画了e-r图. 模型
阅读更多...
Java网页应用之实现对数据库的增、删、改、查。

Java网页应用之实现对数据库的增、删、改、查。

模拟信息管理系统 通过eclipse实现网页、数据库的连接&#xff0c;实现对数据库的增、删、改、查。 登陆页面&#xff1a; 登陆成功界面&#xff1a; 添加信息界面&#xff1a; 修改信息界面&#xff1a; 删除信息界面&#xff1a; package com.lq.pro_user.dao;import …
阅读更多...
（网页设计+数据库增删查改）——课设展示

（网页设计+数据库增删查改）——课设展示

注&#xff1a;关于网页所有的代码&#xff0c;我已经打包好了&#xff0c;获取方式如下 关注微信公众号大数据智库&#xff08;直接扫二维码&#xff0c;在我的主页的左下角&#xff09;&#xff0c;回复网页代码即可获取 课设展示 一、网页部分成果展示1、动态显示日期2、动态…
阅读更多...
网页实现数据库的增删改查

网页实现数据库的增删改查

最近在做项目web后台数据增删查改的时候&#xff0c;看到一篇较为详细的经典文章&#xff0c; 所以转载了下来&#xff0c; 文章出处在&#xff1a;https://blog.csdn.net/qq_32539825/article/details/70657340 如果作者认为侵权的告诉我&#xff0c;我立马删。 首先jsp 和…
阅读更多...
通过JSP网页连接Mysql数据库

通过JSP网页连接Mysql数据库

本文介绍通过JSP网页连接到MySQL,从MySQL数据库中读出一张表&#xff0c;并显示在JSP网页中。 1. 在MySQL数据库中建立数据表 用图形化管理工具Navicat Premium 连接MySQL数据库&#xff0c;在数据库“ming”下建立一张名为“teacher”的数据表。 2. 设置Tomcat 1)将JDBC…
阅读更多...
网页连接mysql教程_网页怎么连接到数据库？

网页连接mysql教程_网页怎么连接到数据库？

网页连接到数据库的方法&#xff1a;首先创建一个网页连接数据库的PHP代码文件&#xff1b;然后解决浏览器编码问题并指定数据库字符集&#xff1b;最后通过“mysql_select_db”函数选择并连接数据库即可。 HTML是无法读取数据库的&#xff0c;HTML是页面前端脚本语言&#xff…
阅读更多...
网页JS自动化脚本(八)使用网页专属数据库indexedDB进行数据收集

网页JS自动化脚本(八)使用网页专属数据库indexedDB进行数据收集

我们在网页上进行的活动,往往都需要进行收集一些简单的数据,但是因为浏览器的安全原因,浏览器基本上是无法与本地的操作系统直接产生数据交互的,这本来就是一个由于安全问题生产的无解问题,在浏览器里面是内置了几种数据库的,其中一种就是indexedDB,可以用来储存一些非常小的数…
阅读更多...
网页连接数据库，一个简单的登入界面以及实现登入功能

网页连接数据库，一个简单的登入界面以及实现登入功能

基于V#的ASP.NET.MVC 4 web 网站程序开发 接着上篇继续&#xff0c;上篇地址为https://blog.csdn.net/weixin_42534390/article/details/86576537 我们首先要有一个认知&#xff0c;就是ASP.NET.MVC 4 web 网站程序开发的三层架构概念&#xff0c;分别为BLL,DAL,MOD 这三层的概…
阅读更多...
推荐文章

Copyright @ 2022~2023