前端笨鸟

http1.0与http1.1区别 http2.0的特点 http1.1与http2.0区别 混淆的问题 http1.0与http1.1区别 长连接(Persistent Connection) HTTP1.1支持长连接和请求的流水线处理，在一个TCP连接上可以传送多个HTTP请求和响应，减少了建立和关闭连接的消耗和延迟，在HTTP1.1中默认开启长连接keep-alive，一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点。HTTP1.0需要使用keep-alive参数来告知服务器端要建立一个长连接。HTTP 1.1的持续连接，也需要增加新的请求头来帮助实现，例如，Connection请求头的值为Keep-Alive时，客户端通知服务器返回本次请求结果后保持连接；Connection请求头的值为close时，客户端通知服务器返回本次请求结果后关闭连接。HTTP 1.1还提供了与身份认证、状态管理和Cache缓存等机制相关的请求头和响应头。 节约带宽 HTTP1.0中存在一些浪费带宽的现象，例如客户端只是需要某个对象的一部分，而服务器却将整个对象送过来了，并且不支持断点续 ...

原因 浏览器中的所有JavaScript都在单线程上执行，所以异步事件（比如定时器）仅在线程空闲时才会被调度运行。 为了控制要执行的代码， JavaScript 配置了一个任务队列，这些异步事件任务会按照将它们添加到队列的顺序执行。 而setTimeout() 的第二个参数（延时时间）只是告诉 JavaScript 再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。 因此定时器延迟是不能保证的。 解决方案动态计算时差 （仅针对循环定时，只起修正作用 ） 在定时器开始前和运行时动态获取当前时间，在设置下一次定时时长时，在期望值基础上减去当前时延，以获得相对精准的定时运行效果。 此方法仅能消除setInterval()长时间运行造成的误差累计，但无法消除单个定时器执行延迟问题。 注： 时差过大时，由于无法时间回流，只能按没有间隔处理，减轻影响 123456789101112131415161718var startTime = new Date().getTime();var count = 0;/ ...

