自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(83)
  • 收藏
  • 关注

原创 ES6知识点汇总(5)--Map&Set

forEach()用于对每个成员执行某种操作,没有返回值,键值、键名都相等,同样的forEach方法有第二个参数,用于绑定处理函数的this。在网页的 DOM 元素上添加数据,就可以使用WeakMap结构,当该 DOM 元素被清除,其所对应的WeakMap记录就会自动被移除。Set是es6新增的数据结构,类似于数组,但是成员的值都是唯一的,没有重复的值,我们一般称为集合。不同点:集合是以[值,值]的形式存储元素,字典是以[键,值]的形式存储。Set是一种叫做集合的数据结构,Map是一种叫做字典的数据结构。

2023-07-13 10:44:58 723

原创 ES6知识点汇总(4)--函数

上面的foo函数,当参数为对象的时候才能进行解构,如果没有提供参数的时候,变量x和y就不会生成,从而报错,这里设置默认值避免。参数默认值应该是函数的尾参数,如果不是非尾部的参数设置默认值,实际上这个参数是没发省略的。这种语法行为,在不设置参数默认值时,是不会出现的。如果设置了默认值的参数不是尾参数,那么length属性也不再计入后面的参数了。一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域。如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。

2023-07-07 13:37:20 698

原创 ES6知识点汇总(3)--对象

Object.getOwnPropertyNames(obj):回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。Reflect.ownKeys(obj):返回一个数组,包含对象自身的(不含继承的)所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。Object.keys(obj):返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。返回自身的(不含继承的)所有可遍历(enumerable)属性的键名的数组。

2023-07-07 11:29:36 717

原创 ES6知识点汇总(2)--数组

ES6 则是明确将空位转为undefined,包括Array.from、扩展运算符、copyWithin()、fill()、entries()、keys()、values()、find()和findIndex()flatMap()方法对原数组的每个成员执行一个函数相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。flat()默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1。

2023-07-07 11:18:46 617

原创 JS知识点汇总(十四)--事件循环

同步任务进入主线程,即主执行栈,异步任务进入任务队列,主线程内的任务执行完毕为空,会去任务队列读取对应的任务,推入主线程执行,不断重复上述过程就是事件循环。await 会阻塞下面的代码(即加入微任务队列),先执行 async 外面的同步代码,同步代码执行完,再回到 async 函数中,再执行之前阻塞的代码。宏任务的时间粒度比较大,执行的时间间隔是不能精确控制的,对一些高实时性的需求就不太符合。当前宏任务执行完成后,会查看微任务的事件队列,然后将里面的所有微任务依次执行完。Proxy 对象替代)

2023-07-05 18:59:37 253

原创 ES6知识点汇总(1)--var/let/const

对于复杂类型的数据,变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的,并不能确保改变量的结构不变。let 和 const 定义的变量都会被提升,但是不会被初始化,不能被引用,不会像var定义的变量那样,初始值为undefined。在ES5中,顶层对象的属性和全局变量是等价的,用var声明的变量既是全局变量,也是顶层变量。使用var,我们能够对一个变量进行多次声明,后面声明的变量会覆盖前面的变量声明。const声明一个只读的常量,一旦声明,常量的值就不能改变。

2023-07-05 18:53:11 623

原创 JS知识点汇总(十一)--事件模型

javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件、鼠标事件、自定义事件等。如上,当希望为同一个元素绑定多个同类型事件的时候(上面的这个btn元素绑定2个点击事件),是不被允许的,后绑定的事件会覆盖之前的事件。由于DOM是一个树结构,如果在父子节点绑定事件时候,当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流的概念。事件捕获与事件冒泡相反,事件最开始由不太具体的节点最早接受事件, 而最具体的节点(触发节点)最后接受事件。

2023-07-04 15:59:32 187

原创 JS知识点汇总(十)--事件代理&垃圾回收机制

事件代理(Event Delegation)也称之为事件委托。是JavaScript中常用绑定事件的常用技巧。“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素,让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。一个事件触发后,会在子元素和父元素之间传播(propagation)。这种传播分成三个阶段。捕获阶段:从window对象传导到目标节点(上层传到底层)称为“捕获阶段”(capture phase),捕获阶段不会响应任何事件;

