猫老板的豆

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容首屏加载可以说是用户体验中最重要的环节通过或者来计算出首屏时间// 方案一：});

虚拟滚动（也称为窗口化、无限滚动或按需加载）是一种优化技术，用于在大量数据需要渲染到滚动容器中时，仅渲染当前视口（viewport）内可见的部分数据，从而大大提高页面性能。，是一种“轻量级”或“最小”的 Document 对象，它可以包含 DOM 节点，但它本身并不是 DOM 树的一部分。在虚拟滚动中，需要维护一个与视口大小相对应的固定数量的 DOM 元素，并随着用户滚动动态地更新这些元素的内容。的技术来优化性能，只需要渲染少部分区域的内容，减少重新渲染组件和创建 dom 节点的时间。

WebSocket协议是基于TCP协议上的独立的通信协议，在建立WebSocket通信连接前，需要使用HTTP协议进行握手，从HTTP连接升级为WebSocket连接。浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。一旦WebSocket连接建立，服务器和客户端就可以通过发送消息来进行实时通信。这种双向通信机制。Websocket 协议与 HTTP 协议没有关系，它是一个建立在 TCP 协议上的全新协议。

JavaScript 中的 Cookie 是一种用于在浏览器和服务器之间传递数据的机制。它通常用于跟踪用户的会话信息，如登录状态、购物车内容等。

require 和 import 都是用于引入其他模块的关键字，它们的主要目的是为了实现代码的可重用性和模块化。当需要在一个文件中引用另一个文件或模块时，可以使用这两个关键字来实现这个功能。不过，它们之间存在着一些明显的区别。

Axios 是一个功能强大且易于使用的基于 Promise 的 HTTP 客户端库。可以用在浏览器和 node.js 中。这意味着它结合了 Promise 的特性和 HTTP 客户端的功能，为用户提供了一个强大且灵活的工具来发送 HTTP 请求和处理响应。

SPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型，它通过，这种方法。在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者举个例子来讲：就是一个杯子，早上装的牛奶，中午装的是开水，晚上装的是茶。我们发现，变的始终是杯子里的内容，而杯子始终是那个杯子结构如下图我们熟知的JS框架如reactvueangularember都属于SPA。

对于选择器的优先级标签选择器、伪元素选择器：1类选择器、属性选择器、伪类选择器：10id 选择器：100内联样式：1000选择器格式优先级权重id选择器#id100类选择器.class10属性选择器a[ref=“eee”]10伪类选择器div:last-child10标签选择器div1伪元素选择器div:after1相邻兄弟选择器h1+p0子选择器ul>li0后代选择器ul li0

Application Cache 是一种简单的离线缓存机制，但已被废弃，不推荐使用。Service Worker 是更现代、更强大的解决方案，适合实现离线功能和 PWA。如果你正在开发新项目，建议直接使用 Service Worker 来实现离线功能。

一个<script>标签同时使用了async和defer，则执行async，忽略defer。async优先于defer一个<script>标签只使用defer，且，则<script>脚本将在页面完成解析时执行。defer延迟<script>async和defer都不使用，遇到<script>脚本即会马上载入和执行脚本，此时会阻塞页面继续向下解析渲染。(默认同步)只使用async且，则<script>脚本相对于页面的其余部分异步地执行。async异步，<script>和DOM同时加载）

在前端性能优化的方式中，最重要的当然是缓存了，使用好了缓存，对项目有很大的帮助。比如我们访问网页时，使用网页后退功能，会发现加载的非常快，体验感很好，这就是缓存的力量。什么是缓存呢？当我们第一次访问网站的时候，电脑会把网站上的图片和数据下载到电脑上，当我们再次访问该网站的时候，网站就会从电脑中直接加载出来，这就是缓存。缓解服务器压力，不用每次都去请求某些数据了。(减载)提升性能，打开本地资源肯定会比请求服务器来的快。(加速)减少带宽消耗，当我们使用缓存时，只会产生很小的网络消耗,节约宽带(省钱)。

HTML语义化的理解meta标签和的区别link 和 @import 有什么区别defer 和 asyncHTML5离线储存CSS3 新特性CSS选择器和优先级权重CSS 中哪些属性可以继承CSS 预处理器盒子模型居中常见方法BFCflex布局grid布局em 和 rem的区别CSS中position定位三栏布局transition和animation的区别伪元素和伪类字符串 数组处理数据类型检测ES6新特性作用域闭包原型和原型链继承thisPromiseasync 和 await事件循环：宏任务、微任务深

Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验本文通过以下三部分组成：Vue 代码层面的优化、webpack 配置层面的优化、基础的 Web 技术层面的优化；来介绍怎么去优化 Vue 项目的性能。

