- 博客(83)
- 收藏
- 关注
RSS订阅原创 ES6知识点汇总(5)--Map&Set
forEach()用于对每个成员执行某种操作，没有返回值，键值、键名都相等，同样的forEach方法有第二个参数，用于绑定处理函数的this。在网页的 DOM 元素上添加数据，就可以使用WeakMap结构，当该 DOM 元素被清除，其所对应的WeakMap记录就会自动被移除。Set是es6新增的数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值，我们一般称为集合。不同点：集合是以[值，值]的形式存储元素，字典是以[键，值]的形式存储。Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构。
2023-07-13 10:44:58
728
原创 ES6知识点汇总(4)--函数
上面的foo函数，当参数为对象的时候才能进行解构，如果没有提供参数的时候，变量x和y就不会生成，从而报错，这里设置默认值避免。参数默认值应该是函数的尾参数，如果不是非尾部的参数设置默认值，实际上这个参数是没发省略的。这种语法行为，在不设置参数默认值时，是不会出现的。如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了。一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域。如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
2023-07-07 13:37:20
699
原创 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
254
原创 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
188
原创 JS知识点汇总(十)--事件代理&垃圾回收机制
事件代理（Event Delegation）也称之为事件委托。是JavaScript中常用绑定事件的常用技巧。“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。一个事件触发后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；
2023-07-03 14:22:49
107
原创 JS知识点汇总(九)--字符串
两个都为简单类型，字符串和布尔值都会转换成数值，再比较简单类型与引用类型比较，对象转化成其原始类型的值，再比较两个都为引用类型，则比较它们是否指向同一个对象null 和 undefined 相等存在 NaN 则返回 false。
2023-07-03 10:09:16
113
原创 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
465
原创 JS知识点汇总(七)--数据类型
JS 中有六种简单数据类型：undefined、null、boolean、string、number、symbolES10中的新特性 BigInt (任意精度整数)，目前还处于stage-4阶段，不出意外即将成为js的第七种基本数据类型和第二个数字数据类型。虽然变量的数据类型是不确定的，但是各种运算符对数据类型是有要求的，如果运算子的类型与预期不符合，就会触发类型转换机制强制转换（显示转换）自动转换（隐式转换）
2023-06-30 19:26:39
168
原创 JS知识点汇总(六)--作用域链&this
作用域，即变量（变量作用域又称上下文）和函数生效（能被访问）的区域或集合换句话说，作用域决定了代码区块中变量和其他资源的可见性。
2023-06-30 17:56:04
288
原创 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
158
原创 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
940
原创 CSS知识点汇总(十一)--回流&重绘
当我们对 DOM 的修改导致了样式的变化（color或background-color），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了重绘。当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来。在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变。触发回流一定会触发重绘。
2023-06-29 17:08:52
633
原创 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
1584
原创 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
866
原创 CSS知识点汇总(五)--文本对齐&脱离文档流
什么是 Fouc(文档样式短暂失效)？在引用 css 的过程中，如果方法不当或者位置引用不对，会导致某些页面在 windows 下的 ie 出现一些奇怪的现象，以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效，简称 FOCU。使用 import 方法导入样式表将样式表放在页面底部有几个样式表，放在 html 结构的不同位置当样式表晚于结构性 html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
2023-06-29 11:38:10
1200
原创 CSS知识点汇总(四)--CSS优化方法&垂直居中&雪碧图
但 li 内的字符间隔也会被设置，需要将 li 内的字符间隔设为默认。行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是 100%，行内元素默认 100%宽度占据一行。浏览器的默认行为是把 inline 元素间的空白字符（空格换行 tab）渲染成一个空格，也就是我们上面的代码。换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。内的字符尺寸设为 0，将下面样式放入样式表，就可以解决了.，但是。全部写在一排，空格占一个字符的宽度，直接将。
2023-06-29 11:05:27
211
原创 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
930
原创 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
1124
原创 前端性能优化——页面加载白屏时间长的原因有什么，页面白屏如何优化？
浏览器下载HTML后，首先解析头部代码，进行样式表下载，然后继续向下解析HTML代码，构建DOM树，同时进行样式下载。因为JavaScript 会阻塞 DOM 生成，而样式文件又会阻塞 JavaScript 的执行，所以在实际的工程中需要重点关注 JavaScript 文件和样式表文件，使用不当会影响到页面性能的。JavaScript 会阻塞 DOM 生成，而样式文件又会阻塞 JavaScript 的执行，所以在实际的工程中需要重点关注 JavaScript 文件和样式表文件，使用不当会影响到页面性能的。
2023-06-25 11:05:36
1036
原创 什么是 DOM？DOM树如何生成的？
文档对象模型(Document Object Model)。它提供了对文档结构化的描述,并将HTML页面与脚本、程序语言联系起来。从页面来看，DOM就是生成页面的基本数据结构从JS脚本来看，DOM提供给JS脚本操作的接口，利用该接口，JS就能对DOM结构进行访问，以此来改变文档的结构、样式以及内容。有时，DOM就像一个安全防护栏，某些不安全的内容在DOM的解析阶段就会拦截。
2023-06-25 10:32:52
433
原创 在失误中成长——职场人如何面对工作中的失误呢？
在日复一日的工作中，我们免不了会产生一些失误，会因此感到沮丧和失望。但如何正确地对待和处理这些失误才是最重要的，它直接影响到我们的工作表现和个人成长。一起来谈谈作为职场人的你时如何处理工作中的失误的吧！
2023-06-16 16:23:01
52
vue面试题合集(含参考答案)
2023-07-04
说说你对 SSG 的理解
2023-06-19
大家有推荐的数据结构学习视频嘛
2023-06-09
TA创建的收藏夹 TA关注的收藏夹
TA关注的人