2023-07-03 14:22:49 104

原创 JS知识点汇总(九)--字符串

两个都为简单类型,字符串和布尔值都会转换成数值,再比较简单类型与引用类型比较,对象转化成其原始类型的值,再比较两个都为引用类型,则比较它们是否指向同一个对象null 和 undefined 相等存在 NaN 则返回 false。

2023-07-03 10:09:16 109

原创 JS知识点汇总(八)--typeof& instanceof、Object&Map

所以,null 在 typeof 之后返回的是有问题的结果,不能作为判断null的方法。而 typeof 也存在弊端,它虽然可以判断基础数据类型(null 除外),但是引用数据类型中,除了 function 类型以外,其他的也无法判断。可以发现引用类型数据,用typeof来判断的话,除了function会被识别出来之外,其余的都输出object.如果我们想要判断一个变量是否存在,可以使用typeof:(不能使用if(a), 若a未声明,则报错)a表示对象或原始值的表达式,其类型将被返回。

2023-07-02 00:00:09 461

原创 JS知识点汇总(七)--数据类型

JS 中有六种简单数据类型:undefined、null、boolean、string、number、symbolES10中的新特性 BigInt (任意精度整数),目前还处于stage-4阶段,不出意外即将成为js的第七种基本数据类型和第二个数字数据类型。虽然变量的数据类型是不确定的,但是各种运算符对数据类型是有要求的,如果运算子的类型与预期不符合,就会触发类型转换机制强制转换(显示转换)自动转换(隐式转换)

2023-06-30 19:26:39 167

原创 JS知识点汇总(六)--作用域链&this

作用域,即变量(变量作用域又称上下文)和函数生效(能被访问)的区域或集合换句话说,作用域决定了代码区块中变量和其他资源的可见性。

2023-06-30 17:56:04 287

原创 JS知识点汇总(五)--执行上下文

创建阶段,会在代码中扫描变量和函数声明,然后将函数声明存储在环境中。在 ES6 中,词法环境和变量环境的区别在于前者用于存储函数声明和变量( let 和 const )绑定,而后者仅用于存储变量( var )绑定。可以有任意多个函数上下文,每次调用函数创建一个新的上下文,会创建一个私有作用域,函数内部声明的任何变量都不能在当前函数作用域外部直接访问。执行栈,也叫调用栈,具有 LIFO(后进先出)结构,用于存储在代码执行期间创建的所有执行上下文。只有全局上下文(的变量)能被其他任何上下文访问。

2023-06-30 17:36:15 353

原创 JS知识点汇总(四)--闭包&浏览器缓存

若不是某些特定任务需要使用闭包,在其它函数中创建函数是不明智的,闭包会携带包含其它的函数作用域,因此会比其他函数占用更多的内存。一般函数的词法环境在函数返回后就被销毁,但是闭包会保存对创建时所在词法环境的引用,即便创建时所在的执行上下文被销毁,但创建时所在词法环境依然存在,以达到延长变量的生命周期的目的。foo()函数的执行结果返回给bar,而此时变量a仍在使用,还没被销毁,然后执行bar()函数。这个说法来源于MDN-闭包。还有种说法:闭包是指有权访问另外一个函数作用域中的变量的函数。

2023-06-30 16:26:16 154

原创 JS知识点汇总(三)

fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。of 是ES6新增的遍历方式,允许遍历一个含有iterator接口的数据结构(数组、对象等)并且返回各项的值,和ES3中的for…offsetTop 返回的是当前元素相对于其 offsetParent 元素的顶部的距离。clientWidth/clientHeight 返回的是元素的内部宽度,它的值只包含。offsetWidth/offsetHeight 返回的是元素的布局宽度,它的值包含。in 获取的是对象的键名;

2023-06-30 16:23:24 228

原创 JS知识点汇总(二)

