当前位置: 首页 > news >正文

每天10个前端小知识 【Day 17】

在这里插入图片描述

前端面试基础知识题

1.使用原生js实现以下效果:点击容器内的图标,图标边框变成border:1px solid red,点击空白处重置

const box = document.getElementById('box'); 
function isIcon(target) { return target.className.includes('icon'); 
} box.onClick = function(e) { e.stopPropagation(); const target = e.target; if (isIcon(target)) { target.style.border = '1px solid red'; } } const doc = document; 
doc.onclick = function(e) { const children = box.children; for (let i; i < children.length; i++) { if (isIcon(children[i])) { children[i].style.border = 'none'; } }
}

2.相邻的两个inline-block节点为什么会出现间隔,该如何解决?

  • 使用font-size:0
/*类似下面的代码:*/
.space {font-size: 0;
}
.space a {font-size: 12px;
}
  • 使用letter-spacing
/*类似下面的代码:*/
.space {letter-spacing: -3px;
}
.space a {letter-spacing: 0;
}

该方法可以搞定基本上所有浏览器。
这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。

3.分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

结构

display:none: 会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击。
visibility: hidden:不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,不能点击 。opacity: 0: 不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,可以点击。

继承

display: none和opacity: 0:是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示。
visibility: hidden:是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显式。

性能

displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容,性能消耗较大 。visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 。opacity: 0 :修改元素会造成重绘,性能消耗较少。

4.CSS 中有哪几种定位方式?

  • Static

这个是元素的默认定位方式,元素出现在正常的文档流中,会占用页面空间。

  • Relative

相对定位方式,相对于其父级元素(无论父级元素此时为何种定位方式)进行定位,准确地说是相对于其父级元素所剩余的未被占用的空间进行定位(在父元素由多个相对定位的子元素时可以看出),且会占用该元素在文档中初始的页面空间,即在使用top,bottom,left,right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。

  • Absolute

绝对定位方式,脱离文档流,不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位,如果其所有的父级元素都是static定位,那么此元素最终则是以当前窗口作为参考进行定位。

可以使用top,bottom,left,right进行位置移动,亦可使用z-index在z轴上面进行移动。当元素为此定位时,如果该元素为内联元素,则会变为块级元素,即可以直接设置其宽和高的值;如果该元素为块级元素,则其宽度会由初始的100%变为auto。

注意:当元素设置为绝对定位时,在没有指定top,bottom,left,right的值时,他们的值并不是0,这几个值是有默认值的,默认值就是该元素设置为绝对定位前所处的正常文档流中的位置。

  • Fixed

绝对定位方式,直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。
当父元素使用了transform的时候,会以父元素定位。

  • sticky

粘性定位,可以简单理解为relative和fixed布局的混合。

当粘性约束矩形在可视范围内为relative,反之,则为fixed粘性定位元素如果和它的父元素一样高,则垂直滚动的时候,粘性定位效果是不会出现的它的定位效果完全受限于父级元素们。

如果父元素的overflow属性设置了scroll,auto,overlay值,那么,粘性定位将会失效同一容器中多个粘贴定位元素独立偏移,因此可能重叠;位置上下靠在一起的不同容器中的粘贴定位元素则会鸠占鹊巢,挤开原来的元素,形成依次占位的效果。

5.style标签写在body后与body前有什么区别?

页面加载自上而下 当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE下可能会出现FOUC现象(即样式失效导致的页面闪烁问题)。

6.元素竖向的百分比设定是相对于容器的高度吗?

当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如 padding-top , padding-bottom , margin-top , margin-bottom 等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。

7.CSS优化、提高性能的方法有哪些?

  • 避免过度约束
  • 避免后代选择符
  • 避免链式选择符
  • 使用紧凑的语法
  • 避免不必要的命名空间
  • 避免不必要的重复
  • 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
  • 避免!important,可以选择其他选择器
  • 尽可能的精简规则,你可以合并不同类里的重复规则

