三分钟学前端-CSDN博客

原创 CSS 实现多行文本展开收起效果极简教程

最终实现效果：本文主要实现难点：如何实现展开和收起切换按钮的文字环绕效果如何实现多行文本溢出省略效果如何实现展开和收起的状态切换初始 html：<div class="text"> <label class="btn">展开</label> <span> 但听得蹄声如雷，十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅，里面玄色布衣，但见人似虎，马如龙，人.

2021-08-17 07:52:24 2502

原创实现元素水平垂直居中的 N 种方式

水平居中1. 行内元素若是行内元素，给其父元素设置 text-align:center 即可实现行内元素水平居中<div class="parent"> <span class="child">测试</span></div><style> .parent { background-color: aqua; text-align: center; /* 水平居中 */ }.

2021-08-16 21:34:43 1517

原创介绍下 BFC 布局规则，除此之外，你还知道哪些 CSS 格式化上下文?

BFC 布局规则什么是 BFC既 Block Formatting Context（块级格式化上下文），是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。BFC 的触发条件Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes,

2021-08-10 05:26:55 276

原创如何解决移动端 Retina 屏 1px 像素问题？

什么导致了 1px 问题？在移动端 Web 开发中，UI 设计稿中设置边框为 1 像素，前端在开发过程中如果出现 border:1px ，测试会发现在 Retina 屏机型中，1px 会比较粗，即是较经典的移动端 1px 像素问题。以 iphone6 为例，iphone6 的屏幕宽度为 375px ，设计师做的视觉稿一般是750px ，也就是 2x ，这个时候设计师在视觉稿上画了 1px 的边框，于是你就写了 border:1px ，so...1px边框问题产生了。对设计师来说它的 1px 是相对于

2021-08-09 07:04:03 541

原创 px、rpx、em、rem 、vw/vh、百分比的区别？

px：绝对长度单位，来描述一个元素的宽高以及定位信息rpx：微信小程序独有的、解决屏幕自适应的尺寸单位em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认16px）em作为字体单位，相对于父元素字体大小；em作为行高单位时，相对于自身字体大小，整个页面内 1em 不是一个固定的值。rem：相对单位，可理解为”root em”，相对根节点html的字体大小来计算，CSS3新加属性，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，.

2021-08-06 07:35:44 1802

原创 CSS 会阻塞 DOM 解析吗？

浏览器的渲染浏览器的渲染流程如下：图：WebKit 主流程图：Mozilla 的 Gecko 呈现引擎主流程（3.6）结合上图，一个完整的渲染流程如下：渲染进程解析 HTML 内容转换为能够读懂的 DOM 树结构，解析 CSS 为 CSSDOM把 DOM 和 CSSOM 结合起来生成渲染树(Render Tree)渲染树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标把渲染树展示到屏幕上。再下一步就是绘制，即遍历渲染树，并使用UI后端层绘制每个节点。值得注意的是：

2021-08-05 08:03:25 1383

原创 position 属性有哪些值，各有什么特点？

positon 定义和用法：position 属性规定元素的定位类型。说明：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。—— 来自 w3schoolposition 有以下可选值：值描述absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top

2021-08-04 06:57:53 2279

原创浅入浅出实现一个异步求和函数

简化：两数之和我们先来简单的实现一个异步两数之和函数function sumT(a, b) { return await new Promise((resolve, reject) => { asyncAdd(a, b, (err, res) => { if(!err) { resolve(res) } reject(err) }) })}

2021-08-03 05:50:51 450

原创 DNS 协议是什么？完整查询过程？为什么选择使用 UDP 协议发起 DNS 查询？

