优化手段首屏秒开首屏秒开主要可以分为 4 个方法——懒加载，缓存，离线化，并行化。
懒加载懒加载是指在长页面加载过程时，先加载关键内容，延迟加载非关键内容。比如当我们打开一个页面，它的内容超过了浏览器的可视窗口大小，我们可以先加载前端的可视区域内容，剩下的内容等它进入可视区域后再按需加载。
缓存懒加载本质是提供首屏后请求非关键内容的能力，那么缓存则是赋予二次访问不需要重复请求的能力。在首屏优化方案中，接口缓存和静态资源缓存起到中流砥柱的作用。
接口缓存对于不常变的数据可以做本地缓存，比如一些配置接口。同时还可以进行版本号管理，后端返回数据时同时返回版本号，在数据发生变更时（可以使用监听机制），后端将版本号更新。前端请求时携带之前拿到的版本号，如果版本号一致，后端直接返回无变化，不用再查数据库。
静态资源缓存资源长期不变的话，比如 1 年都不怎么变化，我们可以使用强缓存，如 Cache-Control 来实现。具体来说可以通过设置 Cache-Control:max-age=31536000，来让浏览器在一年内直接使用本地缓存文件，而不是向服务端发出请求。
至于第二种，如果资源 ...
做了缓存、CDN、减小包的体积后，从原来的20s提升到1.8s打开页面后，怎么继续优化这1.8s呢？
第 0 步：定位瓶颈（绝对要做，否则优化是瞎打）工具：● Chrome Performance● Lighthouse● WebPageTest● Performance → Main Thread flamechart● Coverage（查看未使用 JS/CSS）
目标：确定 20 秒卡在哪里：
瓶颈类型
症状
资源请求慢
TTFB 高、多个长耗时请求
JS 执行太重
Main Thread 长时间紫色/黄色占满
渲染太重
Layout / Paint 占用大、DOM 数量 > 2000
第三方库超重
bundler 分析显示某库 > 1MB
接口链路慢
多个接口串行、接口慢
→ 输出性能画像（这一步让你在汇报 + 面试里非常加分）。
第 1 阶段：首屏瘦身（把 20 秒变 5 秒）目标：首屏只加载能让用户“看到内容的最少东西”
1.1 拆分首屏渲染（最核心）只渲染可见区域，不加载不展示的模块。
React ...
LCP（Largest Contentful Paint，最大内容绘制）是衡量网页前端性能的重要指标之一，它属于Core Web Vitals中的一个关键指标，用于评估用户加载页面时的体验感受。
LCP的定义LCP指的是页面视口内最大的内容元素（通常是图片、视频或块级文本）的渲染完成时间，从用户发起加载页面到该元素完全显示在屏幕上的时间。
几点关键点
“最大内容元素”是什么？最大内容元素是指占据视口内最大面积的内容块，例如： ○ 一张图片（<img>、背景图等） ○ 一个视频帧 ○ 一个块级的文字段落（<p>、<h1>等）浏览器会根据面积大小动态决定哪个元素是“最大”。
LCP测量的范围是什么？LCP不关心整个页面，而仅限于首次视口的内容，用户滚动后加载的内容不计入。
LCP的本质是哪个时间点？是最大内容元素在屏幕上完成绘制的时间点，而不是绘制多个屏或所有内容的时间。
1234567891011121314151617181920212223242526272829303132<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <button class="btn">开启耗时任务</button> </body> <script> const btn = document.querySelector('.btn') function del ...
首屏加载时间优化的几种解决方案要加速和优化前端首屏渲染，可以考虑以下几个方面：
减少网络请求：通过合并和压缩文件、使用雪碧图或字体图标等技术，减少需要下载的资源数量和大小。延迟加载非关键资源：将非关键资源（如图片、视频）延迟加载，只在用户需要时再进行加载，可以使用懒加载或按需加载的技术。
使用浏览器缓存：设置适当的缓存策略，使得页面资源可以被浏览器缓存起来，减少重复的网络请求。优化代码和文件大小：精简和压缩HTML、CSS和JavaScript文件，删除不必要的代码、注释和空格，以减少文件大小，从而提高加载速度。
异步加载和执行：将JavaScript脚本放在页面底部，或使用异步加载的方式，确保脚本不会阻塞页面的渲染。使用CDN加速：将静态资源部署在内容分发网络（CDN）上，让用户能从离其最近的服务器获取资源，提高访问速度。响应式设计和优化图片：采用响应式布局和媒体查询，根据设备屏幕大小加载合适的布局和图片，避免在移动设备上加载过大的图片。
使用预渲染技术：通过预渲染技术，提前生成首屏内容并存储为静态文件，当用户访问时直接返回，减少服务器渲染时间。
优化关键渲染路径：确保关键渲染路 ...
简单排序算法开始之前，先提供一个JavaScript版本的对数器，供写排序算法测试。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869// 测试的方法function testMethod(arr) { }//正确的方法function rightMethod(arr) { arr.sort((a, b) => a - b);}//随机数组生成器，size为最大长度，value为最大值function generateRandomArray(size, value) { //生成长度随机的数组 let arr = new Array(Math.floor((size + 1) * Math.random())); for (let i = 0; i < arr.length; i++) { ...
页面是浏览器的核心，浏览器中的所有功能点都是服务于页面的，而 Chrome 开发者工具又是工程师调试页面的核心工具，熟练使用它能让你更加深入地了解浏览器内部工作原理。
本篇文章主要聚焦于焦页面的源头和网络数据的接收，这些发送和接收的数据都能体现在开发者工具的网络面板上。
Chrome 开发者工具有很多重要的面板，比如与性能相关的有网络面板、Performance 面板、内存面板等，与调试页面相关的有 Elements 面板、Sources 面板、Console 面板等。你可以在浏览器窗口的右上方选择 Chrome 菜单，然后选择“更多工具–> 开发者工具”来打开 Chrome 开发者工具。
从图中可以看出，它一共包含了 10 个功能面板，包括了 Elements、Console、Sources、NetWork、Performance、Memory、Application、Security、Audits 和 Layers。关于这 10 个面板的大致功能，我做了一个表格，感兴趣的话，你可以详细看下：
简单来说，Chrome 开发者工具为我们提供了通过界面访问或者编辑 DOM 和 ...
JavaScript是一种动态弱类型的语言(运行过程中检查数据类型、支持隐式类型转换)。JavaScript中的数据类型一共有八种：
了解这些类型之后，有三点需要注意一下:
typeof 检测 Null类型，返回object，历史遗留问题，为了兼容老的代码。
Object类型所有key都是字符串(ES6又引入了Symbol类型)，所以加不加引号都可以。如果是数值，会被自动转为字符串。如果键名不符合标识名的条件(比如第一个字符为数字，或者含有空格或运算符)，且也不是数字，则必须加上引号，否则会报错。
前七种类型是原始类型，最后的Object类型是引用类型。二者内存存储方式不同。
1. 内存空间JavaScript 的执行过程中， 主要有三种类型内存空间，分别是代码空间、栈空间和堆空间。代码空间主要是存储可执行代码的，后续会提到，目前重点关注栈空间和堆空间。
栈空间就是之前提过的调用栈，用来存储函数执行上下文。前面文章我们提过：执行一段代码，要先编译，并创建执行上下文，然后再按照顺序执行代码。
12345678function foo() { var a = ' ...
1.DOM树的构建在渲染流水线中，后面的步骤都直接或者间接地依赖于 DOM 结构，所以本节我们继续沿着网络数据流路径来介绍 DOM 树是怎么生成的以及相关的性能优化策略。
1.1 什么是DOM从网络传给渲染引擎的 HTML 文件字节流是无法直接被渲染引擎理解的，所以要将其转化为渲染引擎能够理解的内部结构，这个结构就是 DOM。DOM 提供了对 HTML 文档结构化的表述。在渲染引擎中，DOM 有三个层面的作用：
从页面的视角来看，DOM 是生成页面的基础数据结构。
从 JavaScript 脚本视角来看，DOM 提供给 JavaScript 脚本操作的接口，通过这套接口，JavaScript 可以对 DOM 结构进行访问，从而改变文档的结构、样式和内容。
从安全视角来看，DOM 是一道安全防护线，一些不安全的内容在 DOM 解析阶段就被拒之门外了。简言之，DOM 是表述 HTML 的内部数据结构，它会将 Web 页面和 JavaScript 脚本连接起来，并过滤一些不安全的内容。
1.2 DOM树的生成在渲染引擎内部，有一个叫 HTML 解析器（HTMLParser） 的模块，它的 ...
本文从浏览器角度来告诉你，URL后输入后按回车，浏览器内部究竟发生了什么，读完本文后，你将了解到：
浏览器内有哪些进程，这些进程都有些什么作用
浏览器地址输入URL后，内部的进程、线程都做了哪些事
我们与浏览器交互时，内部进程是怎么处理这些交互事件的
浏览器架构在讲浏览器架构之前，先理解两个概念，进程和线程。
进程（process）是程序的一次执行过程，是一个动态概念，是程序在执行过程中分配和管理资源的基本单位，线程（thread）是CPU调度和分派的基本单位，它可与同属一个进程的其他的线程共享进程所拥有的全部资源。
简单的说呢，进程可以理解成正在执行的应用程序，而线程呢，可以理解成我们应用程序中的代码的执行器。而他们的关系可想而知，线程是跑在进程里面的，一个进程里面可能有一个或者多个线程，而一个线程，只能隶属于一个进程。
大家都知道，浏览器属于一个应用程序，而应用程序的一次执行，可以理解为计算机启动了一个进程，进程启动后，CPU会给该进程分配相应的内存空间，当我们的进程得到了内存之后，就可以使用线程进行资源调度，进而完成我们应用程序的功能。
而在应用程序中，为了满足功能的需要 ...
