自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

Carol的小星球

这是一个正在努力的程序媛的博客,记录一些学习前端的日常。

  • 博客(23)

原创 JavaScript排序算法

复杂度冒泡排序从前到后两两比较,把较大的换到后面,直到最后。function bubbleSort(arr) { var len = arr.length; for (var i = 0; i < len-1; i++) { for (var j = 0; j < len - 1 - i; j++) { if (arr[j...

2018-11-30 21:20:13 55 2

原创 JavaScript数组去重的几种方式

1.利用ES6 Set的内容不重复的特性function unique (arr) { return Array.from(new Set(arr))}var arr = [];console.log(unique(arr));2.利用for循环嵌套比较,splice()删除重复function unique(arr){ for(var i...

2018-11-30 21:02:01 92

原创 HTTP1.0、HTTP1.1和HTTP2.0之间的区别

HTTP1.0与HTTP1.11.长连接HTTP1.0需要主动设置connection:keep-alive的连接方式,才能开启长连接。HTTP1.1默认支持长连接,在一个TCP连接上可以传送多个HTTP请求和响应,减少了建立和关闭连接的消耗和延迟,一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点。2.带宽优化HTTP1.0中header和body必须一起发送,有时会造成浪费带宽...

2018-11-30 20:50:53 1188

原创 Web安全之CSFR与XSS

CSFRCSFR(Cross-Site Request Forgery跨站点伪造请求)是一种网络攻击方式。攻击者在用户已经登录目标网站之后,诱使用户访问一个攻击页面,利用目标网站对用户的信任,以用户身份在攻击页面对目标网站发起一些恶意请求(如恶意发帖、改密码、发邮件等),达到攻击目的。攻击过程用户打开浏览器,访问受信任网站A,输入用户名和密码请求登录网站A。2.用户信息通过验证后,网站A...

2018-11-30 20:25:37 175

原创 HTTP与HTTPS的区别

超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂其中的信息,因此,HTTP协议不适合传输一些敏感信息。为了解决HTTP协议的这一缺陷,需要使用另一种协议:安全套接字层超文本传输协议HTTPS,为了数据传输的安全,HTTPS在HTTP的基础上加入了...

2018-11-30 19:40:45 31

原创 OSI七层模型

OSI(Open System Interconnect),即开放式系统互联。 是ISO(国际标准化组织)组织在1985年研究的网络互连模型。ISO为了更好的使网络应用更为普及,推出了OSI参考模型。其含义就是推荐所有公司使用这个规范来控制网络。这样所有公司都有相同的规范,就能互联了。OSI定义了网络互连的七层框架(物理层、数据链路层、网络层、传输层、会话层、表示层、应用层), 每一层实现各自...

2018-11-30 18:53:55 67

原创 HTTP缓存机制

HTTP缓存机制定义在HTTP协议标准中,被现代浏览器广泛支持,同时也是一个用于提升基于Web的系统性能的广泛使用的工具。与缓存相关的信息保存在HTTP报文的header中。首次请求Http缓存主要涉及三个角色:一是浏览器,二是浏览器的缓存数据库,三是服务器。当浏览器首次发出请求时:当浏览器再次执行同一请求时,会根据不同的缓存类型执行不同行为。缓存类型强缓存原理:所请求的数据在...

2018-11-30 16:52:20 74

原创 JavaScript设计模式之工厂模式

工厂模式是用来创建对象的一种最常用的设计模式。把创建对象的具体逻辑封装在一个函数中,那么这个函数就可以被视为一个工厂。工厂模式根据抽象程度的不同可以分为:简单工厂,工厂方法和抽象工厂。简单工厂模式简单工厂模式又叫静态工厂模式,由一个工厂对象决定创建某一种产品对象类的实例。主要用来创建同一类对象的不同实例。function createPerson (name,age) { var p...

2018-11-29 22:40:14 37

原创 在浏览器中输入URL并回车后发生了什么?

1、解析URL在浏览器中输入URL后,浏览器首先对拿到的URL进行识别,抽取出域名字段。URL(Universal Resource Locator):统一资源定位符。俗称网页地址或者网址。80端口默认不显示,“?” 到“#”之间跟着参数,多个参数使用“&”连接,“#”后面跟着锚。2、DNS域名解析DNS,域名系统,是一个把域名和IP映射的数据库。IP地址往都难以记住,但机器...

2018-11-29 21:05:43 85

原创 ajax异步请求的过程

AJAXAJAX是异步JavaScript和XML(Asynchronous JavaScript And XML),它是一种方法,允许网页在不重新加在整个页面的情况下更新一部分网页。AJAX异步请求的过程AJAX的核心是XMLHttpRequest对象,其中的方法可以用来在浏览器和服务器之间传输数据。1.创建XMLHttpRequest对象var xhr=new XMLHttpRequ...

2018-11-29 19:58:19 174

原创 前端性能优化方案

1、减少HTTP请求(1)雪碧图(CSS Sprites)就是把多张图合到一张图里面,然后通过CSS来分别取用。这样就可以减少请求数量。(2)合并多个脚本和样式表但这种方式有一个弊端,对于只想访问该网站的某一两个页面的人群来说,反而增大了下载量。(3)合理设置缓存可以在下次访问时减少部分请求,直接在缓存中读取。(4)懒加载(Lazy Load)只加载可见的部分。先将img标签中的...

2018-11-29 19:22:17 74

原创 sessionStorage、localStorage与cookie、session详解

cookie和session的区别由于HTTP是一种无状态的协议,数据交换完毕后会关闭连接,为了分辨一个请求是谁发起的,以免在同一个网站每打开一个页面都需要重新登录,引入了Session和Cookie两个机制。Cookie和Session都是用来跟踪浏览器用户身份的方式。1、保持状态:Cookie保存在浏览器端,Session保存在服务器端2、使用方式:(1)Cookie:第一次登陆...

2018-11-29 18:20:00 841

原创 跨域解决方案总结

同源策略浏览器为了保证用户信息的安全,防止恶意网站窃取数据,禁止不同域之间的JS进行交互。对于浏览器而言,只要域名、协议、端口中有一个不同就会引发同源策略。同源策略限制以下行为:1.Cookie、LocalStorage 和 IndexDB 无法读取2.DOM 和 JS 对象无法获取3.Ajax请求无法发送跨域场景跨域解决方案1. JSONP为了减轻web服务器的负载,JS、...

2018-11-29 01:42:04 52

原创 JavaScript数据类型及深拷贝与浅拷贝

JavaScript的数据类型分为基本类型和引用类型。基本类型基本类型包括undefined、null、string、number、boolean、(ES6中还有Symbol)这些类型是存放在栈中的,数据大小确定,可按值访问,直接操作保存在变量中的实际值。var a = 10;var b = a;b = 20;console.log(a); // 10console.log(b);...

2018-11-28 23:32:28 43

原创 JavaScript中的this、apply()、call()、bind()

thisthis是函数执行时基于函数的执行环境绑定的,指向最后调用它的那个对象。例1:function a(){ var name= "Carol"; console.log(this.user); //undefined console.log(this); //Window}a();最后一个调用a的是全局对象Window,因此a的this指向Window,...

2018-11-28 23:02:33 29

原创 JavaScript中的原型与原型链

原型原型是一个对象,通过原型可以实现对象的属性继承。JavaScript中,只有函数才有prototype属性。_proto_是每个对象都拥有的属性。这两个属性就是new的过程实现的关键。当一个函数被用作构造函数来创建实例时,这个函数的prototype属性值会被作为原型赋值给对象实例,也就是会被赋给实例对象的_proto_属性。new的过程:1.创建一个空对象var obj={};...

2018-11-28 21:44:24 45

原创 JavaScript内存泄漏

内存泄漏就是没有及时释放不再用到的内存。内存泄漏会使内存占用越来越高,带来性能问题,严重时还可能造成崩溃。垃圾回收机制标记清除这是大多数浏览器使用的方法。当变量进入执行环境时,垃圾回收器将其标记为“进入环境”,当变量离开环境时(函数执行结束)将其标记为“离开环境”并回收其内存。引用计数这是低版本IE浏览器采用的方式,易引起内存泄露。跟踪一个值的引用次数,声明一个变量并将一个引用类型...

2018-11-28 20:32:38 85

原创 JavaScript闭包的理解

闭包是指有权访问另一个函数作用域中的变量的函数。作用域作用域分为全局作用域和局部作用域。全局作用域:最外层函数定义的变量拥有全局作用域,任何内部函数都可以访问。局部作用域:只在固定的代码片段内可以访问,函数外部无法访问。全局变量都是全局对象window的一个属性。作用域链作用域链就是根据内部函数可以访问外部函数变量的这种机制,链式向上查找决定哪些数据可以被内部函数访问。当某一个函数...

2018-11-28 19:21:03 44

原创 异步编程的解决方案之Generator

Generator是ES6中新提出的一种异步编程解决方案。可以将Generator理解为一个状态机,封装了多个内部状态。它与普通函数不同之处在于它可以暂停执行以及恢复执行。语法在function和函数名之间加*号以区分普通函数。用yield来标识需要暂停的地方。function *gen(x){ var y = yield x + 2; return y;}使用next()...

2018-11-28 18:25:33 64

原创 异步编程的解决方案之Promise

Promise是一种异步解决方案,是对传统回调函数方法的一种改进。作用(1)解决回调地狱,使函数顺序执行(2)使用then继续返回一个promise对象可以实现链式调用三种状态pending(进行中)resolved(成功)rejected(失败)创建Promise实例Promise对象是一个构造函数,接受一个函数作为参数,这个函数的两个参数分别是resolve和reject,分...

2018-11-28 17:35:23 68

原创 JavaScript的异步编程方法

JS的单线程机制由于JS是单线程机制,任务的前后顺序是不能变的,在未执行完上一段代码时,不能做其他的事情,只能等待它执行完毕才能继续执行后面的代码。如果出现耗时较多的操作就会阻塞后面的代码。为什么不设计成多线程呢?因为JS是一门浏览器脚本语言,最开始只是为了处理一些表单验证和DOM操作被创造出来的,只能是单线程,否则会带来一些复杂的同步问题。例如在两个线程同时做增加和删除的操作,就无法处理。...

2018-11-27 22:38:13 55

原创 异步编程的解决方案之async/await

什么是asyncasync其实是在ES7里出现的一种解决异步的方案。它是Generator函数的语法糖,本质上就是把Generator函数和自动执行器包装在一个函数中。async function fn(args){ // ...}等同于function fn(args){ return spawn(function*() { // ... }); }这个s...

2018-11-27 19:37:29 57

原创 vue-router前端路由的使用

路由是根据不同的url展示不同的内容,前端路由就是把这个工作由服务器转到前端来做。Vue.js+Vue-router可以很简单的实现单页应用。单页应用单页应用(SPA)能够更新视图而不重新请求页面。vue-router实现单页应用主要有Hash模式和History模式,通过mode参数决定使用哪一种。默认使用Hash。1、Hash模式:hash(#)是URL 的锚点,代表的是网页中的一...

2018-11-27 16:16:28 637

空空如也

空空如也

空空如也
提示
确定要删除当前文章?
取消 删除