如果 Vue 组件中的 data 是个对象，那么所有复用这个组件的地方，都在使用这个组件里面唯一的一个 data，所有使用组件的地方的 data 都会指向栈内这一个 data 的地址，那么会造成。等待执行栈和微任务队列都执行完毕才会执行，并且在执行完每一个宏任务之后，会去看看微任务队列有没有新添加的任务，如果有，会先将微任务队列中的任务清空，才会继续执行下一个宏任务。异步：是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程。

1. 利用es6新方法2. 利用递归2.1 利用 some 递归2.2 利用 map 递归2.3 利用 reduce 递归3. 利用 toString4. 利用 join

块级格式化上下文，是用于布局块级盒子的一块渲染区域。MDN上的解释：BFC是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。一个BFC的范围包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个BFC中。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。

手写判断数据类型手写深拷贝手写对象是否全等手写防抖手写节流手写数组扁平化手写数组去重手写new函数手写ajax

/*字符串处理*/vara="Helloworld!"console.log(a.indexOf("e"))//1l的index不存在-1lastIndexOf()console.log(a.search("w"))//6l的index

async/await 是 JavaScript 中用于处理异步操作的一对关键字。它们提供了一种更直观、更易于理解的方式来编写异步代码，使异步代码看起来更像同步代码。

一、Promise 出现的原因在 Promise 出现以前，我们处理一个异步网络请求，大概是这样：// 请求 代表 一个异步网络调用。// 请求结果 代表网络请求的响应。请求1(function(请求结果1){ 处理请求结果1})看起来还不错。但是，需求变化了，我们需要根据第一个网络请求的结果，再去执行第二个网络请求，代码大概如下：请求1(function(请求结果1){ 请求2(function(请求结果2){ 处理请求结果2 })})看起来

三栏布局：两侧宽度固定，中间宽度自适应的公共样式：* { padding: 0; margin: 0; height: 100%;}.left { width: 200px; background-color: aqua;}.right { width: 200px; background-color: burlywood;}.main { background-color: chartreuse;}1. 浮.

