最新文章网络知识学习1
计算机网络HTTP 协议GET 和 POST 的区别
GET
POST
后退/刷新
无害
不可收藏为书签
书签
可收藏为书签
不可收藏为书签
缓存
能被缓存
不能被缓存
编码类型
application/x-www-form-urlencoded
application/x-www-form-urlencoded 或 multipart/from-data。为二进制数据使用多重编码
历史
参数保留在浏览器历史中
不会被保留
对数据长度的限制
根据浏览器的不同会有不同的长度限制(基本是 2048)
无限制
对数据类型的限制
只允许 ASCII 字符
没有限制
可见性
URL 对所有人可见
不在 URL
缓存问题：首先要了解什么是缓存。
HTTP 缓存的基本目的就是使应用执行的更快，更易扩展，但是 HTTP 缓存通常只适用于 idempotent request（可以理解为查询请求，也就是不更新服务端数据的请求），这也就导致了在 HTTP 的世界里，一般都是对 Get 请求做缓存，Post 请求很少有缓存。
get 多用来直接获取数据，不修改 ...
CSS属性的计算过程
CSS属性的计算过程css属性值的计算过程什么是css属性值的计算过程某个元素从所有的CSS元素没有值，到所有的CSS属性都有值的过程叫做计算过程
也就是说就算只给div设置了一个背景颜色，不表示它没有其他属性值，它的所有css属性都有值
如何计算分为四个步骤：（按顺序来，不能乱序）
1.确定声明值：
从作者样式表(我们所写的样式)和默认样式表(浏览器默认的样式)中找到没有冲突的样式，直接作为计算后的样式。
（类似于red类型的会转化成rbg）
2.层叠(css全称： 层叠样式表)
对有冲突的样式进行层叠，通过以下三个步骤：
1.比较重要性
重要性从高到底：
1.带有important的作者样式
2.带有important的默认样式
3.作者样式
4.默认样式
2.比较权重
...
Vue2数据劫持
Vue2的数据劫持vue2的数据劫持使用Object.defineProperty对数据进行劫持，在数据变动时发布消息给订阅者，触发相应的监听回调。以下是实现的代码 可以参考
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152// 先定义一个数据const data = { name: 'arafat', age: 18}// 对数据进行遍历for(let i in data){ let value = data[i] // 依赖收集: 用于存储用到此数据的方法 let arr = [] // 通过Object.defineProperty对数据进行劫持 Object.defineProperty(data , i, { get: function () { // 是否有此函数 没有就添加 ...
浏览器的渲染原理
浏览器是如何渲染页面的？ 当浏览器收到了html文档后，会产生一个渲染任务，并将其递给渲染主线程的消息队列。再事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。
整个渲染流程分为多个阶段：HTML解析，样式计算，布局，分层，绘制，分块，画。每个阶段都有明确的输入输出，上一个阶段的输出会成为下一个阶段的输入。 这样渲染流程就形成了一套组织严密的生产流水线。
渲染的第一步是解析HTML 解析过程中遇到CSS解析CSS，遇到JS执行JS。为了提高解析效率，浏览器就在开始解析前，会启动一个解析的线程，率先下载HTML中的外部CSS文件和外部的JS文件。
如果主线程解析到了link位置，此时外部的CSS文件还没下载解析好，主线程不会等待，继续解析后续HTML。这是因为下载和CSS的工作是在预解析线程中进行的。这就是CSS不会阻塞HTML的根本原因。
如果主线程解析到了script位置，会停止解析HTML，转而等待JS文件下载好，并将全局 ...
Webpack优化教程
webpack优化我们会从以下角度来进行优化： 1.提升开发体验 2.提升打包构建速度 3.减少代码体积 4.优化代码运行性能
提升开发体验SourceMap webpack编译后的所有 css 和 js 合并成了一个文件，并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多，那么很难去发现错误出现在哪里。
这时我们可以通过SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。 它会生成一个 xxx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。
提升打包构建速度HotModuleReplacement 开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。 所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。
HotMod ...
Vue2面试题常问面试题
对MVVM的理解： MVVM 由 Model、View、ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来；ViewModel 是一个同步View 和 Model的对象。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM， 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
Vue数据双向绑定的原理： 实现mvvm的数据双向绑定，是采用数据劫持结合 ...
js设计模式-策略模式
概念： 定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。
优点： 策略模式利用组合，委托等技术和思想，有效的避免很多if条件语句。 策略模式提供了开放-封闭原则，使代码更容易理解和扩展。 策略模式中的代码可以复用。
代码缺点如下： annualBonus函数包含了很多if-else语句。 annualBonus函数缺乏弹性，假如还有D等级的话，那么我们需要在annualBonus函数内添加判断等级D的if语句； 算法复用性差，如果在其他的地方也有类似这样的算法的话，但是规则不一样，我们这些代码不能通用。
123456789101112131415161718192021222324252627282930313233function annualBonus(salary,level) { if(level === 'A') { return salary * ...
js设计模式-观察者模式
定义： 在对象之间定义一个一对多的依赖，当一个对象状态改变的时候，所有依赖的对象都会自动收到通知。
观察者模式和发布-订阅模式一样么？ 不一样！ 观察者模式会直接通知订阅者 发布-订阅不会直接通知订阅者，而是通过第三个角色事件调度中心来实现通知订阅者
例子：1234567891011121314151617181920212223242526272829 function SellHome() { this.userList = [];}SellHome.prototype.attach = function (msg) { console.log('11', this); this.userList.forEach(u => { console.log('hh', u.name+''+msg); });};SellHome.protot ...
js设计模式-装饰器模式
装饰器模式 为对象添加新功能,不改变其原有的结构和功能,和适配器模式不一样，适配器模式是原有的不能用了，而装饰器模式是原来的还能用，不过给增加一些功能。 比如： 手机壳，用来给手机美观，保护，防滑等等
例子：123456789101112131415161718192021222324class Circle { draw() { console.log("画一个圆形"); }}class Decorator { constructor(circle){ this.circle = circle; } draw() { this.circle.draw(); this.setRedBorder(this.circle); } setRedBorder(circle) { console.log("设置红色 ...
js设计模式-适配器模式
什么是适配器模式 适配器模式：将一个类（对象）的接口（方法或属性）转化成客户希望的另外一个接口（方法或属性），使得原本由于接口不兼容而不能一起工作的那些类（对象）可以正常协作。简单理解就是为兼容而生的 “转换器”
例子：123456789101112131415161718192021222324252627282930class Adapter { specificRequest() { return '德国标准插头' }}class Target { constructor() { this.adapter = new Adapter() } request() { let info = `${this.adapter.specificRequest()}---转换成---中国插头` return info }}let target = new Target()console.info(target.request ...
