性能优化 面试

news2024/11/24 22:32:18

性能分析
1.页面加载性能(加载时间;用户体验)
2.动画与操作性能(是否流畅无卡顿)
3.内存占用(内存占用过大,浏览器崩掉等)
4.电量消耗(游戏方面,暂不考虑)

1.浏览器输入url并回车都发生了什么?
https:传输协议,加密的http
www:服务器
baidu.com:域名
?key=123:参数
第一次访问之后,会将域名解析的映射缓存到本地(浏览器缓存)
a.解析url,拿到ip地址(DNS域名系统)
b.建立连接(TCP三次握手)每一次都是试探,不携带任何正式数据
c.开始传输数据
d.渲染页面
e.断开连接(TCP四次挥手)

回流与重绘

2.css加载会造成以下哪些发生阻塞(bc)

a.dom解析
b.render构建
c.js的执行
在这里插入图片描述

3.性能优化的点
a.加载
(1)减少http请求(精灵图,雪碧图,css与js内联与合并)
(2)缩小文件大小(资源压缩/uglify-js进行js文件的压缩)
(3)CDN库
(4)懒加载 ssr预渲染
b.动画与操作性能
(1)避免回流 =>脱离文档流
c.内存方面
(1)避免全局变量,有的话手动回收(obj=null)
(2)少用闭包,手动回收
在这里插入图片描述


//script部分
const num = document.getElementsByTagName('img').length;
  const img = document.getElementsByTagName('img');
  let n = 0;
  layLoad();
  window.onscroll = layLoad;
  const layLoad = () => {
    const seeHeight = document.documentElement.clientHeight;
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollTop;
    for (let i = n; i < num; i++) {
      if (img[i].offsetTop < seeHeight + scrollHeight) {
        img[i].src = img[i].getAttribute('data-src');
        //防止重复加载
        n = i + 1;
      }
    }
  };

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

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

相关文章

【SpringBoot】九:Web服务---文件上传

文章目录 1.MultipartFile API2.上传文件 1.MultipartFile API 在 Controller 的方法加入形参RequestParam MultipartFile。 MultipartFile 表示上传的文件&#xff0c;提供了方便的方法&#xff0c;保存文件到磁盘。 方法作用getName()参数名称&#xff08;upfile&#xff0…

pymongo给文档里的某个列表添加元素并去重以及操作符的表格

文章目录 问题描述知识点收集mongo的操作符:匹配符&#xff1a;选择符&#xff1a;函数操作&#xff1a;更新符&#xff1a;聚集符&#xff1a;字段操作符&#xff1a; 问题描述 给parts列表新增字典 新增前: 新增后: 代码: mongo_client get_mongo_client()col mongo_cli…

【ZYNQ】ZYNQ7000 UART 控制器及驱动示例

简介 UART 控制器介绍 UART 控制器是一个全双工异步收发控制器&#xff0c;ZYNQ 内部包含两个 UART 控制器&#xff0c;UART0 和 UART1。每一个 UART 控制器支持可编程的波特率发生器、64 字节的接收 FIFO 和发送 FIFO、产生中断、RXD 和 TXD 信号的环回模式设置以及可配置的…

第一个SpringBoot程序

如何创建一个SpringBoot项目&#xff0c;两种方式&#xff0c;官网或IDEA 官方提供了一个快速生成的网站&#xff0c;IDE集成了这个网站 spring官网 Spring | Homehttps://spring.io/进入spring官网&#xff0c;点击projects&#xff0c;点击SpringBoot&#xff0c;进到如下…

前端设计必须知道!7个超实用的工具推荐!

前端网络开发作为一个高薪行业&#xff0c;近年来的繁荣是业内人士所看到的。网络开发工具也在上升&#xff0c;市场上出现了越来越多的前端页面设计工具。但随着前端页面设计工具数量的增加&#xff0c;找到合适的前端页面设计工具来完成工作有时会让开发团队感到困惑。 本文…

看不上的年金险

前言 像我这种“资深”股民&#xff0c;激进的有股票期货&#xff0c;稳健的有国债、政策性金融债、地方政府债、城投债&#xff0c;中间的还有etf、宽基指数、指增基金&#xff0c;平时因为对冲风险买点保障性保险也就罢了&#xff0c;储蓄型的保险压根看不上。 但现在通过熬…

Golang语言初识

Windows 下搭建 Go 开发环境-安装和配置 SDK 采用文章 2.5.1介绍了 SDK SDK 的全称(Software Development Kit 软件开发工具包)SDK 是提供给开发人员使用的&#xff0c;其中包含了对应开发语言的工具包 2.5.2下载 SDK 工具包 1) Go 语言的官网为&#xff1a;golang.org , 因…

基于单片机的步进电机驱动电路设计

基于单片机的步进电机驱动电路设计 步进电机在控制系统中具有广泛的应用。它可以把脉冲信号转换成角位移&#xff0c;并且可用作电磁制动轮、电磁差分器、或角位移发生器等。 有时从一些旧设备上拆下的步进电机(这种电机一般没有损坏)要改作它用&#xff0c;一般需自己设计驱动…