你可能了解 DNS 协议是什么？那你了解 DNS 完整查询过程是什么吗？它底层是基于 TCP 还是 UDP 喃？TCP 与 UDP 又各自负责 DNS 的哪些部分喃？引言本文从以下几个方面循序渐进走进 DNS 协议、它的完整查询过程以及底层是基于 UDP 还是 TCP 实现？DNS 协议是什么？域名结构域名解析缓存优化DNS 查询方式有哪些DNS 完整查询过程为什么选择基于 UDP 协议发起 DNS 查询，而不是 TCP？DNS 协议是什么？DNS（Domain Name Sy.

2021-08-02 07:52:20 1005

原创你真的了解 GET 和 POST 吗，它们的区别是什么？

引言本文从以下几个方面走进 GET 与 POST 的区别：w3school 给出的标准答案从 HTTP 是什么开始，深入 GET 与 POST 请求方法，即两者的本质区别常见的 GET 与 POST 误解POST 方法比 GET 方法安全？POST 方法会产生两个 TCP 数据包？标准答案GET 与 POST 是 HTTP 请求中最常用的两种方法，GET 与 POST 的区别也是老生常谈的问题了，信手拈来GETPOST后退按钮/刷新无害数据会被重新提交（浏览器

2021-07-31 16:53:06 238

原创 HTTP 状态码有哪些？该怎么用？

引言本文从以下几个方面，循序渐进走进 HTTP 状态码状态码用来做什么的常见状态码有哪些容易争论的点状态码用来做什么的HTTP 状态行中使用状态码（Status Code）和原因短语（Reason Phrase）来简单描述请求的结果Version：版本号，例如 HTTP/2Reason：是状态码的简短文字描述，例如“OK”“Not Found”等等，也可以自定义，它其实对状态码的解释说明Status Code：状态码，表示服务器对请求的处理结果这里我们重点介绍状态码，状态码是用

2021-07-30 11:24:32 399

原创 TCP 的三次握手和四次挥手，了解泛洪攻击么

引言TCP 建立连接与断开连接的过程TCP 泛洪攻击（TCP 建立连接过程中的攻击手段）与防护TCP 建立连接与断开连接的过程TCP 三次握手（连接过程）第一次握手客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后，客户端便进入 SYN-SENT 状态。第二次握手服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，发送完成后便进入 SYN-RECEIVED 状态。第三次握手当客户端收到连接同意的应答后，

2021-07-29 22:24:29 638

原创了解 HTTP/1.x 的 keep-alive 吗？它与 HTTP/2 多路复用的区别是什么？

引言本文分为以下三部分循序渐进走进 HTTP/1.x 的 keep-alive 与 HTTP/2 多路复用：HTTP/1.x keep-alive 是什么HTTP/2 多路复用HTTP/1.x keep-alive 与 HTTP/2 多路复用区别下面正式开始吧HTTP/1.x keep-alive在一文走进 TCP 与 HTTP 中，我们介绍过，HTTP 协议是建立在 TCP 协议上的应用层协议， HTTP 协议最初是一个非常简单的协议，通信方式也是采取简答的请求-应答的模式，即：客户端与

2021-07-28 22:33:14 485

原创有关 HTTP 缓存的首部字段说一下

常见的HTTP 缓存首部字段有：Expires：响应头，代表该资源的过期时间Cache-Control：请求/响应头，缓存控制字段，精确控制缓存策略If-Modified-Since：请求头，资源最近修改时间，由浏览器告诉服务器Last-Modified：响应头，资源最近修改时间，由服务器告诉浏览器Etag：响应头，资源标识，由服务器告诉浏览器If-None-Match：请求头，缓存资源标识，由浏览器告诉服务器其中，强缓存：Expires（HTTP/1.0）Cache-

2021-07-27 22:04:14 572

原创如果让你去实现一个 CSRF 攻击你会怎么做？

了解 CSRFCSRF（Cross-site request forgery）跨站请求伪造，是指攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。攻击流程如下：受害者登录 http://a.com ，并保留了登录凭证（Cookie）攻击者引诱受害者访问了 http://b.comhttp://b.com 发送了一个请求： http://a.com/act=xx 。浏

