xingyu_qie的专栏

Cookie 是存储在用户浏览器中的小块数据，由服务器发送并存储在客户端。每次客户端向服务器发送请求时，浏览器会自动将相关的 Cookie 附加到请求头中。会话管理：如登录状态、购物车等。个性化设置：如用户偏好、主题等。跟踪分析：如用户行为分析、广告跟踪等。Session 是一种在服务器端存储用户数据的机制。Session 数据通常保存在服务器的内存或数据库中，并通过 Session ID 进行关联。

Koa和Express各有优劣，选择哪个框架取决于项目需求和团队偏好。Express适合需要快速开发并集成多种功能的项目，而Koa适合追求灵活性和现代化代码风格的项目。

协议：如httphttps。域名：如。端口：如80（http 默认端口）或443（https 默认端口）。如果两个 URL 的协议、域名和端口都相同，则它们被认为是同源的。和是同源的。和不是同源的（不同的协议）。和不是同源的（不同的域名）。和不是同源的（不同的端口）。浏览器同源策略是 Web 安全的重要基石，尽管有时候它可能会限制开发者的操作，但其存在的主要目的是为了保护用户免受潜在的安全威胁。

WebView 是移动应用中的一个控件，允许开发者在应用中显示 web 内容。简单来说，它相当于一个嵌入在应用中的迷你浏览器。WebView 组件内置于 Android 和 iOS 开发框架中，开发者可以通过相应的 API 来加载和显示网页。在 Android 中，WebView 是 android.webkit.WebView 类的一个实例。在 iOS 中，WebView 是 WKWebView 类的一个实例（在 iOS 8 之前，使用的是 UIWebView 类）。

在微信小程序开发中，与传统的网页开发相比，由于安全性和性能考虑，访问 DOM（文档对象模型）是受限的。然而，微信小程序提供了一些特定的 API，使开发者能够处理和操作视图层，实现丰富的用户交互体验。

在今天的互联网世界中，我们经常听到关于HTTPS和HTTP的术语。它们都是超文本传输协议（HTTP）的变种，但它们之间存在着重要的区别。本篇博客将深入探讨HTTPS与HTTP之间的差异以及为什么HTTPS在现代网络中变得如此重要。

HttpOnly是由微软引入的一个Cookie标志，最初在Internet Explorer 6 Service Pack 1中实现。它的目的是增加Cookie的安全性，防止客户端脚本（如JavaScript等）通过document.cookie API来访问带有HttpOnly标志的Cookie。这种措施主要是为了防止跨站脚本攻击（XSS攻击），因为XSS攻击常常利用恶意脚本来获取用户的Cookie信息，然后进行信息窃取或会话劫持等恶意行为。

需要注意的是，这些措施主要是增加爬虫的抓取难度，并不能完全阻止专业爬虫。因此，综合考虑后端的安全措施和反爬虫策略，以及运营层面的法律和道德约束，是保护网站和应用程序免受恶意爬虫侵害的有效手段。在反爬虫方面，前端开发者可以采取一些措施来增加网站或应用程序的抗爬虫能力，尽管绝对防止爬虫是不可能的，但可以增加爬虫的难度和成本。以下是一些简单的代码片段，演示如何实现这些反爬虫措施的一部分。实际应用中，需要根据具体场景和需求进行更复杂的实现，同时结合后端的安全措施来提高整体的反爬虫效果。

SQL 注入（SQL Injection）是一种代码注入技术，。其主要目的是绕过应用程序的安全措施，访问或操纵数据库中的数据。这种攻击方法可能导致严重的安全漏洞，包括数据泄露数据篡改数据删除。

（Network Hijacking）是一种网络攻击，攻击者通过非法手段劫持网络通信，导致合法用户的数据流被拦截、篡改或重定向到攻击者控制的系统。这种攻击可以在各种网络层面上进行，包括（DNS）劫持、劫持、劫持等。

CSRF（Cross-Site Request Forgery，跨站请求伪造）是一种网络攻击方式，它利用已认证用户在受信任网站上的身份，诱使用户在不知情的情况下执行恶意操作。具体来说，攻击者通过各种方式（如发送恶意链接、在第三方网站上嵌入恶意代码等）诱导用户的浏览器发送未经授权的请求到受信任的网站。这些请求会携带用户的认证信息（如Cookie、Session），从而让受信任的网站误以为是用户本人发起的合法请求。

中间人攻击（Man-in-the-Middle Attack，简称MITM）是一种网络攻击方式，攻击者在通信的双方之间插入自己，并充当中间人，能够拦截、篡改或伪造通信内容。具体来说，中间人攻击通常包括以下几个步骤拦截通信：攻击者通过各种手段（如Wi-Fi嗅探、DNS篡改等）截获通信双方之间的数据流。伪装身份：攻击者伪装成通信的一方，与另一方建立连接，使得双方都认为自己是在与合法的通信对象进行交流。篡改或窃取数据：一旦成功插入通信链路，攻击者可以读取、修改、删除或伪造传输的数据。