Flask 设置头像及创建帖子模型类

我们经常在一些网站上看到&#xff0c;在用户没有自定义头像的情况下&#xff0c;会给每个用户都生成一个头像&#xff0c;这让网站显得更美观&#xff0c;那这个是怎么实现的呢&#xff1f;在Flask中有一个插件&#xff0c;叫做Flask-avatars&#xff0c;专门提供头像解决方案…

UNIX网络编程卷一 学习笔记 第十五章 Unix域协议

本书中&#xff0c;作者说Unix域数据报套接字是不可靠的&#xff0c;这一说法已经过时&#xff0c;当前大多实现中&#xff0c;Unix域套接字都是可靠的&#xff0c;不论是数据报套接字还是字节流套接字。 Unix域协议不是一个实际的协议族&#xff0c;而是单个主机上执行客户/服…

人员定位及轨迹管理技术原理及应用领域

人员定位及轨迹管理的实现涉及多种技术和设备。例如&#xff0c;在GPS定位方面&#xff0c;使用卫星系统可以提供全球范围内的准确定位信息。然而&#xff0c;GPS在室内环境下的信号覆盖可能存在限制&#xff0c;因此在室内定位应用中&#xff0c;常常采用无线传感器网络&#…

Python简单的验证码识别: 图片验证, 滑动验证, 点选验证...

目录 前言环境使用:模块使用:代码展示图片验证码滑动验证码:点选验证: 尾语 &#x1f49d; 前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 环境使用: Python 3.8 解释器 Pycharm 编辑器 模块使用: selenium --> pip install selenium3.141.0 ddddocr --> pip i…

springcloud-alibaba (03)sentinel实现规则持久化-流控规则为例

Sentinel和Nacos的整合可以实现规则动态配置&#xff0c;即在Nacos中修改规则后&#xff0c;Sentinel能够实时地读取并应用新的规则。而规则持久化则是指将规则保存在Nacos中&#xff0c;以避免意外故障或重启时规则被丢失。 实现规则持久化&#xff0c;可以按照以下步骤进行操…

龙蜥白皮书精选:利用 io_uring 提升数据库系统性能

文/高性能存储 SIG 01 背景介绍 传统的 IO 软件栈已经无法完全释放出高性能存储设备的性能&#xff0c;高性能 IO 栈是当前存储领域重点研究的课题之一&#xff0c;代表性的如用户态方案 SPDK&#xff0c;以及标准的内核态方案 io_uring。 02 关键技术 Linux 社区从零开始设…

Raft算法

这是一种选举算法&#xff0c;用来确认分布式架构下主节点(领导者)是哪一个结点 只有成为了主节点才能向其他结点进行指令的下达来进行数据的同步 三种角色&#xff1a;追随者Follower&#xff0c;候选人Candidate&#xff0c;领导者leader (1)追随者Follower&#xff1a;接收…

电脑版pdf阅读器有哪些?编辑途径分析

PDF 阅读器电脑版是一种十分流行的电子文档阅读工具&#xff0c;它可以让用户在电脑上轻松地阅读各种文档&#xff0c;包括 PDF 文件。在数字化信息时代&#xff0c;PDF 阅读器电脑版已经成为了许多人电脑上必备的工具之一。本文将探讨 PDF 阅读器电脑版的优缺点&#xff0c;以…

【面试题】面试官:谈谈你知道的DOM常见的操作

大厂面试题分享 面试题库 前后端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;前端面试题库 web前端面试题库 VS java后端面试题库大全 前言 面试官&#xff1a;“谈谈你知道的DOM常见的操作” 紧张的萌新&#xff1a;“可以获…

达梦数据库索引的建立使用

达梦数据库支持聚集索引&#xff0c;复合索引&#xff0c;函数索引&#xff0c;唯一索引&#xff0c;位图索引等等。 一.建立索引的准则 1.1在表中插入数据后创建索引 一般情况下&#xff0c;在插入或装载了数据后&#xff0c;为表创建索引会更加有效率。如果在装载数据之前…

基于最新SolVES 模型与多技术融合【QGIS、PostgreSQL、ARCGIS、MAXENT、R】实现生态系统服务功能社会价值评估及拓展案例分析

目录 第一章 理论基础与研究热点 第二章 SolVES 4.0 模型运行环境配置 第三章 SolVES 4.0 模型运行 第四章 数据获取与入库 第五章 环境变量与社会价值的相关分析 第六章 拓展案例分析 SolVES模型&#xff08;Social Values for Ecosystem Services&#xff09;全称为生态…

功能开发如何实现多终端设备上的体验统一?

多端能力服务统一&#xff08;Multi-Experience Service Orchestration&#xff0c;MESO&#xff09;是一种技术和服务架构的概念&#xff0c;旨在为多种终端设备提供统一的用户体验和功能。它解决了在不同终端设备上使用不同应用程序和服务时出现的问题&#xff0c;使得用户可…