2021-06-04 07:47:32 545

原创说一下 HTTP/3 新特性，为什么选择使用 UDP 协议？

引言本文主要分为以下几个方面循序渐进走进 HTTP/3: HTTP/2 和 TCP 的致命缺陷QUIC 协议为什么选择 UDPQUIC 和 HTTP/3 新特性QUIC 和 HTTP/3 前景发展展望HTTP/2 和 TCP 的缺陷 HTTP/2 使用二进制传输、Header 压缩（HPACK）、多路复用等，相较于 HTTP/1.1 大幅提高了数据传输效率，但它仍然存在着以下几个致命问题（主要由底层支撑的TCP 协议造成）：建立连接时间长队头阻塞问题相较于 HTTP/1.1 更严重.

2021-06-03 05:38:47 407

原创 HTTP/2对比HTTP/1.1，特性是什么？是如何解决队头阻塞与压缩头部的？

引言本文主要通过以下四个方面介绍，循序渐进走进HTTP/2：HTTP/1.1发明以来发生了哪些变化？HTTP/1.1 协议的性能缺陷HTTP/2 新特性HTTP/2 遗留问题HTTP/1.1发明以来发生了哪些变化？近年来，如果你仔细观察那些最流行的网站首页所需要下载的资源的话，会发现一个非常明显的趋势：消息变大：从几 KB 大小的消息，到几 MB 大小的消息；页面资源变多：从每个页面不到 10 个的资源，到每页超 100 多个资源；内容形式变多样：从单纯到文本内容，到图片、视

2021-06-02 07:45:18 816

原创为什么说HTTPS比HTTP安全呢

HTTP 协议HTTP（Hyper Text Transfer Protocol）协议是超文本传输协议的缩写，它是从WEB服务器传输超文本标记语言(HTML)到本地浏览器的传送协议，位于 OSI 网络模型中的应用层HTTP 是一个基于TCP/IP通信协议来传递数据的协议，传输的数据类型为 HTML 文件、图片文件、查询结果等。HTTP协议一般用于 B/S 架构。浏览器作为 HTTP 客户端通过 URL 向 HTTP 服务端即 WEB 服务器发送所有请求。HTTP 特点HTTP 协议支持客户端

2021-06-01 22:04:54 597

原创 http header怎么判断协议是不是websocket

引言首先，解答本题， http 通过判断 header 中是否包含 Connection: Upgrade 与 Upgrade: websocket 来判断当前协议是否要升级到 websocket ，下面我们了解一下 WebSocket 协议与由来WebSocket 由来WebSocket 之前，如果需要在客户端和服务之间双向通信，需要通过 HTTP 轮询来实现， HTTP 轮询分为轮询与长轮询：其中，轮询是指浏览器通过 JavaScript 启动一个定时器，然后以固定的间隔给服务器发请求，询问服

2021-05-31 07:51:37 679

原创一文走进 HTTP 与 TCP 协议，它们的区别与联系

引言本文从以下几个方面走进 GET 与 POST 的区别：w3school 给出的标准答案从 HTTP 是什么开始，深入 GET 与 POST 请求方法，即两者的本质区别常见的 GET 与 POST 误解POST 方法比 GET 方法安全？POST 方法会产生两个 TCP 数据包？标准答案GET 与 POST 是 HTTP 请求中最常用的两种方法，GET 与 POST 的区别也是老生常谈的问题了，信手拈来GETPOST后退按钮/刷新无害数据会被重新提交（浏览器

2021-05-27 08:16:15 579

原创 Promise.prototype.finally 的作用，如何自己实现 Promise.prototype.finally

Promise.prototype.finally() 的作用Promise.prototype.finally() 是 ES2018 新增的特性，它回一个 Promise ，在 promise 结束时，无论Promise运行成功还是失败，都会运行finally ，类似于我们常用的 try {...} catch {...} finally {...} Promise.prototype.finally() 避免了同样的语句需要在 then() 和 catch() 中各写一次的情况new ...

