flying meng的菜鸟居

HTTP Cookie（也叫 Web Cookie或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。Session 代表着服务器和客户端一次会话的过程。Session 对象存储特定用户会话所需的属性及配置信息。这样，当用户在应用程序的 Web 页之间跳转时，存储在 Session 对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。当客户端关闭会话，或者 Session 超时失效时会话结束。

单页面应用程序将所有的活动局限于一个Web页面中，在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成，单页面应用不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。

在有了基础做保障之后的面试确实是提升自己扩展视野的绝好手段。面试官的问题可能会让你眼前一亮或者你知道但是压根没有联系到一起过。而这些可能是对于工作非常有帮助的。面试官：“请实现一个数组去重？”我：“有什么特别的要求吗？”面试官：“没有。”我：let newArr = [...new Set(arr)];面试官：“…能换一种方式吗？用原生的、es5的方式实现？”我：function unique(arr) { if (!Array.isArray(arr)) { .

前两天在写原生上传文件时用到了input的 type="file" 按钮，写完以后就感觉别扭的一批：这玩意自己的样式实在难看，但是它又不支持自定义样式。最后“灵光一现”，想到：可以设置其透明度为 opacity: 0; 然后拿其他的标签覆盖上去：比如 input type="text" 、比如 div、比如 label 。。。最近正好在搞这个“图片上传”、“压缩”的事情：H5以后，input就支持了accept —— 选择文件类型，还有一些值比如...

今天面试官问的我这个问题，说实话，我当时懵逼了。我第一个想法竟然是：嘶~这问题挺简单的啊，不就是用 Date 对象判断是否大于某个时间差么？于是写出了下面这段代码：let rest=function(){ // 开始是放在外面的，但是面试官说要尽可能不单独暴露值，于是鬼迷心窍（紧张）杀都没想就直接扔进来了... let date=Date.now(); return new Promise((resolve,reject)=>{ let _date=Date.now(); if(_d

首先要明确几个概念：这三个的诞生源于“HTTP是一个无状态的协议”；session是保存到服务端的，而cookie是保存到客户端的（通常说“cookie是实现session的一种方案”或者说“cookie是客户端保存session的载体”）；token和前两者不同；session和cookie其目的是在http的无状态性下，为了使某个域名下的所有网页能够共享某些数据产生的一种手段。它们在客户端对服务端的访问中的运作方式如下：客户端发送的请求在被服务器端接受后，会在服务端建立一个sessi

本文要说的就是跟「数据改变」有关的两个API —— 其中最先出场的当然是 Object.defineProperty ，它有着“悠久的历史”；而自es6后，Vue3的使用让 proxy 越来越火，他们之间也算各有优势吧：Object.defineProperty？其实这个API主要是用来设置对象属性的可访问性！现在常用的“添加/删除属性”就是基于“对象属性设置了可写可操作”的前提下。以前看过一道面试题，大意就是：“你能模拟let和const吗？他们有什么不同之处？” 它们有何不同？那无疑就是 变量是

为什么说“通常情况下1em=16px”？用户的浏览器默认渲染的文字大小是“16px”，换句话说，Web页面中“body”及其子元素的文字大小在用户浏览器下默认渲染是“16px”。我们都知道：em（和 rem ）是一个相对单位！“相对”的意思是：相对的计算必然会一个参考物，那么这里相对所指的是相对于元素父元素的font-size。比如说：如果在一个 div 设置字体大小为“16px”，此时这个 div 的后代元素教程了是将继承他的字体大小，除非重新在其后代元素中进行过显示的设置。如果用户通过浏览器的

什么是哈希表？哈希表也叫散列表，它是基于数组的。这间接带来了一个优点：查找的时间复杂度为 O(1)、当然，它的插入时间复杂度也是 O(1)。还有一个缺点：数组创建后扩容成本较高。哈希表中有一个“主流”思想：转换。一个重要的概念是将「键」或「关键字」转换成数组下标。这由“哈希函数”完成。什么是哈希函数？由上，其作用就是将非 int 的键/关键字转化为 int 的值，使可以用来做数组下标。比如，HashMap 中就这样实现了哈希函数：static final int hash(Object key)

最近使用Ajax，发现API中 open() 的第三个参数（是否同步执行）中的false值被禁用了？在console中可以看到，虽然能正常发送请求：但是并不会正常执行 onreadystatechange 回调函数中的语句：这也就意味着：ajax只能支持异步模式了！这当然是好事：因为发送一个同步请求会让浏览器进入暂时性的假死状态，特别是请求需要处理大量数据、长时间等待的接口。这会导致“失败”的用户体验。前两天被淘系电面时面试官问了我一个问题：在你做过的项目中如果需要发送多个请求获取不同数据而

当你 new 一个构造函数时发生了什么？“众所周知”的三步：创建一个空对象，将它的引用赋给 this，继承函数的原型；通过 this 将属性和方法添加至这个对象；最后返回 this 指向的新对象，也就是实例。一般来说大概是这样的：function Mynew(parent,...rest){ let obj={}; obj.__proto__=parent.prototype; let res=parent.apply(obj,rest); return typeof res=="o

我们大概经常能听到“执行环境”、“作用域”、“原型（链）”、“执行上下文”等内容，它们都在描述什么？JS代码的运行我们知道了js是弱类型语言，在运行时才确定变量类型。js引擎在执行js代码时，也会从上到下进行 词法分析、语法分析、语义分析 等处理，并在代码解析完成后生成AST（抽象语法树），最终根据AST生成CPU可以执行的机器码并执行。除此之外，JS引擎在执行代码时还会进行其它处理，如 V8 中还有两个阶段：编译阶段：该阶段会进行执行上下文的创建，包括创建变量对象、建立作用域链、确定 this

说到中间件，很多开发者都会想到 Koa.js，其中间件设计无疑是前端中间件思想的典型代表之一。最近重新温习这部分内容，按奈不住想要和各位看官聊聊其中绝妙！Koa用起来非常方便——比之express，它“完美中间件”的设计让功能之间看起来非常简洁！笔者在项目中就曾这样使用过：const Koa=require('koa')const app=new Koa()const Router=require('koa-router')const router=new Router()const cor

我们都知道 “输入 url 并回车后” 或者说 “向服务端发请求” 浏览器并不是直接将请求内容送达服务端，这里有一步 “url解析，进行 dns 查找 ip 地址” 的过程：如果你对这张图有一点不解，那么请看下面这张图：显然我们应该将目光放在这里！DNS优化DNS也是有缓存的 —— 如果之前你解析过这个域名，会在本地/某个dns服务器上有缓存（一定时间内）。DNS解析有三种方法：递归查询：客户端向DNS服务器A查询，A向B查询、B向C查询。C将结果返回给B、B将结果返回给A，A将结果返回给

图片渲染优化以前谈过许多次图片问题。也给出了几种方案。在实际使用中这几种无疑是可行而且方便的：loadingconnection API + promise.all()异步加载图片骨架屏懒加载 + 占位图但是在电商场景下，第一种方案是不可以的：我们不能为了一张图片而放弃整个内容对用户的正常展现。（尤其是这个图片还只是个背景图）第二种方案在首页是有奇效的，但是笔者觉得限制太多 —— 如果对于“通用型”的方案来说，骨架屏似乎更适合中大型项目。这个方案当时提出的场景是：在我校的实验系统首页会有

继承在各种编程语言中都充当着及其重要的角色，由于JavaScript“天生”的灵活性，使得JS在一些场景下急需一种可复用、规范性的解决方法，继承就这么自然而然的出现在了大众的视野当中。随着不断的深入学习JavaScript，突然在某一天发现了好像很多人用于“继承”功能的代码是不同的，那么就有两个问题需要我们回答 ——JS 的继承到底有多少种实现方式？ES6 的 extends 关键字是用哪种继承方式实现的呢？横空出世：es6之extends在es6发布之后，Jser惊奇的发现JavaScri

前端异常一般来说，根据笔者的目前研究，前端异常大体上可以分为两类：由于对语法的不了解、机制的不清楚或是没有做好降级处理而“主动”造成的错误（多为js异常）和由于资源加载、第三方库、浏览器本身机制造成的“被动异常”。第二种异常的解决方式很多，通过各种手段也大多可以避免（比如更换源这种常用手段）。我们主要来说一下第一种！函数的常见处理我们知道，js中充斥着大量的函数，它们承担封装某个具体功能的作用。但是在看许多代码时，笔者发现了一个问题：我们总喜欢用 return false/true; 来表示该函数内

背景和一点点看法见网上许多文章讲vue双向数据绑定一开口就大谈 Object.defineProperty 和 proxy。其实不然。vue 中有两个“特别的”概念：响应式(它和defineProperty有关)和双向数据绑定。其实响应式原理是一种单向行为：它是数据到 DOM (也就是view视图)的映射；而真正的双向绑定，除了数据变化会引起 DOM 的变化之外，还应该在操作 DOM 改变后反过来影响数据的变化！vue 中提供了（内置的） v-model指令实现双向绑定。v-model和双向绑定

最近玩三国志战略版时发现它上面占领土地候一段时间内的动画效果不错，进而引发了一些探究：原动画可以简化为一个方块上有一个类似遮罩的白色的光晕，而且不断膨胀收缩，我开始一想，这不是css的scale么？然后一定时间后将其remove掉。然后发现其每隔一段时间颜色还会变淡一些，这里“理所当然”地用了“多次setTimeout”。但写完后我就立刻想到了“由于浏览器eventLoop和消息队列机制的原因，setTimeout通常不能准时，而且嵌套的setTimeout越多延时越大”。怎么解决呢？既然和时间相关

自定义指令的语法Vue自定义指令语法如下：Vue.directive(id, definition)传入的两个参数，id是指指令ID，definition是指定义对象。其中，定义对象可以提供一些钩子函数：钩子函数定义对象的钩子函数如下：bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中)update：被绑定元素所在的模板更新时调用，而不论绑定

从url到页面展示过程中发生了什么让我们从一道“经典前端面试题” —— 从url到页面展示过程中发生了什么说起：url解析，根据dns系统进行ip查找；① 网络标准规定了 url 只能是数字和字母，还有一小些特殊符号。url 可以携带参数。如果不对 url 转义可能会出现歧义。比如 ?key=value 中可能key本身就包括=符号；url 编码是以 utf-8 为标准，但不是所有浏览器对所有情况都是这样。像JS的话就有 encodeURIComponent 和 encodeURI 来保证以

直接插入排序插入排序时间复杂度最好是 O(n)，最坏是O(n^2)。目前常用的 sort()方法在要排序的元素个数小于等于 10 的时候，采用插入排序实现。大体思路：将数组的第一个元素代表为已排序序列。用下一个元素往已排序序列进行插入，插入到相应位置循环之前的步骤，直到将所有的元素都插入到已排序序列中#include <stdio.h>void insertSort(int *a);int main() { int a[6] = { 5,2,4,1,6,3 }

你一定知道 JS 动画的优先级 < css 动画。即使必要，用 JS 操作class的优先级也一定 > 用 JS 直接修改具体样式。但是如果问到：“你了解css动画的性能么？如何优化？”你该怎么解决？CSS中有两个至关重要的概念 —— 重排和重绘。由此，通常会有一个问题：“为什么重排比重绘更耗性能？”要解释这个，还要回到浏览器的渲染原理上：自上而下解析 DOM，生成 DOM 树；解析 CSS，生成 CSSOM 树；（加载js代码）DOM 树和 CSSOM 树节点一一对应，结合生成

前言前段时间腾讯三面（没看清要求，好像那个岗也要了解后端知识比如Redis但是我不会，已挂），有一个前端知识把我问懵了：请讲一下js中的回调函数，回调函数是什么？讲真，一直在用回调但是却压根没有想过，确实是我本身的不足。正文回调函数就是一个通过函数指针调用的函数。如果你把函数的指针作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数的时候，我们就说这是回调函数。函数指针，也就是函数的地址，可以看做是指向函数的指针变量。函数指针有两个用途：调用函数和做(别的)函数的参数！官方对回调函数

Object对于普通Object，它的优势在于存、取元素，使用非常方便，可直接用字面量方式创建；而且里面属性值可以是不同类型：let obj={};obj.name='mxc';obj.age=18;console.log(obj);但这不是今天的重点。对于 Object，删除其中的属性有两种方式：delete 操作符和 =undefined。delete：delete 会从某个对象上移除指定属性。成功为 true，否则为false：delete obj.age;但这有几点不足