从安全性来说,因为每次http请求都会携带cookie信息,浪费带宽,所以cookie应该尽可能少的使用,另外cookie还需要指定作用域,不可以跨域调用(当前页面只能读取页面所在域的 cookie,即 document.cookie ),限制比较多。undefined 在 JavaScript 中不是一个保留字,可以使用 undefined 来作为一个变量名,但不建议这么做,它会影响对 undefined 值的判断。当使用双等号对两种类型的值进行比较时会返回 true,使用三个等号时会返回 false。

2023-06-30 16:04:03 333

原创 JS知识点汇总(一)--数组常用方法

传入三个参数,分别是开始位置,要删除元素的数量,要插入的任意多个元素,返回删除元素的数组,对原数组产生影响。会先创建一个当前数组的副本,然后再把它的参数添加到副本末尾,最终返回新构建的数组,不会影响原始数组。pop() 方法用于删除数组的最后一项,同时减少数组的 length 值,返回被删除的项。shift()方法用于删除数组的第一项,同时减少数组的 length 值,返回被删除的项。传入两个参数,分别是开始位置,删除元素的数量,返回包含删除元素的数组。数组基本操作可以归纳为 增、删、改、查。

2023-06-30 15:26:19 100

原创 HTML知识点汇总(四)

当渲染引擎收到字节流之后,会开启一个预解析线程,用来分析HTML文件中包含的JavaScript、CSS等相关文件,解析到相关文件之后,会开启一个预解析线程,用来分析HTML文件中包含的javascprit、css等相关文件、解析到相关文件之后,预解析线程会提前下载这些文件。搜索引擎是当今规模最大、最复杂的计算系统之一。CSS不会阻塞DOM的解析,但是会影响JAVAScript的运行,javaSscript会阻止DOM树的解析,最终css(CSSOM)会影响DOM树的渲染,也可以说最终会影响渲染树的生成。

2023-06-30 09:52:57 69

原创 HTML知识点汇总(三)

dns-prefetch(DNS预获取)是前端网络性能优化的一种措施。它根据浏览器定义的规则,提前解析之后可能会用到的域名,使解析结果缓存到系统缓存中,缩短DNS解析时间,进而提高网站的访问速度。

2023-06-30 09:45:16 68

原创 HTML知识点汇总(二)