2021-05-25 08:13:25 600

原创 Promise.any 的作用，如何自己实现一个 Promise.any

引言本文从五个方面介绍 Promise.any ：Promise.any 的作用Promise.any 应用场景Promise.any vs Promise.all Promise.any vs Promise.race 手写 Promise.any 实现下面正文开始????Promise.anyPromise.any() 是 ES2021 新增的特性，它接收一个 Promise 可迭代对象（例如数组），只要其中的一个 promise 成功，就返回那个已经成功的 promise如

2021-05-24 05:36:17 1645 1

原创 Promise.allSettled 的作用，如何自己实现 Promise.allSettled

引言本文从四个方面循序渐进介绍 Promise.allSettled ：Promise.all() 的缺陷引入 Promise.allSettled() Promise.allSettled() 与 Promise.all() 各自的适用场景手写 Promise.allSettled() 实现下面正文开始????Promise.all() 的缺陷我们在之前的一篇文章中已经介绍过，当我们使用 Promise.all() 执行过个 promise 时，只要其中任何一个promise失败都会执

2021-05-21 05:59:59 1806

原创监听一个变量的变化，需要怎么做

监听一个变量的变化，当变量变化时执行某些操作，这类似现在流行的前端框架（例如 React、Vue等）中的数据绑定功能，在数据更新时自动更新 DOM 渲染，那么如何实现数据绑定喃？本文给出两种思路：ES5 的 Object.definePropertyES6 的 ProxyES5 的 Object.definePropertyObject.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象 ——MDNObject.define.

2021-05-20 06:44:44 963

原创 var、let、const 的本质区别是什么

引言本文主要介绍 var 、 let 、 const 关键字的含义，并从作用域规则重复声明/重复赋值变量提升（hoisted）暂时死区（TDZ）四个方面对比 var 、 let 、 const 声明的变量差异var在 ES6 之前我们都是通过 var 关键字定义 JavaScript 变量。ES6 才新增了 let 和 const 关键字var num = 1在全局作用域下使用 var 声明一个变量，默认它是挂载在顶层对象 window 对象下（Node 是 global）var

2021-05-19 20:01:24 159

原创 es6 及 es6+ 的能力集，你最常用的，这其中最有用的，都解决了什么问题

我最常用的ES6 的特性是使用最多的，包括类、模块化、箭头函数、函数参数默认值、模板字符串、解构赋值、延展操作符、Promise、let 与 const等等，这部分已经是开发必备了，没什么好说的另外还有：ES7 的 Array.prototype.includes() ES8 的 async/await 、String padding: padStart()和padEnd() 、 Object.values()ES9 的 Rest/Spread 属性、for await of、 Promise.

2021-05-18 07:51:43 346

原创实现颜色转换 ‘rgb(255, 255, 255)‘ -＞ ‘#FFFFFF‘ 的多种思路

仔细观察本题，本题可分为三个步骤：从 rgb(255, 255, 255) 中提取出 r=255 、 g=255 、 b=255将 r 、 g 、 b 转换为十六进制，不足两位则补零组合 # 提取 r、g、b方式一：利用 match利用 match() 方法，读取出 r 、 g 、 b function rgb2hex(sRGB) { const reg = /^(rgb|RGB)$\s*(\d{1,3})\s*,\s*(\d{1,3}\s*),\s*(\d{1,3})\s*$

2021-05-17 06:28:29 1650

原创一道腾讯手写题，如何判断 url 中只包含 qq.com

例如：http://www.qq.com // 通过http://www.qq.com.cn // 不通过http://www.qq.com/a/b // 通过http://www.qq.com?a=1 // 通过http://www.123qq.com?a=1 // 不通过解答：正则function check(url){ if(/\/\/w+\.qq\.com[^.]*$/.test(url)){ return true; }else{ retur

2021-05-16 20:58:29 95