jsonp跨域jsonp是一种跨域通信的手段，它的原理其实很简单：利用<script>标签的src属性跨域由于使用script标签的src属性，因此只支持get方法function jsonp(req){ // 动态创建script标签 var script = document.createElement('script'); var url = req.url + '?callback=' + req.callback.name; script.src =

一、获取IP地址IP地址对应一台真实的物理机器，而且IP地址就像人的身份证是唯一的，用户请求服务器，只需要输入为该服务器分配的唯一的IP地址即可。但由于IP地址不便于记忆，因而使用较为语义化的域名来替代IP地址，而且一个域名可能对应了对个IP地址，比如用户输入www.baidu.com,该域名下对应了多个IP，域名解析服务器会根据一定的规则分配给用户其中一个IP地址。首先会在浏览器的缓存中查找，是否缓存了URL，如果有，就直接向该URL对应的服务器发送请求；如果没有则进行下一步;在本地的hosts文

当我们把Array自身的toString()方法删除之后，再次使用它时，由原型链它会向上查找这个方法，即Object的toString()，也便将Object上的toString()方法作用在数组上，得出其数据类型[object Array]这里声明了一个Fn的构造函数，并且把他的原型指向了Array的原型，所以这种情况下，constructor也显得力不从心了。因此，在想要得到对象的具体类型时，应该调用。方法（返回对象的具体类型），所以采用。来判断类型看起来是完美的，然而，方法时，根据原型链的知识，

同时独立的打开同一个窗口同一个页面，sessionStorage 也是不一样的（不同浏览器、同一个页面也是不共享的）。虽然 Web Storage对于存储较少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太有用。的小型文本数据，它由一个名称（Name）、一个值（Value）和其它几个用于控制 cookie有效期、安全性、使用范围的可选属性组成。存储在硬盘上的cookie可以在不同的浏览器进程间共享，比如两个IE窗口。而对于保存在内存的cookie，不同的浏览器有不同的处理方式。

块级元素居中 html代码部分<div class="parent"> <div class="child">child</div></div>行内元素居中 html代码部分<div class="parent"> <span class="child">child</span></div>水平居中01. 行内元素 text-align: center;.parent {

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。只有三种情况会使得元素脱离文档流，分别是：浮动(float)、绝对定位(absoulte)和固定定位(fixed)。属性是否脱离文档流滚动影响定位原点static否跟随滚动无relative否跟随滚动元素本身在文档流中的位置absoulte是跟随祖先容器滚动最近的已定位祖先元素或<html>根元素(受根元素边距影响)fixed是不跟随滚动浏览器视口（viewport）的左上角。

ES6之 let 和 const 关键字ES6之 解构赋值ES6之 扩展运算符ES6之 字符串String新特性ES6之 数值Number新特性ES6之 数组Array新特性ES6之 函数优化(默认参数、剩余参数、 箭头函数)ES6之 PromiseES6之 async/awaitES6之 Class（类）ES6之 Map、Set 和 WeakMap、WeakSetES6之 Module 语法(import 和 export)ES6之 Generator 函数ES6之高阶函数ES6之 for…of 循环

文件中，这样可以把api统一管理起来，以后维护修改只需要在。把封装的方法放在一个。在本地调试的时候，还。

axios不是xhr的子集，axios利用xhr进行了二次封装的请求库，xhr只是axios中的其中一个请求适配器，axios在nodejs端还有个http的请求适配器；axios和vue没关系，axios也不是随着Vue的兴起才广泛使用的，axios本身就是独立的请求库，跟用什么框架没关系；很多小伙伴可能会误以为 Ajax 是发请求的一种方式，或者把 XMLHttpRequest 与 Ajax 划等号，其实这是错误和片面的。，是一个概念模型，它囊括了很多技术，并不特指某一技术，它很重要的特性之一就是。

一、call与apply①function Class2 (){ this.name ='class2'; Class1.apply(this, [name]); //Class2继承 Class1的属性和方法 this的指向改为Class1 //Class1.call(this, name); //Class1.apply(this); /...

prototype（原型）下面的就是原型（也叫显式原型），它是一个对象，我们也称它为原型对象。Person.prototype.say = function () { // 通过原型添加方法// 原型对象say: ƒ(), // 原型上共享的方法，不会反复开辟存储空间，减少内存浪费。上面这个对象，就是大家常说的原型对象。

能够接收一个或多个函数作为参数。可以返回一个函数。Array扩展：forEach、map、reduce、filter、sort 、every 、some 、find 、findIndex。

在 JavaScript 中数据分为基本数据类型（基本类型）和对象数据类型（引用类型）。基本类型StringNumberBooleanNullUndefinedSymbol（ES6）、BigInt（ES11）引用类型Object直接存储在栈(stack)内存中的数据指针存储在栈内存中，值存储在堆(heap)内存中引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

在for循环中绑定事件打印变量i是最后一次，其原因是函数引用的外部变量都是最后一次的值。html lang="en">head> meta charset="UTF-8"> title>Documenttitle> style> #box{ width:100px; height:100px;

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。闭包的特性闭包有三个特性：1.函数嵌套函数2.函数内部可以引用外部的参数和变量3.参数和变量不会被垃圾回收机制回收闭包的定义及其优缺点闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部...

如果要判断一个运行中函数的 this 绑定， 就需要找到这个函数的直接调用位置。找到之后new 调用：绑定到新创建的对象，注意：显示return函数或对象，返回值不是新创建的对象，而是显式返回的函数或对象。call、apply、bind调用：严格模式下，绑定到指定的第一个参数。非严格模式下，null和undefined，指向全局对象（浏览器中是window），其余值指向被new Object()包装的对象。对象上的函数调用：绑定到那个对象。普通函数调用。

三者都可以改变函数的 this 对象指向。三者第一个参数都是 this 要指向的对象，如果如果没有这个参数或参数为 undefined 或 null，则默认指向全局 window。三者都可以传参，但是apply 是数组，而call 是参数列表，且 apply 和 call 是一次性传入参数，而 bind 可以分为多次传入。bind 是返回绑定 this 之后的函数，便于稍后调用；apply 、call 则是立即执行。bind()会返回一个新的函数。

先说结论：for...in 循环出的是 key， for...of 循环出的是 value 。for...of 是 ES6 新引入的特性，修复了 ES5 引入的 for...in 的不足。for...of 不能循环普通的对象，需要通过和 Object.keys() 搭配使用。推荐在循环对象属性的时候使用 for...in ，在遍历数组的时候的时候使用 for...of 。let ...

MapvsObject特性MapObject键类型任意类型（对象、函数等）仅字符串/Symbol顺序性保持插入顺序ES6+ 后按插入顺序但不保证遍历顺序迭代能力可直接迭代（for...of需要转换性能频繁增删键值对时更高效静态键时性能更好默认属性无原型链属性可能继承原型链属性SetvsArray特性SetArray元素唯一性自动去重允许重复元素操作APIadd()delete()push()pop()等查找性能has()时间复杂度O(1)includes()时间复杂度O(n)顺序性。