HUANG QING BLOG

天行健,君子以自强不息。地势坤,君子以厚德载物。

JavaScript 中的内存泄漏

RegExp

什么是内存泄漏 内存泄漏是应用程序使用过的内存片段,在不再需要时,不能返回到操作系统或可用内存池中的情况。 四种常见的JavaScript内存泄漏 1:全局变量 JavaScript以一种有趣的方式来处理未声明的变量:当引用未声明的变量时,会在全局对象中创建一个新变量。 2:被遗忘的定时器或回调 3:闭包 JavaScript开发的一个关键方面是闭包。闭包是一个内部函数,可以访...

前端页面渲染方案

CSR、SSR、NSR、ESR

Google不断在推进新的性能相关指标,从原先的Performance API中的指标逐步演进成用户性能体验相关的指标。 对于用户而言,First Paint、First Meaningful Paint和TTI这几个指标可以直接影响到用户体验。 CSR(浏览器渲染):Client Side Rendering 浏览器(Client)渲染顾名思义就是所有的页面渲染、逻辑处理、页...

长列表滚动的优化

有10万条或者更多的数据需要展示在页面中,应该怎样处理页面中长列表滚动的优化 懒加载:即监听scroll事件或使用IntersecionObserver监听 可视区域的渲染:仅在可视区域展示数据,为保证滚动条的完整性,非可视区域使用占位元素的高度后者容器的位移来撑开。 懒加载 懒加载的方式有两种: 监听scroll事件 使用IntersecionObserver监...

多行文本

多行文本溢出显示省略号(...)

单行文本溢出显示省略号 .text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } WebKit浏览器 -webkit-line-clamp:用来限制在一个块元素显示的文本的行数。 .text{ overflow:hidden; text-overflow:ellipsis; ...

居中一个元素

一、水平居中 1.行内元素水平居中 利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。 此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。 .parent{//在父容器设置 text-align:center; } 如果块级元素内部包着也是一个块级元素,我们可以先将其...

微前端架构简介-2

起源 微前端的概念是随着后端微服务的兴起,导致业务团队被分割为不同的小的开发团队,每个团队中有前后端,测试等角色,后端服务间可以通过http或者rpc互相调用,也可以通过api gateway进行接口的集成聚合,随之而来的是希望前端团队也能够独立开发微应用,然后在前端某个阶段(build,runtime)将这些微应用聚合起来,形成一个完整的大型web应用。于是这个概念在2016年thoug...

手写微前端框架 - 基座式

现在微前端模式分很多种,但是大都是一个基座+多个子应用模式,根据子应用注册的规则,去展示子应用。目前的微前端框架基座加载模式的原理,基于single-spa封装了一层 基座搭建,这里使用parcel: yarn init yarn add --dev parcel@next cnpm install -g nodemon cnpm install express 目录结构 -.pa...

SPA单页面路由

SPA vs MPA   单页面应用(SinglePage Web Application,SPA) 多页面应用(MultiPage Application,MPA) 组成 一个外壳页面和多个页面片段组成 多个完整的页面构成 资源共用(j...

正则表达式

RegExp

介绍 ^[0-9]+abc$ ^ 为匹配输入字符串的开始位置。 [0-9]+匹配多个数字, [0-9] 匹配单个数字,+ 匹配一个或者多个。 abc$匹配字母 abc 并以 abc 结尾,$ 为匹配输入字符串的结束位置。 语法 非打印字符 \cx 匹配由x指明的控制字符。例如, \cM 匹配一个 Control-M 或回车符。x 的值必须为 A-Z 或 ...

HTML contenteditable 属性

contenteditable <element contenteditable="true|false"> <p contenteditable="true">这是一个可编辑的段落。</p> contenteditable 光标定位到最后 function keepLastIndex(elem){ var range, ...