8.CSS匹配规则顺序是怎么样的?

相信大多数初学者都会认为CSS匹配是左向右的,其实恰恰相反。

CSS匹配发生在Render Tree构建时(Chrome Dev Tools将其归属于Layout过程)。此时浏览器构建出了DOM,而且拿到了CSS样式,此时要做的就是把样式跟DOM上的节点对应上,浏览器为了提高性能需要做的就是快速匹配。

首先要明确一点,浏览器此时是给一个"可见"节点找对应的规则,这和jQuery选择器不同,后者是使用一个规则去找对应的节点,这样从左到右或许更快。但是对于前者,由于CSS的庞大,一个CSS文件中或许有上千条规则,而且对于当前节点来说,大多数规则是匹配不上的,稍微想一下就知道,如果从右开始匹配(也是从更精确的位置开始),能更快排除不合适的大部分节点,而如果从左开始,只有深入了才会发现匹配失败,如果大部分规则层级都比较深,就比较浪费资源了。

除了上面这点,我们前面还提到DOM构建是"循序渐进的",而且DOM不阻塞Render Tree构建(只有CSSOM阻塞),这样也是为了能让页面更早有元素呈现。

考虑如下情况,如果我们此时构建的只是部分DOM,而CSSOM构建完成,浏览器就会构建Render Tree。

这个时候对每一个节点,如果找到一条规则从右向左匹配,我们只需要逐层观察该节点父节点是否匹配,而此时其父节点肯定已经在DOM上。

但是反过来,我们可能会匹配到一个DOM上尚未存在的节点,此时的匹配过程就浪费了资源。

9.grid网格布局是什么?

Grid 布局即网格布局,是一个二维的布局方式,由纵横相交的两组网格线形成的框架性布局结构,能够同时处理行与列。
擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系。
在这里插入图片描述
这与之前讲到的flex一维布局不相同,

设置display:grid/inline-grid的元素就是网格布局容器,这样就能出发浏览器渲染引擎的网格布局算法。

<div class="container"><div class="item item-1"><p class="sub-item"></p ></div><div class="item item-2"></div><div class="item item-3"></div>
</div> 

上述代码实例中,.container元素就是网格布局容器,.item元素就是网格的项目,由于网格元素只能是容器的顶层子元素,所以p元素并不是网格元素。

这里提一下,网格线概念,有助于下面对grid-column系列属性的理解

网格线,即划分网格的线,如下图所示:
在这里插入图片描述

上图是一个 2 x 3 的网格,共有3根水平网格线和4根垂直网格线。

属性

同样,Grid 布局属性可以分为两大类:

容器属性,
项目属性

关于容器属性有如下:

display 属性

文章开头讲到,在元素上设置display:grid 或 display:inline-grid 来创建一个网格容器

display:grid 则该容器是一个块级元素
display: inline-grid 则容器元素为行内元素

grid-template-columns 属性,grid-template-rows 属性

grid-template-columns 属性设置列宽,grid-template-rows 属性设置行高。

.wrapper {display: grid;/*  声明了三列,宽度分别为 200px 200px 200px */grid-template-columns: 200px 200px 200px;grid-gap: 5px;/*  声明了两行,行高分别为 50px 50px  */grid-template-rows: 50px 50px;
}

以上表示固定列宽为 200px 200px 200px,行高为 50px 50px

上述代码可以看到重复写单元格宽高,通过使用repeat()函数,可以简写重复的值。

第一个参数是重复的次数
第二个参数是重复的值

所以上述代码可以简写成

.wrapper {display: grid;grid-template-columns: repeat(3,200px);grid-gap: 5px;grid-template-rows:repeat(2,50px);
}

除了上述的repeact关键字,还有:

  • auto-fill:示自动填充,让一行(或者一列)中尽可能的容纳更多的单元格

grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200
px,但列的数量是不固定的,只要浏览器能够容纳得下,就可以放置元素

  • fr:片段,为了方便表示比例关系

grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为
200px,后面剩余的宽度分为两部分,宽度分别为剩余宽度的 1/3 和 2/3

  • minmax:产生一个长度范围,表示长度就在这个范围之中都可以应用到网格项目中。第一个参数就是最小值,第二个参数就是最大值。

minmax(100px, 1fr)表示列宽不小于100px,不大于1fr

  • auto:由浏览器自己决定长度

grid-template-columns: 100px auto 100px 表示第一第三列为 100px,中间由浏览器决定长度

grid-row-gap 属性, grid-column-gap 属性, grid-gap 属性

grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式
grid-row-gap: 10px 表示行间距是 10px
grid-column-gap: 20px 表示列间距是 20px
grid-gap: 10px 20px 等同上述两个属性

grid-template-areas 属性

用于定义区域,一个区域由一个或者多个单元格组成

.container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas: 'a b c''d e f''g h i';
}

上面代码先划分出9个单元格,然后将其定名为a到i的九个区域,分别对应这九个单元格。

多个单元格合并成一个区域的写法如下

grid-template-areas: 'a a a''b b b''c c c';

复制代码
上面代码将9个单元格分成a、b、c三个区域

如果某些区域不需要利用,则使用"点"(.)表示

grid-auto-flow 属性

划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。

顺序就是由grid-auto-flow决定,默认为行,代表"先行后列",即先填满第一行,再开始放入第二行。

在这里插入图片描述
当修改成column后,放置变为如下:
在这里插入图片描述

justify-items 属性, align-items 属性, place-items 属性

justify-items 属性设置单元格内容的水平位置(左中右),align-items 属性设置单元格的垂直位置(上中下)两者属性的值完成相同。

.container {justify-items: start | end | center | stretch;align-items: start | end | center | stretch;
}

属性对应如下:

  • start:对齐单元格的起始边缘
  • end:对齐单元格的结束边缘
  • center:单元格内部居中
  • stretch:拉伸,占满单元格的整个宽度(默认值)

place-items属性是align-items属性和justify-items属性的合并简写形式

justify-content 属性, align-content 属性, place-content 属性

justify-content属性是整个内容区域在容器里面的水平位置(左中右),align-content属性是整个内容区域的垂直位置(上中下)。