RGB: 三通道颜色 他是目前运用最广泛的颜色系统之一 可以通过红绿蓝三色通道, 外加alpha透明度, 来展示几乎所有的颜色 RGB是从颜色的发光原理来设定的, 相当于红绿蓝三个颜色通过不同亮度, 来组合成为需要的颜色 0为最暗, 255为最亮 RGB转换为HEX(16进制)RGB与HEX中每个颜色都是一一对应的关系RGB的数值 = 16 * HEX的第一位 + HEX的第二位示例如下: RGB: 92, 184, 232 92 / 16 = 5余12 -> 5C 184 / 16 = 11余8 -> B8 232 / 16 = 14余8 -> E8 HEX = 5CB8E8 HEX转换RGB此转换就是将上述的转换逆转即可示例如下 HEX: F26BC1 F2 = 15和2 -> 15 * 16 + 2 = 242 6B = 6和11 -> 6 * 16 + 11 = 107 C1 = 12和1 -> 12 * 16 + 1 = 193 常见算法题描述设计一个函数，给出一个rgba数值，返回16进制的表达式及透明度。 输入 rgba(25 ...

变量提升通常JS引擎会在正式执行之前先进行一次预编译，在这个过程中，首先将变量声明及函数声明提升至当前作用域的顶端，然后进行接下来的处理。js怎么创建变量？示例 12var a = 1;var b = 2; js在解析上面的代码的时候，其实会按照下面的方式进行解析的： 1234var a;var b;a = 1;b = 2; 所以 js 并不是在我们定义一个变量的时候，声明完成之后立即赋值，而是把所有用到的变量全部声明之后，再到变量的定义的地方进行赋值，变量的声明的过程就是变量的提升。 现在我们来看看这个例子： 1234567function foo() { var a = 1; console.log(a); console.log(b); var b = 2;}foo(); 思考一下会输出什么？分析实际上的解析过程是 123456789function foo() { var a; var b; a = 1; console.log(a); // 1 console.log(b); // undefined b = 2;} ...

Cookie 定义：Cookie是保存在客户机的文本文件（IE保存在本地的一个txt文件中）, 这个文件与特定的 Web 文档关联在一起, 保存了该客户机访问这个Web 文档时的信息, 当客户机再次访问这个 Web 文档时这些信息可供该文档使用。请求服务器时放在http请求头里面（不论是否需要，都会放在请求头里面） 为什么需要cookie？HTTP是一种无状态的协议，客户端与服务器建立连接并传输数据，数据传输完成后，连接就会关闭。再次交互数据需要建立新的连接，因此，服务器无法从连接上跟踪会话，也无法知道用户上一次做了什么。如：在网络有时候需要用户登录才进一步操作，用户输入用户名密码登录后，浏览了几个页面，由于HTTP的无状态性，服务器并不知道用户有没有登录。但是有了Cookie，服务器在第一次客户端请求的时候，将cookie保存在客户端，客户端重新请求服务器时会携带cookie（未过期），这样服务器就知道上一次用户做了什么。服务器还会对Cookie信息进行维护，必要时会对Cookie内容进行修改。 场景： 保存用户登录状态：例如将用户id存储于一个cookie内，这样当用户下次访问该页 ...

构造函数 原型 原型链 构造函数通过 new 函数名来实例化对象的函数叫构造函数。任何的函数都可以作为构造函数存在。之所以有构造函数与普通函数之分，主要从功能上进行区别的，构造函数的主要 功能为 初始化对象，特点是和new 一起使用。 1234567 function Foo(name){ this.name = name; this.sayName = function () { console.log(this.name); }}var f1 = new Foo('孙悟空') f1就是一个构造函数 原型在JavaScript中，每当定义一个函数数据类型(普通函数、类)时候，都会天生自带一个prototype属性，这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值。对象具有属性proto，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。 1console.log(f1.__proto__ === Foo.protot ...

所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 W3C标准盒模型 IE盒模型 两种盒模型的区别 盒子模型 Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框)- 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。 W3C标准盒模型盒子的内容区域(content) = 设置的width/height标准盒模型的宽高width= content + padding * 2 + border * 2height= content + padding * 2 + border * 2 示例12345678910111213body{ margin: 0; padding: 0; background: darkseagree ...

JS事件循环为什么js是单线程？JavaScript 的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript 的主要用途是与用户互动，以及操作 DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript 同时有两个线程，一个线程在某个 DOM 节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？所以，为了避免复杂性，从一诞生，JavaScript 就是单线程，这已经成了这门语言的核心特征，将来也不会改变。 为什么要有事件循环？因为Javascript在浏览器中是单线程，所以在进行一个延时操作时并不能真的就让进程在原地等待那么久，那样用户的相关操作就“卡死”在哪里了，所以引入了事件循环的机制来，将需要消耗时间的操作“跳过去”，等主线程的操作完成了，再检查任务队列中是否还有任务，然后将任务调出来执行。就这样反复循环执行，所以就叫做事件循环。导图表达的内容： 同步和异步任务分别进入不同的执行”场所”，同步的进入主线程，异步的进入Event Table并注册函数。 当指定的事情完成时，Event Table会将这个函数移入Eve ...

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。 new操作符做了什么？ 模拟实现JS的new操作符 new操作符做了什么？new操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象 创建一个空的对象 将空对象的原型prototype指向构造函数的原型 将空对象作为构造函数的上下文（改变this指向） 确保返回的是对象 构造函数返回值的判断(对第4步的解析) 一般情况下构造函数没有返回值，但是作为函数，是可以有返回值的。那么在构造函数有返回值的情况下，new操作符做了什么？ 先看两个例子：注意一下两个返回值的差异 12345678910111213function Person(name){ this.name = name; return 1; // return undefined/NaN/'string'/null}let me = new Person('快乐每一天');console.log(me); // { name ...

事件分为三个阶段：捕获阶段、目标阶段和冒泡阶段。事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径，在冒泡阶段，事件会通过这个路径回溯到文档跟节点。 捕获阶段 目标阶段 冒泡阶段 事件代理 捕获阶段当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。 示例1234567891011121314151617181920212223242526272829303132333435363738394041<style> #ancestors{ width: 200px; height: 200px; background: red; color: #fff; font-size: 30px; } #father{ width: ...