Web浏览器先会把获取到的HTML代码解析成一个DOM树,HTML中的每个标签都是DOM树中的一个节点,包括display: none隐藏的标签,还有JavaScript动态添加的元素等。内的一些节点),因为这些节点不会用于渲染,也不会影响节点的渲染,因此不会包含到渲染树中。渲染树能识别样式,渲染树中每个节点(NODE)都有自己的样式,而且渲染树不包含隐藏的节点(比如display:none的节点,还有。浏览器会获取到所有样式,并会把所有样式解析成样式规则,在解析的过程中会去掉浏览器不能识别的样式。

2023-06-30 09:43:20 56

原创 HTML知识点汇总(一)

渐进增强(progressive enhancement):主要是针对低版本的浏览器进行页面重构,保证基本的功能情况下,再针对高级浏览器进行效果,交互等方面的改进和追加功能,以达到更好的用户体验。优雅降级graceful degradation: 一开始就构建完整的功能,然后再针对低版本的浏览器进行兼容。优雅降级是从复杂的现状开始的,并试图减少用户体验的供给;而渐进增强是从一个非常基础的,能够起作用的版本开始的,并在此基础上不断扩充,以适应未来环境的需要;

2023-06-29 17:32:34 939

原创 CSS知识点汇总(十一)--回流&重绘

当我们对 DOM 的修改导致了样式的变化(color或background-color),却并未影响其几何属性时,浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式,这里就仅仅触发了重绘。当我们对 DOM 的修改引发了 DOM 几何尺寸的变化(比如修改元素的宽、高或隐藏元素等)时,浏览器需要重新计算元素的几何属性,然后再将计算的结果绘制出来。在页面初始渲染阶段,回流不可避免的触发,可以理解成页面一开始是空白的元素,后面添加了新的元素使页面布局发生改变。触发回流一定会触发重绘。

2023-06-29 17:08:52 631

原创 CSS知识点汇总(十)--移动端适配

rem(font size of the root element)是指相对于根元素的字体大小的单位,如果我们设置 html 的 font-size 为 16px,则如果需要设置元素字体大小为 16px,则写为 1rem。设置 viewport 的 width 为 device-width,改变浏览器 viewport(布局视口和视觉视口)的默认宽度为理想视口宽度,从而使得用户可以在理想视口内看到完整的布局视口的内容。页面上所有的元素都得在不同的 @media 中定义一遍不同的尺寸,这个代价有点高;

2023-06-29 16:50:11 1565

原创 CSS知识点汇总(九)--BFC

常见的文档流其实分为定位流、浮动流、普通流三种。

2023-06-29 16:00:40 576

原创 CSS知识点汇总(八)--Flexbox

浏览器根据这个属性,计算主轴是否有多余空间,默认值为auto,即项目的本来大小,如设置了width则元素尺寸由width/height决定(主轴方向),没有设置则由内容决定。flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto,也是比较难懂的一个复合属性。设置的是元素在主轴上的初始尺寸,所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。默认情况是不换行,但这里也不会任由元素直接溢出容器,会涉及到元素的弹性伸缩。

2023-06-29 15:44:55 555

原创 CSS知识点汇总(七)--响应式设计

响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整描述响应式界面最著名的一句话就是“Content is like water”- 同时适配PC + 平板 + 手机等- 标签导航在接近手持终端设备时改变为经典的抽屉式导航- 网站的布局会根据视口来调整模块的大小和位置。

2023-06-29 15:08:55 530

原创 CSS知识点汇总(六)--垂直居中&动画实现方式

你可以 transition: 值1,值2,值3,值4 这样写,也可以:transition-property: 值1;逐帧动画是由关键帧组成,很多个关键帧连续的播放就组成了动画在 CSS3 中是由属性keyframes来完成逐帧动画的。因为 SVG 中保存的是点、线、面的信息,与分辨率和图形大小无关,只是跟图像的复杂程度有关,所以图像文件所占的存储空间通常会比 png 小。Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况,完全通过javascript来渲染控制动画的执行。

2023-06-29 14:24:07 862

原创 CSS知识点汇总(五)--文本对齐&脱离文档流

什么是 Fouc(文档样式短暂失效)?在引用 css 的过程中,如果方法不当或者位置引用不对,会导致某些页面在 windows 下的 ie 出现一些奇怪的现象,以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效,简称 FOCU。使用 import 方法导入样式表将样式表放在页面底部有几个样式表,放在 html 结构的不同位置当样式表晚于结构性 html 加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。

2023-06-29 11:38:10 1197

原创 CSS知识点汇总(四)--CSS优化方法&垂直居中&雪碧图

但 li 内的字符间隔也会被设置,需要将 li 内的字符间隔设为默认。行内块级元素,设置成这个属性的元素会同时拥有行内和块级的特性,最明显的不同是它的默认宽度不是 100%,行内元素默认 100%宽度占据一行。浏览器的默认行为是把 inline 元素间的空白字符(空格换行 tab)渲染成一个空格,也就是我们上面的代码。换行后会产生换行字符,而它会变成一个空格,当然空格就占用一个字符的宽度。内的字符尺寸设为 0,将下面样式放入样式表,就可以解决了.,但是。全部写在一排,空格占一个字符的宽度,直接将。

2023-06-29 11:05:27 210

原创 我的创作纪念日

路虽远行则将至,事虽难做则必成。

2023-06-29 10:25:33 96

原创 CSS知识点汇总(三)--定位&伪类&移动端1px&CSS布局

px 和 em 都是长度单位,区别是,px 的值是固定的,指定是多少就是多少,计算比较容易。em 得值不是固定的,并且 em 会继承父级元素的字体大小。浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。那么 12px=0. 75em, 10px=0. 625em。生成相对定位的元素怒,相对于其在普通流中的位置进行定位。生成绝对定位的元素,相对于浏览器窗口进行定位的。默认值,没有定位,元素出现在正常的流中。CSS3 border-image 属性。fixed (老IE不支持)

2023-06-28 18:43:17 612

原创 CSS知识点汇总(二)--选择器&外边距等

外边距重叠就是 margin-collapse。在 CSS 当中,相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。两个相邻的外边距都是正数时,折叠结果取两者之间较大的。两个相邻的外边距都是负数时,折叠结果取两者绝对值的较大的。两个外边距一正一负时,折叠结果取两者相加之和。

2023-06-28 17:24:25 596

原创 CSS知识点汇总(一)--盒模型&清除浮动&隐藏元素的方法等

两种盒子模型:IE盒模型(border-box)、W3C标准盒模型(content-box)盒模型: 分为内容(content)、填充(padding)、边界(margin)、 边框(border)四个部分;IE盒模型和W3C标准盒模型的区别:(1)W3C标准盒模型:属性width,height只包含内容content,不包含border和padding(2)IE盒模型:属性width,height包含content、border和padding,指的是content。

2023-06-28 17:01:45 152

原创 HTML5是什么

易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。方便其他设备解析,如盲人阅读器根据语义渲染网页有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。标签含义header页眉通常包括网站标志、主导航、全站链接以及搜索框nav标记导航,仅对文档中重要的链接群使用main页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能article。

2023-06-28 15:46:01 927

原创 HTML入门基础知识

什么是HTML?HTML是用来描述网页的一种语言。它指的是超文本标记语言,是一种标记语言,是一套标记。标签HTML使用标记标签来描述网页HTML基本结构如图:title 元素在所有 HTML/XHTML 文档中都是必需的。

2023-06-28 14:41:01 119

原创 说说你对 SSG 的理解

需要注意的是,SSG 不适用于频繁更新的内容和动态交互等场景,由于页面是在构建时生成的,如果需要频繁更新内容,就需要重新构建和部署整个网站。但对于内容较为稳定和更新较少的网站则是一个性能优化的好选择。由于页面是在构建时生成的,如果需要频繁更新内容,就需要重新构建和部署整个网站。SSG(Static Site Generation,静态网站生成))是一种构建静态网站的技术和方法,在构建时预先生成静态页面,并将这些页面部署到 CDN 或者其他存储服务中,以提升 Web 应用的性能和用户体验。

