09 2022 档案

强缓存与协商缓存
摘要：缓存 浏览器缓存 是浏览器将用户请求过的静态资源（html、css、js），存储到电脑本地磁盘中，当浏览器再次访问时，就可以直接从本地加载了，不需要再去服务端请求了。 在工作中，将前端代码发布到静态服务器上时，需要对这些静态资源做一些运维配置。 其中设置gzip和缓存必不可少，这两项直接影响到网页性 阅读全文
posted @ 2022-09-30 15:53 笔下洛璃 阅读(247) 评论(0) 推荐(0)
前端性能优化 之 加载性能优化
摘要：前端性能优化，分为两个部分： 加载性能优化 渲染性能优化 本篇随笔介绍加载性能优化。 加载性能优化 本质： 1、减少请求次数 2、减少请求资源的大小 3、网络优化 1、减少请求次数 为什么要减少请求次数？ 答：浏览器能够并行发送请求，但是每次并行发送请求的个数是有限制的，以chrome浏览器为例子： 阅读全文
posted @ 2022-09-30 13:41 笔下洛璃 阅读(470) 评论(0) 推荐(0)
JavaScript异步加载的三种方式——async、defer、动态创建
摘要：async和defer html4.0中定义了defer；html5.0中定义了async。 如果没有defer和async，浏览器会立即加载并执行指定的JS脚本，并不会等待后续载入的文档元素。 如果有async，加载后续文档元素的过程中，将和JS的加载与执行，并行进行（异步）。 如果有defer， 阅读全文
posted @ 2022-09-28 16:01 笔下洛璃 阅读(1015) 评论(0) 推荐(0)
CSS行内元素与块级元素、替换元素与不可替换元素
摘要：行内元素 特点： 不会独占一行，相邻的行内元素会在水平方向上排列，直到一行排不下，才会换行 行内元素设置width、height属性无效，它的宽高主要由内容来决定。 行内元素的margin和padding属性，在水平方向（top和bottom）上生效，垂直方向（left和right）上不生效。 块级 阅读全文
posted @ 2022-09-28 14:58 笔下洛璃 阅读(192) 评论(0) 推荐(0)
CSS属性vertical-align
摘要：一、简介 vertical-align的意思是在垂直方向进行对齐。 它主要对以下属性有效： inline元素 inline-block元素 table-cell元素 ::first-letter 和 ::first-line 取值： baseline | length | percentage | 阅读全文
posted @ 2022-09-28 14:04 笔下洛璃 阅读(431) 评论(0) 推荐(0)
React 组件的生命周期
摘要：生命周期（旧） 组件的生命周期可分成三个状态： Mounting(挂载)：已插入真实 DOM Updating(更新)：正在被重新渲染 Unmounting(卸载)：已移出真实 DOM 挂载阶段： ReactDOM.render()触发，初次渲染。组件挂载的生命周期调用顺序如下： 1、constru 阅读全文
posted @ 2022-09-27 11:28 笔下洛璃 阅读(495) 评论(0) 推荐(0)
React 受控组件和非受控组件
摘要：受控组件 在HTML中，表单元素的标签<input>、<textarea>、<select>等的值改变通常是根据用户输入进行更新。 而在React中，这些输入表单元素的值，应该保存在state中，并且只能由setState()进行更新。比如给表单元素绑定onChange事件，当input状态发生改变 阅读全文
posted @ 2022-09-23 10:43 笔下洛璃 阅读(258) 评论(0) 推荐(0)
JS数据类型 之 Symbol详解
摘要：1、Symbol概述 ES6 引入的一种新的原始数据类型Symbol，表示独一无二的值。 它属于JavaScript语言的原生数据类型之一，其他数据类型是：undefined、null、Boolean、String、Number、Bigint、Object。 使用场景： ES5 的对象属性名都是字符 阅读全文
posted @ 2022-09-23 09:25 笔下洛璃 阅读(1054) 评论(0) 推荐(0)
React 面向组件编程 之 类式组件、组件实例的三大核心属性
摘要：类式组件 import React, { Component } from "react"; export default class App extends Component { render() { return <h2>我是类式组件</h2> } } 创建类式组件，必须继承React.Com 阅读全文
posted @ 2022-09-22 10:13 笔下洛璃 阅读(149) 评论(0) 推荐(0)
React 面向组件编程 之 函数式组件
摘要：简单组件 和 复杂组件 的概念 如果组件有state（状态）属性，就是复杂组件。 如果没有state（状态）属性，就是简单组件。 state、props、refs是组件实例的三大核心属性，在之后会逐一进行详细地讲述，不了解者可以先跳过，之后再来回看下述内容。 函数式组件 function App() 阅读全文
posted @ 2022-09-21 10:00 笔下洛璃 阅读(432) 评论(0) 推荐(0)
防抖和节流
摘要：防抖 概念 某个函数，在某段时间内，无论触发了多少次，都只执行最后的一次。 实现原理 利用定时器 /* * 防抖函数 * @param fn 事件触发的操作 * @param delay 多少毫秒内连续触发事件，不会执行 * @returns {Function} */ function debou 阅读全文
posted @ 2022-09-20 09:32 笔下洛璃 阅读(107) 评论(0) 推荐(0)
JS中new的原理
摘要：面向对象 在了解new的原理之前，先简单地了解一下构造函数和对象。 js可以通过构造函数创建对象： function Test() { } var t = new Test(); 构造函数的首字母大写，以和普通函数区分开。 上述代码中，Test被称为“构造函数” 或者 “类”，Test是t的构造函数 阅读全文
posted @ 2022-09-16 13:39 笔下洛璃 阅读(211) 评论(0) 推荐(0)
ES6之前，JS的继承
摘要：继承的概念 谈到继承，就不得不谈到类和对象的概念。 类是抽象的，它是拥有共同的属性和行为的抽象实体。 对象是具体的，它除了拥有类共同的属性和行为之外，可能还会有一些独特的属性和行为。 打个比方： 人类，就是一个抽象类，假设人类的共同属性是有手、有脚、有嘴巴，共同的行为是说话。 小明，就是一个具体的对 阅读全文
posted @ 2022-09-16 12:42 笔下洛璃 阅读(163) 评论(0) 推荐(0)
原型与原型链详解
摘要：构造函数 与new运算符一起使用在创建对象的语句中的函数。 在ES6之前，我们面向对象都是通过构造函数实现的。我们把对象的公共属性和方法放在构造函数中。 // 创建一个构造函数 function Foo(name, age) { this.name = name; this.age = age; t 阅读全文
posted @ 2022-09-14 13:29 笔下洛璃 阅读(99) 评论(0) 推荐(0)
JS作用域、变量提升和闭包
摘要：作用域 作用域可以理解为JS引擎执行代码的时候，查找变量的规则。 从确定变量访问范围的阶段的角度，可以分为2类，词法作用域和动态作用域。js是词法作用域。 从变量查找的范围的角度，可以分为3类，全局作用域、函数作用域和块级作用域。 词法作用域 词法作用域是在词法分析阶段就确定的作用域，变量的访问访问 阅读全文
posted @ 2022-09-06 09:39 笔下洛璃 阅读(162) 评论(0) 推荐(0)
JS事件循环（event loop）
摘要：事件循环概述 事件循环是用来实现异步特性的。 事件循环中的几个概念： 主线程： 理解为同步任务的先进先出，一旦调用，同步任务就执行。 执行栈： 先入后出的数据结构，一个任务来到栈底就立即执行，然后释放。 任务队列： 包括宏任务队列和微任务队列，当执行栈空的时候，就会从任务队列中，取任务来执行。 宏任 阅读全文
posted @ 2022-09-05 09:25 笔下洛璃 阅读(1440) 评论(0) 推荐(0)
异步编程async/await
摘要：async和await在干什么？ async声明一个函数是异步的，async声明的函数返回值是promise对象。 await只能用在async声明的函数内部，用于等待一个异步方法执行完成。 async的作用 async函数返回的是一个promise对象，在最外层又不能使用await去等待获取其返回 阅读全文
posted @ 2022-09-02 09:39 笔下洛璃 阅读(205) 评论(0) 推荐(0)