.container {justify-content: start | end | center | stretch | space-around | space-between | space-evenly;align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

两个属性的写法完全相同,都可以取下面这些值:

  • start - 对齐容器的起始边框
  • end - 对齐容器的结束边框
  • center - 容器内部居中

在这里插入图片描述

  • pace-around - 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍
  • space-between - 项目与项目的间隔相等,项目与容器边框之间没有间隔
  • space-evenly - 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔
  • stretch - 项目大小没有指定时,拉伸占据整个网格容器
    在这里插入图片描述

grid-auto-columns 属性和 grid-auto-rows 属性

有时候,一些项目的指定位置,在现有网格的外部,就会产生显示网格和隐式网格

比如网格只有3列,但是某一个项目指定在第5行。这时,浏览器会自动生成多余的网格,以便放置项目。超出的部分就是隐式网格

而grid-auto-rows与grid-auto-columns就是专门用于指定隐式网格的宽高

关于项目属性,有如下:

grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性

指定网格项目所在的四个边框,分别定位在哪根网格线,从而指定项目的位置。

  • grid-column-start 属性:左边框所在的垂直网格线
  • grid-column-end 属性:右边框所在的垂直网格线
  • grid-row-start 属性:上边框所在的水平网格线
  • grid-row-end 属性:下边框所在的水平网格线

举个例子:

<style>#container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;}.item-1 {grid-column-start: 2;grid-column-end: 4;}
</style><div id="container"><div class="item item-1">1</div><div class="item item-2">2</div><div class="item item-3">3</div>
</div>

通过设置grid-column属性,指定1号项目的左边框是第二根垂直网格线,右边框是第四根垂直网格线
在这里插入图片描述

grid-area 属性

grid-area 属性指定项目放在哪一个区域

.item-1 {grid-area: e;
}

意思为将1号项目位于e区域

与上述讲到的grid-template-areas搭配使用

justify-self 属性、align-self 属性以及 place-self 属性

justify-self属性设置单元格内容的水平位置(左中右),跟justify-items属性的用法完全一致,但只作用于单个项目。

align-self属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于单个项目

.item {justify-self: start | end | center | stretch;align-self: start | end | center | stretch;
}

这两个属性都可以取下面四个值。

  • start:对齐单元格的起始边缘。
  • end:对齐单元格的结束边缘。
  • center:单元格内部居中。
  • stretch:拉伸,占满单元格的整个宽度(默认值)

应用场景

文章开头就讲到,Grid是一个强大的布局,如一些常见的 CSS 布局,如居中,两列布局,三列布局等等是很容易实现的,在以前的文章中,也有使用Grid布局完成对应的功能。

关于兼容性问题,结果如下:
在这里插入图片描述

总体兼容性还不错,但在 IE 10 以下不支持;目前,Grid布局在手机端支持还不算太友好。

10.如何使用CSS提高页面性能?

每一个网页都离不开css,但是很多人又认为,css主要是用来完成页面布局的,像一些细节或者优化,就不需要怎么考虑,实际上这种想法是不正确的。
作为页面渲染和内容展现的重要环节,css影响着用户对整个网站的第一体验;
因此,在整个产品研发过程中,css性能优化同样需要贯穿全程。

实现方式

实现方式有很多种,主要有如下:

  • 内联首屏关键CSS
  • 异步加载CSS
  • 资源压缩
  • 合理使用选择器
  • 减少使用昂贵的属性
  • 不要使用@import

内联首屏关键CSS

在打开一个页面,页面首要内容出现在屏幕的时间影响着用户的体验,而通过内联css关键代码能够使浏览器在下载完html后就能立刻渲染。

而如果外部引用css代码,在解析html结构过程中遇到外部css文件,才会开始下载css代码,再渲染
所以,CSS内联使用使渲染时间提前。

注意:但是较大的css代码并不合适内联(初始拥塞窗口、没有缓存),而其余代码则采取外部引用方式。

异步加载CSS

在CSS文件请求、下载、解析完成之前,CSS会阻塞渲染,浏览器将不会渲染任何已处理的内容。
前面加载内联代码后,后面的外部引用css则没必要阻塞浏览器渲染。这时候就可以采取异步加载的方案,主要有如下:

  • 使用javascript将link标签插到head标签最后
// 创建link标签
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
  • 设置link标签media属性为noexis,浏览器会认为当前样式表不适用当前类型,会在不阻塞页面渲染的情况下再进行下载。加载完成后,将media的值设为screen或all,从而让浏览器开始解析CSS
<link rel="stylesheet" href="mystyles.css" media="noexist" οnlοad="this.media='all'">
  • 通过rel属性将link元素标记为alternate可选样式表,也能实现浏览器异步加载。同样别忘了加载完成之后,将rel设回stylesheet
<link rel="alternate stylesheet" href="mystyles.css" οnlοad="this.rel='stylesheet'">

资源压缩

利用webpack、gulp/grunt、rollup等模块化工具,将css代码进行压缩,使文件变小,大大降低了浏览器的加载时间

合理使用选择器

css匹配的规则是从右往左开始匹配,例如#markdown .content h3匹配规则如下:

  • 先找到h3标签元素
  • 然后去除祖先不是.content的元素
  • 最后去除祖先不是#markdown的元素

如果嵌套的层级更多,页面中的元素更多,那么匹配所要花费的时间代价自然更高。
所以我们在编写选择器的时候,可以遵循以下规则:

  • 不要嵌套使用过多复杂选择器,最好不要三层以上
  • 使用id选择器就没必要再进行嵌套
  • 通配符和属性选择器效率最低,避免使用

减少使用昂贵的属性

在页面发生重绘的时候,昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等,会降低浏览器的渲染性能

不要使用@import

css样式文件有两种引入方式,一种是link元素,另一种是@import
@import会影响浏览器的并行下载,使得页面在加载时增加额外的延迟,增添了额外的往返耗时
而且多个@import可能会导致下载顺序紊乱。
比如一个css文件index.css包含了以下内容:@import url(“reset.css”)
那么浏览器就必须先把index.css下载、解析和执行后,才下载、解析和执行第二个文件reset.css

其他

  • 减少重排操作,以及减少不必要的重绘
  • 了解哪些属性可以继承而来,避免对这些属性重复编写
  • cssSprite,合成所有icon图片,用宽高加上backgroud-position的背景图方式显现出我们要的icon图,减少了http请求
  • 把小的icon图片转成base64编码
  • CSS3动画或者过渡尽量使用transform和opacity来实现动画,不要使用left和top属性

总结

css实现性能的方式可以从选择器嵌套、属性特性、减少http这三面考虑,同时还要注意css代码的加载顺序。

相关文章:

每天10个前端小知识 【Day 17】

前端面试基础知识题 1.使用原生js实现以下效果&#xff1a;点击容器内的图标&#xff0c;图标边框变成border:1px solid red&#xff0c;点击空白处重置 const box document.getElementById(box); function isIcon(target) { return target.className.includes(icon); } b…...

Python语言零基础入门教程(二十三)

16、Python os.fpathconf() 方法 概述 os.fpathconf() 方法用于返回一个打开的文件的系统配置信息。 Unix上可用。 语法 fpathconf()方法语法格式如下&#xff1a; os.fpathconf(fd, name)参数 fd – 打开的文件的描述符。 name – 可选&#xff0c;和buffersize参数和Pyt…...

[ansible系列]ansible使用扩展

目录 一. 本地执行 二. 任务委托 三. 任务暂停 四. 滚动执行 五. 只执行一次 六. 设置环境变量 七. 交互提示 一. 本地执行 我们知道ansible的是操作被控端的&#xff0c;所有执行的动作都是在被控端上完成的&#xff0c;当然在某些特定的时候我们想要有些tas…...

Java工具类(时间格式转换)

import java.util.Date; import java.text.DateFormat; /** * 格式化时间类 * DateFormat.FULL 0 * DateFormat.DEFAULT 2 * DateFormat.LONG 1 * DateFormat.MEDIUM 2 * DateFormat.SHORT 3 * author Michael * version 1.0&#xff0c; 2007/03/09 */ public c…...

数据库(第五次作业)

1.1 Redis概述 1.1.1 什么是Redis 2008年&#xff0c;意大利的一家创业公司Merzia推出了一款基于MySQL的网站实时统计系统LLOOGG&#xff0c;然而没过多久该公司的创始人 Salvatore Sanfilippo便开始对MySQL的性能感到失望&#xff0c;于是他决定亲自为LLOOGG量身定做一个数据…...

代码随想录【Day16】| 110. 平衡二叉树、257. 二叉树的所有路径、404. 左叶子之和

110. 平衡二叉树 题目链接 题目描述&#xff1a; 给定一个二叉树&#xff0c;判断它是否是高度平衡的二叉树。 本题中&#xff0c;一棵高度平衡二叉树定义为&#xff1a;一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过1。 示例 1: 给定二叉树 [3,9,20,null,nul…...

套娃式工具!用 AI 识别 AI ?#AI classifier

2022年以来&#xff0c;市面上就出现了不少 AI 生成文本的工具&#xff0c;尤其是 OpenAI 推出的 ChatGPT &#xff0c;不仅能够协助完成撰写邮件、视频脚本、文案、翻译、代码等任务&#xff0c;还能通过学习和理解人类的语言来进行对话&#xff0c;并根据聊天的上下文进行互动…...

CURL error 60: SSL certificate problem: certificate has expired

项目使用guzzleHttp做的一个接口&#xff0c;报错&#xff1a;certificate has expired 因为在linux centos环境与window环境有所不同&#xff0c;在此记录一下解决过程。 目录 报错提示 原因 解决方式 1.去掉guzzlehttp的验证 2.更新CA证书 总结 报错提示 cURL error 60…...

接口自动化:requests

引言&#xff1a;目前软件测试对测试人员的能力要求 业务测试能力&#xff1a;占比5-6成接口、自动化、性能测试能力&#xff1a;占比4-5成流程规范&#xff1a;1成&#xff08;需要综合型的测试人才&#xff09;&#xff1a;业务能力、代码能力、开发思维&#xff08;封装&…...

极简TypeScript教程--数据类型

TypeScript最大的特点就是有类型检测&#xff0c;格式为let/const 标识符: 数据类型 赋值;例子:let msg: string Hello World这样msg这个变量就有了字符串类型,如果再给他赋值为数字类型&#xff0c;就会在编译期报错。变量的类型推导在开发中&#xff0c;有时候为了方便起见…...

JAVA开发测试(jmeter如何测试性能与估算)

对C的业务网站或应用&#xff0c;进行性能测试来评估使用服务器情况是必不可少的一项工作。 一、测试工具&#xff1a; Apache JMeter 可以用于对服务器、网络或对象模拟巨大的负载&#xff0c;来自不同压力类别下测试它们的强度和分析整体性能&#xff0c;是Apache组织开发的…...

【新解法】华为OD机试 - 求解连续数列 | 备考思路,刷题要点,答疑,od Base 提供

华为 OD 清单查看地址:blog.csdn.net/hihell/category_12199275.html 求解连续数列 | 备考思路,刷题要点,答疑,od Base 提供 题目 已知连续正整数数列{K}=K1,K2,K3… Ki的各个数相加之和为S, i = N (0 < S < 100000, 0 < N < 100000), 求此数列K。 输入 输…...

Python3 File(文件) 方法

Python3 File(文件) 方法 open() 方法 Python open() 方法用于打开一个文件&#xff0c;并返回文件对象。 在对文件进行处理过程都需要使用到这个函数&#xff0c;如果该文件无法被打开&#xff0c;会抛出 OSError。 注意&#xff1a;使用 open() 方法一定要保证关闭文件对…...

APP渗透抓包

APP渗透抓包1.APP渗透测试原理2.安装安卓模拟器抓包2.1.安装模拟器2.2.设置代理下载证书2.2.1.burp suite设置代理2.2.2.浏览器设置代理2.2.3.下载证书2.3.模拟器安装证书2.3.1.移动证书2.3.2.证书设置2.4.设置代理2.4.1.设置burp suite代理2.4.2.夜神模拟器代理2.5.抓包测试2.…...

力扣(LeetCode)414. 第三大的数(2023.02.16)

给你一个非空数组&#xff0c;返回此数组中 第三大的数 。如果不存在&#xff0c;则返回数组中最大的数。 示例 1&#xff1a; 输入&#xff1a;[3, 2, 1] 输出&#xff1a;1 解释&#xff1a;第三大的数是 1 。 示例 2&#xff1a; 输入&#xff1a;[1, 2] 输出&#xff1a;2…...

Spring底层

一、什么是Spring&#xff1f;谈谈你对IOC和AOP的理解。Spring&#xff1a; 是一个企业级java应用框架&#xff0c;他的作用主要是 简化软件的开发以及配置过程&#xff0c;简化项目部署环境。Spring的有点&#xff1a;1、Spring低侵入设计&#xff0c;对业务代码的污染非常低。…...

Cache-Control 常见字段

Cache-Control 常见字段 参考&#xff1a;https://blog.csdn.net/qq_41996454/article/details/108644436 Cache-Control 可以在请求头或者响应头中设置&#xff0c;并且可以组合使用多种指令 no-cache 和 no-store 用作控制缓存&#xff0c;被服务器通过响应头 Cache-Contro…...

Flink Checkpoint 中的通用增量Checkpoint

文章目录知识点状态Flink容错恢复周期性的 Checkpoint错误检测 Failure Detected重新调度 Re-scheduling状态恢复 State Recovery通用增量Checkpoint知识点 状态 算子需要记录之前数据处理的中间结果&#xff0c;把中间结果暂时缓存在算子的内部&#xff0c;这就是算子的状态…...

金三银四必看的软件测试面试题宝典,背完offer随便拿

怎么来设计测试方案根据测试需求&#xff08;包括功能需求和非功能性需求&#xff09;&#xff0c;识别测试要点&#xff0c;识别测试环境要求&#xff0c;安排测试轮次&#xff0c;根据项目计划和开发计划做整体的测试安排。 被测试的特性&#xff1a;通过对需求规格说明书进行…...

企业电子招标采购系统源码Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis

一、立项管理 1、招标立项申请 功能点&#xff1a;招标类项目立项申请入口&#xff0c;用户可以保存为草稿&#xff0c;提交。 2、非招标立项申请 功能点&#xff1a;非招标立项申请入口、用户可以保存为草稿、提交。 3、采购立项列表 功能点&#xff1a;对草稿进行编辑&#x…...

扬帆优配“数字经济+实体经济”融合发展,行业增长空间大!

组织以为&#xff0c;数字经济已经逐步成为工业商场和资本商场的共同主题。 2月16日&#xff0c;国家发改委在《求是》杂志发表文章《努力推进经济完成质的有效提升和量的合理增加》。文章指出要加速开展数字经济&#xff0c;加速实施“东数西算”等重大工程&#xff0c;推进数…...

分享82个HTML电脑主机模板,总有一款适合您

分享82个HTML电脑主机模板&#xff0c;总有一款适合您 82个HTML电脑主机模板下载链接&#xff1a;https://pan.baidu.com/s/13DGOCgvbxSksMPwJzi2z0g?pwdl0mi 提取码&#xff1a;l0mi Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 云虚拟主机运营商网站模板…...

.htaccess语法教程

RewriteEngine On RewriteCond %{HTTP_HOST} ^(www\.)?xxx\.com$ RewriteCond %{REQUEST_URI} !^/blog/ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ /blog/$1# 没有输入文件名的默认到到首页 RewriteCond %{HTTP_HOST} ^(w…...

C++ ——多态 下 (图解多态原理、虚函数的再认知)

目录 一、抽象类 1&#xff09;抽象类定义 2&#xff09;抽象类的继承 3&#xff09;抽象类实现多态 4&#xff09;抽象类的好处 二、多态的实现原理 1&#xff09;虚函数的存储方式 2&#xff09;子类中虚函数的存储方式 ① 子类将基类中的虚表原封不动的拷贝到自己的…...

cocos creater 3.x 构建QQ小游戏

一、目前 cocos creater 不支持直接构建QQ小游戏&#xff0c;需要构建成微信小游戏&#xff0c;然后修改成QQ小游戏 二、构建QQ小游戏不能勾选 分离引擎 的选项&#xff0c;勾选分离引擎的选项&#xff0c;需要安装cocos微信小游戏引擎插件&#xff0c;这个插件似乎目前只支持微…...

ArcGIS笔记3_如何编辑、修改和导出散点数据

本文目录前言Step 1 在ArcGIS中添加并显示坐标点Step 2 将坐标数据保存成shp文件Step 3 编辑或修改坐标数据Step 4 导出修改后的数据&#xff1a;法一&#xff1a;通过转换工具导出Step 5 导出修改后的数据&#xff1a;法二&#xff1a;通过dBASE表导出前言 本博文更多针对Arc…...

Computer Graphics From Scratch - Chapter 8

系列文章目录 简介&#xff1a;Computer Graphics From Scratch-《从零开始的计算机图形学》简介 第一章: Computer Graphics From Scratch - Chapter 1 介绍性概念 第二章&#xff1a;Computer Graphics From Scratch - Chapter 2 基本光线追踪 第三章&#xff1a;Computer Gr…...

金三银四”不香了?

“金三银四”不香了&#xff1f; “金三银四”这个词&#xff0c;放在三年前&#xff0c;勾勒的是无数踌躇满志的年轻人涌向职场&#xff0c;大中小企业血液更新与流动的鲜活画面。 尤其是互联网行业&#xff0c;这个在过去20多年里极大改变文化交流方式与商业形态的领域&…...

个人开源PCB开发板列表汇总

个人开源PCB开发板列表汇总✨首先感谢立创EDA的免费打样和立创一起开源的广大网页。 &#x1f530;STC单片机为主控开源PCB开发板列表 &#x1f4cc;STC15F2K60S2开发板&#xff1a;https://oshwhub.com/perseverance51/stc15f2k60s2-ji-tong-ban &#x1f4cc;STC15W408AS系…...

2023美国大学生数学建模竞赛(美赛)思路代码

2023美国大学生数学建模竞赛&#xff08;美赛&#xff09;思路&代码报名时间节点比赛说明问题A&#xff08;数据分析题&#xff09;&#xff1a;收干旱影响的植物群落&#xff08;MCM&#xff09;第一问第二问问题B&#xff08;仿真建模题&#xff09;&#xff1a;重塑马赛…...

旅游类网站建设/八八网

事务主要是针对数据库而言&#xff0c;在Spring中使用一般也是针对数据库。简单来说&#xff0c;就是一系列的事情要么全部完成&#xff0c;要么都不完成。事务有四个性质&#xff0c;即ACID。原子性(Atomicity)&#xff1a;多个事情是作为一个原子发生的&#xff0c;要么同时完…...

豌豆荚app下载 官网/搜索引擎优化岗位

大概快一个月以前&#xff0c;麻雀在公司网络改造中&#xff0c;想把ICS改成NAT模式&#xff0c;结果总是出错&#xff0c;提示网络不能到达。正好他出差在外地&#xff0c;所以请我帮忙用虚机作个实验&#xff0c;看看是什么问题。结果自己一作&#xff0c;问题同麻雀的一模一…...

惠州网站制作策划/百度通用网址

1312321312转载于:https://www.cnblogs.com/ZHONGZHENHUA/p/7043865.html...

深圳专业极速网站建设/郑州聚商网络科技有限公司

这是关于Yelp的实时流数据基础设施系列文章的第二篇。这个系列会深度讲解我们如何用“确保只有一次”的方式把MySQL数据库中的改动实时地以流的方式传输出去&#xff0c;我们如何自动跟踪表模式变化&#xff0c;如何处理和转换流&#xff0c;以及最终如何把这些数据存储到Redsh…...

wordpress密文/李勇seo的博客

课前声明&#xff1a; 1、本分享仅做学习交流&#xff0c;请自觉遵守法律法规&#xff01; 2、搜索&#xff1a;Kali 与编程&#xff0c;学习更多网络攻防干货&#xff01; 3、Kali 与编程每天准时更新&#xff0c;敬请学习和关注&#xff01; 正文部分 一、背景介绍 Metasploi…...

怎么改网站关键词/网站制作维护

PMP的知识点最终是要以考试题的形式出现的&#xff0c;而且PMP考试题量很大&#xff0c;平均只有1分钟做一道题&#xff0c;因此必须通过大量的做题来增加题感。而且做题能最快的检验我们对每个知识点的掌握情况。 加入我们的PMP学习交流丘丘大家庭一起交流学习吧&#xff01;…...