2023-06-25 11:13:24 1115

原创 前端性能优化——页面加载白屏时间长的原因有什么,页面白屏如何优化?

浏览器下载HTML后,首先解析头部代码,进行样式表下载,然后继续向下解析HTML代码,构建DOM树,同时进行样式下载。因为JavaScript 会阻塞 DOM 生成,而样式文件又会阻塞 JavaScript 的执行,所以在实际的工程中需要重点关注 JavaScript 文件和样式表文件,使用不当会影响到页面性能的。JavaScript 会阻塞 DOM 生成,而样式文件又会阻塞 JavaScript 的执行,所以在实际的工程中需要重点关注 JavaScript 文件和样式表文件,使用不当会影响到页面性能的。

2023-06-25 11:05:36 1026

原创 什么是 DOM?DOM树如何生成的?

文档对象模型(Document Object Model)。它提供了对文档结构化的描述,并将HTML页面与脚本、程序语言联系起来。从页面来看,DOM就是生成页面的基本数据结构从JS脚本来看,DOM提供给JS脚本操作的接口,利用该接口,JS就能对DOM结构进行访问,以此来改变文档的结构、样式以及内容。有时,DOM就像一个安全防护栏,某些不安全的内容在DOM的解析阶段就会拦截。

2023-06-25 10:32:52 431

原创 了解IT专业,选对IT专业

高考结束后,放松几天后,就要思考自己该选哪个学校、专业等等做好攻略避免选的不如意。

2023-06-17 17:34:56 396

原创 在失误中成长——职场人如何面对工作中的失误呢?

在日复一日的工作中,我们免不了会产生一些失误,会因此感到沮丧和失望。但如何正确地对待和处理这些失误才是最重要的,它直接影响到我们的工作表现和个人成长。一起来谈谈作为职场人的你时如何处理工作中的失误的吧!

2023-06-16 16:23:01 50

vue面试题合集(含参考答案)

高频vue面试题合集,2023最新经常会被问及的 Vue 面试题,vue面试题看这篇就够了,什么是 mvvm; vue生命周期的理解;计算属性和watch的区别等等

2023-07-04

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除