意思就是你点击网页的时候，有人劫持你，对没错，劫持你的信息，甚至劫持你的马内，劫持你的理想，劫持你的肉体，劫持你的灵魂。就是这么可怕。

老张昨天下午请假了，我猜他就是面试去了。果不其然，今天来了，问老张：昨天面试如何？很惊讶的问：你怎么知道我面试去了？迫不及待的说：赶紧说说昨天面试的场景，给我分享分享经验。喝口水说，别提了，我一进屋，坐了4位面试官，场景很激烈啊，大有诸葛亮舌战群儒的感觉。

我们在做Vue前端项目的时候，很可能会使用Vuex来做一些状态或者数据管理，希望在一定程度上，不发送网络请求，不经过密集的组件数据传输，也可以达到数据共享的目的。但如果浏览器页面刷新了，Vuex中store里存的数据还存在吗？

操作符在创建对象的过程中，主要负责设置对象的原型链、执行构造函数以及返回新对象。绑定到这个新对象上，并执行构造函数，传递给构造函数的参数也会传递到此函数中。如果构造函数返回一个对象，则返回该对象；否则，返回新创建的对象。如果构造函数显式地返回一个对象，那么这个对象将作为。属性，从而实现新对象继承构造函数的原型方法和属性。否则，返回步骤1中创建的新对象。操作符的实现有助于深入理解它的工作原理。绑定到新创建的对象上，并传递参数给构造函数。创建一个新的空对象，且这个对象的。属性会被设置为构造函数的。

在 Vue.js 中，当组件进入销毁（destroy）阶段时，框架会自动处理很多清理工作。然而，有些资源和事件需要我们手动处理，以避免内存泄漏或其他潜在问题。

前端项目开发绕不开动画这个话题，随着场景与开发者的不同，我们可以总结以下7种实现动画的方式而在说7种方式前，我们其实可以总结一下，基本也就是4种，分别是和。

说脱离文档流之前呢，我们得知道什么是文档流吧。人们常说你脱离组织了，脱离大部队了，你连大部队都没有加入，还脱离个啥呀，是吧。

在前端项目开发中，例如突然来了一个大项目，很可能就需要多人一起开发，领导说了，要快，要快，要快，你们给我快。然后下面大伙就一拥而上，干着干着发现，一更新代码，哎，我写的样式怎么没了？最后一排查发现，张三跟李四的CSS命名一样，有的级别高，有的级别低，然后就有的被覆盖掉了。那么，我们该如何做一些控制，保证CSS样式尽量少一些冲突呢？

我们在前端项目开发中，常常会遇到这种场景，文字显示不下了，内容超出了，但为了有个良好的用户体验，需要把文本内容结尾显示...。

比如你是一名测试，你说自己有5年的电商行业经验，那你从公司离职了，项目你是带不走的，你离职了也不可能在天天给他们点了，给他们提bug了。那你离职了，一定是可以带走一些东西的吧。你说你有几年经验，这恐怕不具有杀伤力。你得去了公司直接上手，直接能够给公司带来的东西。比如，你总结了具有行业性标准的测试用例文档，内容清晰，流程全面，期待值准确而丰富。不管去了哪个公司，业务千变万化，但我这套是具有行业标准的，可以直接用于公司做为标准化的东西。

例如有一个外层DIV元素，设定width为500px，height为300px。然后在其内部添加一个DIV元素，这个时候，内部的DIV元素，如果设定height margin-top padding-top 百分比之后，他们的百分比基准值是什么呢？宽 OR 高 ？比如我们子DIV元素，height设定为30%的话，看一下效果：结论：可以看出，子DIV元素，宽度设定百分比，基准值就是父元素的宽度，高度设定百分比，基准值就是父元素的高度。

最近有粉丝提问了我一个面试中遇到的问题，他说面试的时候，面试官问我：你在以前的项目中封装过组件吗？或者做过npm公共库吗？遇到过什么问题吗？当时自己突然觉得好像没什么可回答的啊，但面试结束想起来，自己在前端开发工作中貌似又在不停的封装东西。但因为没有提前准备这类问题，所以回答的不是很理想。

很多面试官喜欢问这个问题，感觉就像他们公司的拖拽都是自己实现的一样，哈哈，话是这么说，但面试人家要问，我们就掌握一下呗。HTML5 提供了一些原生的拖放（drag and drop）功能，使得开发者可以轻松实现元素的拖动和放置。这些功能主要通过一系列的事件和属性来实现。

说起iconfont，你能想到什么？

什么是HTML，其实慢慢的，相信很多人天天用HTML，但你让他背概念，还真不一定能背下来。我曾经就被问到过这个问题，瞬间让人摸不着头脑，面试题千千万，总有意想不到的问题啊。他是一种超文本标记语言，是构建网站的基石。如果一段好的前端代码，下一个接手代码的人，可以通过HTML标签大概看出来，前任开发者大概是什么意图，做出来的页面是要展现一个大概什么样子的东西。虽然各个浏览器的内核可能不同，但大家支持HTML语义化上，标准还是非常相同的。

