大家好，我是小杜杜，有关 高性能，大数据量 的列表渲染的示例已经非常常见，可以说是前端必须要了解的功能点，今天我们一起手写一下，看看如何去更好的实现～ 我们知道有些场景下，接口会返回出大量的数据，渲染这种列表叫做 长列表 ,今天主要说下处理 长列表 的两种方式： 分片渲染 和 虚拟列表 ，请各位小伙伴多多支持～ 在正式开始前，希望各位小伙伴牢牢记住： js执行永远要比dom快的多 ，所以对于执行大量的数据，一次性渲染，非常容易造成卡顿、卡死的情况 疑问点 ------ 我们先来看看以下代码： js import React,{ useState } from 'react'; import { Button } from 'antd-mobile'; import img from './img.jpeg' // 子组件 const Item:React.FC<{id: number, waitRender?: () = void} = ({id, waitRender}) = { return ( <div style={{

面试中常问的一个问题就是：在浏览器输入 URL 地址回车后，发生了什么？这里简单概述一下。 总体流程图如下： URL 解析 浏览器首先对 URL 解析，解析出协议、域名、端口、资源路径、参数等。 DNS 域名解析 一般而言，域名比 IP 地址更好记，因而我们更习惯在浏览器输入域名而不是 IP，而计算机网络通信所识别的计算机标识是 IP 地址，因而首先需要将一个域名转化为相应的 IP 地址，这就是 DNS 协议所要做的事。 DNS 就像我们手机中的通讯录一样，通讯录中备注的是对方的姓名（类似于域名），但是打电话的时候实际需要的是电话号码（类似于 IP 地址），利用通讯录将一个姓名转化为对应的电话号码。![图片](https://static.developers.pub/5986109f...

前不久写了一篇关于如何使用 Chrome DevTools [优化高德地图动画](https://link.juejin.cn/?target=http%3A%2F%2Fjartto.wang%2F2017%2F08%2F28%2Fhow-to-optimize-marker-of-AMap%2F "http://jartto.wang/2017/08/28/how-to-optimize-marker-of-AMap/")的文章，其中提到了 composite，但是并没有细谈。思考许久，还是觉得有必要再总结一下。 一、什么是 composite ？ 通俗来说：在 DOM 树中每个节点都会对应一个 LayoutObject，当他们的 LayoutObject 处于相同的坐标空间时，就会形成一个 RenderLayers ，也就是渲染层。 RenderLayers 来保证页面元素以正确的顺序合成，这时候就会出现层合成（composite），从而正确处理透明元素和重叠元素的显示。 一旦加载并解析页面，它就在浏览器中作为许多Web开发人员熟悉的结构来表示：DOM。然而，当呈...

简述 Slardar 前端监控自18年底开始建设以来，从仅仅作为 Sentry 的替代，经历了一系列迭代和发展，目前做为一个监控解决方案，已经应用到抖音、西瓜、今日头条等众多业务线。 据21年下旬统计，Slardar 前端监控（Web + Hybrd) 工作日晚间峰值 qps 300w+，日均处理数据超过千亿条。 本文，我将针对在这一系列的发展过程中，字节内部监控设计和迭代遇到的落地细节设计问题，管中窥豹，向大家介绍我们团队所思考和使用的解决方案。 他们主要围绕着前端监控体系建设的一些关键问题展开。也许大家对他们的原理早已身经百战见得多了，不过当实际要落地实现的时候，还是有许多细节可以再进一步琢磨的。 如何做好 JS 异常监控 JS 异常监控本质并不复杂，...

在早期我们经常听到这样的说法：浏览器是一个沙盒，它不允许我们操作本地文件，但是现在这个说法已经不再适用了，因为我们可以使用 File System Access API 来实现这个功能。 什么是 File System Access API File System Access API 是一项 Web API ，允许 Web 应用程序从用户设备的本地文件系统中读取和写入文件。 它提供了一种简单且安全的方法，让用户在不离开 Web 应用的情况下，从本地文件系统中操作文件。 这项 API 为 Web 应用程序提供了更多的灵活性和功能，使其更接近于本地应用程序的体验。 File System Access API 遵循同源策略，只允许 Web 应用程序在具有相同源的文件系统上进行操作。 当用户使用该 API 时，会提示用户授权应用程序访问他们的文件系统。 如果用户授权，则应用程序可以使用该 API 访问用户选择的文件和目录。 使用 File System Access API 可以访问本地文件系统，从而实现一些有用的功能，...

2021年5月12日， stackblitz 团队在 谷歌 I/O 上提到了一下的内容： 几年前，我们就能感觉到，web 开发正在走向一个关键的拐点。 WebAssembly 和新的 capabilities API 的出现，使得 编写一个基于 WebAssembly 的操作系统 似乎成为可能，该操作系统功能强大到可以 完全在浏览器中运行 Node.js 。 它提供一个比本地环境更快、更安全、更一致的卓越开发环境，以实现无缝代码协作，而无需设置本地环境，这个目标似乎离 Web 开发人员越来越近了。 这项技术在 [ StackBlitz ](https://link.juejin.cn?target=https%3A%2F%2Fstackblitz.com%2F "https://stackblitz.com/") 中的在线 IDE 中可以体验到...

前言 在现在的时代发展中，从以前的手写签名，逐渐衍生出了电子签名。电子签名和纸质手写签名一样具有法律效应。电子签名目前主要还是在需要个人确认的产品环节和司法类相关的产品上较多。 举个常用的例子，大家都用过钉钉，钉钉上面就有电子签名，相信大家这肯定是知道的。 那作为前端的我们如何实现电子签名呢？其实在 html5 中已经出现了一个重要级别的辅助标签，是啥呢？那就是canvas ^[1]^ 。 什么是 canvas Canvas（画布） 是在 HTML5 中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用 JavaScript 操作的 位图（bitmap） 。 Canvas 对象表示一个 HTML 画布元素 -。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。 大白话就是 canvas 是一个可以在上面通过 javaScript 画图的标签，通过其提供的 context(上下文) 及 Api 进行绘制，在这个过程中 canvas 充当画布的角色。 <canvas </canvas

什么是认证（Authentication） 通俗地讲就是验证当前用户的身份，证明“你是你自己”（比如：你每天上下班打卡，都需要通过指纹打卡，当你的指纹和系统里录入的指纹相匹配时，就打卡成功） 互联网中的认证： 用户名密码登录 邮箱发送登录链接 手机号接收验证码 只要你能收到邮箱/验证码，就默认你是账号的主人 什么是授权（Authorization） 用户授予第三方应用访问该用户某些资源的权限 你在安装手机应用的时候，APP 会询问是否允许授予权限（访问相册、地理位置等权限） 你在访问微信小程序时，当登录时，小程序会询问是否允许授予权限（获取昵称、头像、地区、性别等个人信息） 实现授权的方式有：cookie、session、token、OAuth 什么是凭证（Credentials） 实现认证和授权的前提是需要一种媒介（证书） 来标记访问者的身份 在战国时期，商鞅变法，发明了照身帖。照身帖由官府发放，是一块打磨光滑细密的竹板，上面刻有持有人的头像和籍贯信息。国人必须持有，如若没有就被认为是黑户，或者间谍之类的。 在现实生活...

提升首屏的加载速度，是前端性能优化中 最重要 的环节，这里笔者梳理出一些 常规且有效 的首屏优化建议 目标： 通过对比优化前后的性能变化，来验证方案的有效性，了解并掌握其原理 1、路由懒加载 ------------- SPA 项目，一个路由对应一个页面，如果不做处理，项目打包后，会把所有页面打包成一个文件， 当用户打开首页时，会一次性加载所有的资源 ，造成首页加载很慢，降低用户体验 列一个实际项目的打包详情： app.js 初始体积：  1175 KB ...

前言 ---- 巴比伦塔 （希伯来语：מִגְדַּל בָּבֶל，\ \ _Migdal Bāḇēl_ ）也译作 巴贝尔塔 、 巴别塔 ，或意译为 通天塔\ \ ），本是犹太教《塔纳赫·创世纪篇》中的一个故事，说的是人类产生不同语言的起源。在这个故事中，一群只说一种语言的人在“大洪水”之后从东方来到了示拿地区，并决定在这修建一座城市和一座“能够通天的”高塔；上帝见此情形就把他们的语言打乱，让他们再也不能明白对方的意思，并把他们分散到了世界各地。摘自 Wikipedia Tower of Babel\[1\] Babel 是什么 ------------ Babel 官网是这样定义的：Babel is a JavaScript compiler。Babel 是一套解决方案，主要用来把 ECMAScript 2015+ 的代码转化为浏览器或者其它环境支持的代码。它主要可以做以下事情： 语法转换 为目标环境提供 Polyfill 解决方案 源码转换 其它可参考 Videos about Babel\[2\] Babel 的历史 -----

React context 的问题 -------------------- 在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但此种用法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。 当 Context Provider 接收的 value 发生变化的时候，React 会向下深度优先遍历组件树，找到消费了该 Context 的组件并标志为需要更新，在组件更新的 render 阶段，这些消费了该 Context 的组件就会重新渲染，读取到最新的 Context 值。 我们通常传递给 Context Provider 的 value 是一个对象，对象里包含多个字段，然而这种常见的场景却可能导致多次不必要的重复渲染。以下述代码为例： import { createContext, useState, useContext } from "react"; const Cont

背景 ---- 近期，开发 C 端 h5 页面时，发现首页白屏时间比较长，并且用户也多次反映了这个问题，优化这个首屏加载时间是迟早的事，所以在开始优化前先做一些必要的知识储备～ 性能指标 -------- 还在看那些老掉牙的性能优化文章么？这些最新性能指标了解下\[1\] FP & FCP 首次绘制 ，FP（First Paint），这个指标用于记录页面第一次绘制像素的时间。 首次内容绘制 ，FCP（First Contentful Paint），这个指标用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间。 FP 指的是绘制像素，比如说页面的背景色是灰色的，那么在显示灰色背景时就记录下了 FP 指标。但是此时 DOM 内容还没开始绘制，可能需要文件下载、解析等过程，只有当 DOM 内容发生变化才会触发，比如说渲染出了一段文字，此时就会记录下 FCP 指标。因此说我们可以把这两个指标认为是和...

曾经有这么一道经典面试题：从 URL 在浏览器被被输入到页面展现的过程中发生了什么？ 相信大多数准备过的同学都能回答出来，但是如果继续问：收到的 HTML 如果包含几十个图片标签，这些图片是以什么方式、什么顺序、建立了多少连接、使用什么协议被下载下来的呢？ 要搞懂这个问题，我们需要先解决下面五个问题： 1. 现代浏览器在与服务器建立了一个 TCP 连接后是否会在一个 HTTP 请求完成后断开？什么情况下会断开？ 2. 一个 TCP 连接可以对应几个 HTTP 请求？ 3. 一个 TCP 连接中 HTTP 请求发送可以一起发送么（比如一起发三个请求，再三个响应一起接收）？ 4. 为什么有的时候刷新页面不需要重新建立 SSL 连接？ 5. 浏览器对同一 Host 建立 TCP 连接到数量有没有限制？ 第一个问题 ---------- 现代浏览器在与服务器建立了一个 TCP 连接后是否会在一个 HTTP 请求完成后断开？什么情况下会断开？ 在 HTTP/1.0 中，一个服务器在发送完一个 HTTP 响应后，会断开 TCP 链接。但是这样每次请求都会重新建立和断开 TCP 连接，...

提到前端性能优化，我们通常会想到[启用压缩](http://www.yaohaixiao.com/blog/how-to-configure-gzip-compression-with-nginx/)，压缩资源文件大小。或者启用浏览器缓存，可以起到较少 HTTP 请求，优化资源加载速度的效果，但这些手段主要提升重复访问相同资源时的加载速度。默认情况下，浏览器只会先加载 HTML 中声明的资源。如果没有声明，浏览器是不会提前加载资源的。那有没有什么办法能提前加载页面所需资源，优化首次的加载速度呢？ 很幸运，随着 Web 技术的发展，现代的浏览器可以做到提前加载页面所需资源了。使用资源提示伪指令([https://www.w3.org/TR/resource-hints/](https://www.w3.org/TR/resource-hints/))：prefetch 和 preload，可以提前告知浏览器加载资源，从而可以缩短网站的（首次）加载速度，优化页面性能。 什么是\<link rel=”prefetch“\ ？ ------------------------------...