原创讲下 V8 sort 的大概思路，并手写一个 sort 的实现

以上是常见的几种排序算法，首先思考一下， Array.prototype.sort() 使用了上面的那种算法喃？Array.prototype.sort()sort()方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的— MDNconst array = [1, 30, 4, 21, 100000];array.sort();console.log(array);// [1, 100000, 21, 30..

2021-05-13 08:10:13 182

原创由一道bilibili面试题看Promise异步执行机制

var date = new Date() console.log(1, new Date() - date) setTimeout(() => { console.log(2, new Date() - date)}, 500) Promise.resolve().then(console.log(3, new Date() - date)) while(new Date() - date < 1000) {} console.log(4, new Date()

2021-04-29 07:56:50 163

原创什么变量是存储在堆/栈？

什么变量保存在堆/栈中？看到这个问题，第一反应表示很简单，基本类型保存在栈中，引用类型保存到堆中✌️✌️✌️，但仅仅就如此简单吗？我们接下来详细看一看JS 数据类型我们知道 JS 就是动态语言，因为在声明变量之前并不需要确认其数据类型，所以 JS 的变量是没有数据类型的，值才有数据类型，变量可以随时持有任何类型的数据。JS 值有 8 种数据类型：Boolean：有 true 和 falseUndefined：没有被赋值的变量或变量被提升时的，都会有个默认值 undefined Null：只

2021-04-28 07:08:09 1706

原创从页面 A 打开一个新页面 B，B 页面关闭（包括意外崩溃），如何通知 A 页面？

本题是 html 页面通信题，可以拆分成：A 页面打开 B 页面，A、B 页面通信方式？B 页面正常关闭，如何通知 A 页面？B 页面意外崩溃，又该如何通知 A 页面？A 页面打开 B 页面，A、B 页面通信方式据我所知，A、B 页面通信方式有：url 传参postmessage localStorageWebSocketSharedWorkerService Workerurl 传参url 传参数没什么可说的<!DOCT

2021-04-22 08:38:28 229

原创 WeakMap 和 Map 的区别，WeakMap 原理，为什么能被 GC？

垃圾回收机制我们知道，程序运行中会有一些垃圾数据不再使用，需要及时释放出去，如果我们没有及时释放，这就是内存泄露JS 中的垃圾数据都是由垃圾回收（Garbage Collection，缩写为 GC）器自动回收的，不需要手动释放，它是如何做的喃？很简单，JS 引擎中有一个后台进程称为垃圾回收器，它监视所有对象，观察对象是否可被访问，然后按照固定的时间间隔周期性的删除掉那些不可访问的对象即可现在各大浏览器通常用采用的垃圾回收有两种方法：引用计数标记清除####引用计数最早最简单的垃圾回收机制

2021-04-21 08:10:05 163

原创 WeakMap 和 Map 的区别，WeakMap 原理，为什么能被 GC？

垃圾回收机制我们知道，程序运行中会有一些垃圾数据不再使用，需要及时释放出去，如果我们没有及时释放，这就是内存泄露JS 中的垃圾数据都是由垃圾回收（Garbage Collection，缩写为 GC）器自动回收的，不需要手动释放，它是如何做的喃？很简单，JS 引擎中有一个后台进程称为垃圾回收器，它监视所有对象，观察对象是否可被访问，然后按照固定的时间间隔周期性的删除掉那些不可访问的对象即可现在各大浏览器通常用采用的垃圾回收有两种方法：引用计数标记清除####引用计数最早最简单的垃圾回收机制

2021-04-21 08:08:44 99

原创了解词法环境吗？它和闭包有什么联系？

词法环境（Lexical Environment）官方定义官方 ES2020 这样定义词法环境（Lexical Environment）：A Lexical Environment is a specification type used to define the association of Identifiers to specific variables and functions based upon the lexical nesting structure of ECMAScript

2021-04-20 07:36:00 187

空空如也

空空如也