虽然面试的时候总是被问到这个问题，但你写代码的时候，真的会想到这个问题吗？时间复杂度，说的当然不是你写的代码执行用了多长时间，而是代码执行语句的次数。

现在许多设备，特别是高分辨率的移动设备（如智能手机、平板电脑和笔记本电脑），都具有高像素密度的屏幕。这种高像素密度意味着相同物理尺寸的屏幕上包含了更多的像素，使得显示更加细腻和清晰。时，我们实际上在谈论屏幕像素密度，即每英寸的像素数。这个属性告诉我们在一个设备上的一个CSS像素对应多少物理像素。还可以帮助我们优化网页性能，例如减少在高分辨率屏幕上不必要的图形渲染，从而提高用户体验。的值通常是一个浮点数，表示设备上的物理像素与CSS像素的比率。属性，从而在运行时获取设备的像素比率。在响应式网页设计中，了解。

前端开发逃避不开跨页面通信这项工作，，就好比A页面要和B页面说话，可能只是说一句话，不需要回话，可能是要给一些东西，希望得到回复，并频繁进行沟通，接下来我们说说这些跨页面通信的方案们，希望对你有所帮助。

let mySet = new Set([1, 2, 3, 1, 3, "我们", "nimen", "我们"]);console.log('定义的mySet长什么样？', mySet);

问题：请你实现一个等待函数，例如先打印“吃早饭”，休眠2秒钟，再打印“吃午饭”，再休眠2秒钟，打印“吃晚饭”的代码。

在说 JSON.stringify() 深拷贝之前，我们先说一说深拷贝和浅拷贝的事情吧。

更像是坐电梯，早上眼看9点了，都着急坐电梯上去打卡，但眼看电梯要关了，进来一个人，等几秒，这几秒钟进来人他不关，几秒后他就关。眼看电梯要上去了，要关了，又有人按了一下，又等几秒。要不老有人着急按下那个“—>

说起Vue3的改进，很多人都会说出响应式的改变，与Vue2相比，Vue3采用了的方式对响应式做了重写，而Vue2则是采用的方式将对象的属性进行深度遍历，而这种方式想要实现响应式的前与后，就需要给每个属性添加和。但Vue3做了改进，通过使用proxy的方式，则不需要深度遍历了，他实现了删除属性的监听数组索引的监听以及动态属性添加的监听。这些我发现很多人都是可以回答出来的，但这些回答远远是不够的，下面我们说一些在面试中需要更丰富的回答。1 源码体积有所减少。

Promise最早考的是ES6的知识点，到后来，ES7的async/await了，到后来ES8了，很多面试官估计也快要吐了，都按ES6来问吧。一直到现在的面试，越来越疯狂了，前几年还问，ES6啥啥啥的，现在都快ESX了，真是像某家手机厂商一样，编号一年增长好几个数字。如果你想在一个方法内使用await，让上一步走完，这一步的代码再执行，那么你就需要在方法定义的时候加上async，否则会报错。可以的，不会报错，直接运行，但这样也就失去了await，一步一卡的效果。而await的返回，

这两个都是JavaScript里的知识点，在开发中，经常会有一些单词，通过他们的首字母形成一个新的看似单词其实又不是单词的玩意。他们都是用来描述浏览器的特定的对象模型的。

webpack打包优化主要的思想就是合理利用浏览器缓存、减小代码体积以及减少HTTP请求数量。尽管我们在开发阶段已经做了大量的优化工作，但开发阶段难免存在疏忽，而且源代码也不能直接部署到服务器。可以说开发阶段与webpack打包阶段的优化都很重要，相辅相成。接下来我们看一下webpack都可以帮我们做哪些性能优化相关的工作。

而且大多数需求场景下，前端也很少有一次性要展示上万条数据的情况，所以如果前端遇到这种情况的话，应该尽量与服务端做接口协调，改为分页请求的方式。以上这些加载方式，虽然都做了数据的分块处理，但前端处理页面毕竟加载的是各种各样的DOM元素，而非生硬的数据，这也就避免不了大量DOM创建与插入的操作，这些操作对于浏览器渲染而言是非常昂贵的。所以我们需要在加载过程中，提前对下一批数据做DOM片段转换的工作，等需要加载这一批数据的时候直接将转换好的DOM片段追加进来就可以，尽量减少对DOM元素的操作。

而在下载之前，就需要知道文件部署的服务器在哪里，几乎所有的Javascript文件地址都是采用网络协议加域名的形式，而非网络协议加IP地址的形式，所以浏览器下载Javascript文件之前非常重要的一件事就是，对域名做DNS解析，从而获得域名对应的IP地址。不过需要注意的是，dns-prefetch预解析针对的是跨域Javascript文件，也就是说Javascript文件的域名与当前网站访问的域名是不同的，才会有效果。如果你已经掌握了本小节的知识点，那么面试官很可能还会提出以下问题，例如你。