码迷,mamicode.com
首页 > 其他好文 > 详细

常见前端知识摘要

时间:2018-03-09 01:40:38      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:value   参数传递   不同   pen   封装   数组   没有   回收机制   func   

1、this的典型应用
(1)在html元素事件属性中使用
(2)构造函数里使用
(3)input点击,获取值this.value
(4)apply/call求数组最值。Math.max.apply(this,numbers)
2、闭包的理解:
(1)定义和用法:当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数内部的其它变量,如果返回的这个函数在外部被执行,就产生了闭包。
(2)表现形式:使函数外部能够调用函数内部定义的变量
(3)使用闭包的注意点:
一、滥用闭包,会造成内存泄漏:由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。设置为null,并不是真的删除,只是去除引用,好让垃圾回收机制回收
二、会改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法,把内部变量当作它的私有属性,这时一定要小心,不要随便改变父函数内部变量的值。
3、跨域和跨域请求资源的方法:
(1)跨域:由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。存在跨域的情况:网络协议不同、端口不同、域名不同、子域名不同、域名和域名对应的ip不同
(2)跨域请求资源的方法:
一、proxy代理:用于将请求发送给后台服务器,通过服务器来发送请求,然后将请求的结果传递给前端。
二、CORS:后端人员在处理请求数据的时候,添加允许跨域的相关操作
三、jsonp:动态插入script标签。浏览器对script的资源引用没有同源限制,同时资源加载到页面后会立即执行
4、垃圾回收机制:
(1)垃圾回收机制执行环境负责管理代码执行过程中使用的内存;垃圾收集器会定期(周期性)找出那些不在继续使用的变量,然后释放其内存。但是这个过程不是实时的,因为其开销比较大,所以垃圾回收器会按照固定的时间间隔周期性的执行。
return内部一个对象时,在外部有变量指向该内部对象,则该内部对象也不会被回收。
(2)垃圾回收策略:标记清除(较为常用)和引用计数
一、标记清除:当变量进入环境时,将变量标记"进入环境",当变量离开环境时,标记为:"离开环境"。某一个时刻,垃圾回收器会过滤掉环境中的变量,以及被环境变量引用的变量,剩下的就是被视为准备回收的变量。
二、引用计数:引用计数是跟踪记录每个值被引用的次数。基本原理就是变量的引用次数,被引用一次则加1,当这个引用计数为0时,被视为准备回收的对象。
5、内存泄露问题
(1)内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束。C#和Java等语言采用了自动垃圾回收方法管理内存,几乎不会发生内存泄露。虽然浏览器也是采用自动垃圾回收方法管理内存,但由于浏览器垃圾回收方法有bug,会产生内存泄露。
(2)内存泄露的几种情况:
一、当页面中元素被移除或替换时,若元素绑定的事件仍没被移除,在IE中不会作出恰当处理,此时要先手工移除事件,不然会存在内存泄露。
解决方案:删除或替换元素时,一定要记得删除该元素绑定的事件
二、闭包可以维持函数内局部变量,使其得不到释放。
解决方案:在退出函数之前,将不使用的局部变量全部删除。
6、JS里面向对象继承的实现
(1)原型链:有3种方式
一、子集原型指向父级实例,然后constructor属性修正指回原来的构造函数
二、子集原型指向父级原型,然后constructor属性修正指回原来的构造函数
(优点:效率比较高,不用执行和建立Animal的实例;
缺点:子集原型和父级原型现在指向了同一个对象,任何对子集原型修改,都会反映到父集原型上)
三、利用空对象作为中介,
var F = function(){};
F.prototype = Animal.prototype;
Cat.prototype = new F();
Cat.prototype.constructor = Cat;
F是空对象,所以几乎不占内存。这时,修改Cat的prototype对象,就不会影响到Animal的prototype对象。
(2)构造函数绑定,call/apply,在子对象构造函数里加:父级.apply(this,arguments)
(3)对象冒充:this.stu=Stu;this.stu(name,age)将Stu类的构造函数赋值给this.stu
(4)浅拷贝和深拷贝继承
(5)object()函数:把子对象的prototype属性,指向父对象,从而使得子对象与父对象连在一起
7、$.get()和$.post()提交的区别:
(1)请求方式:get异步请求和post异步请求
(2)参数传递方式:get请求将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器的,这种传递是对用户不可见的,安全性更好。
(3)数据传输大小不同:get方式传输的数据大小不能超过2KB 而POST要大的多
(4)安全问题:GET方式请求的数据会被浏览器缓存起来,因此有安全问题。
8、src与href的区别
href:是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。
src:是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
9、sessionStorage 、localStorage 和 cookie 之间的区别
共同点:用于浏览器端存储的缓存数据
不同点:
(1)存储内容是否发送到服务器端:当设置了Cookie后,数据会发送到服务器端,造成一定的宽带浪费;webStorage会将数据保存到本地,不会造成宽带浪费;
(2)数据存储大小不同:Cookie数据不能超过4K,适用于会话标识;webStorage数据存储可以达到5M;
(3)数据存储的有效期限不同:cookie只在设置了Cookid过期时间之前一直有效,即使关闭窗口或者浏览器;sessionStorage仅在关闭浏览器之前有效;localStorage数据存储永久有效;
(4)作用域不同:cookie和localStorage是在同源同窗口中都是共享的;sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;
所以4个方面:
数据发送服务端/保存本地
数据大小4K/5M
数据有限期:cookie有效期、关闭窗口内、永久
作用域:cookie和local同源同窗口共享、同源同窗口共享、session则不共享
10、Web Storage与Cookie相比存在的优势:
(1)存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。
(2)存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而WebStorage中的数据则仅仅是存在本地,不会与服务器发生任何交互。
(3)更多丰富易用的接口:WebStorage提供了一套更为丰富的接口,如setItem,getItem,removeItem,clear等,使得数据操作更为简便。cookie需要自己封装。
(4)独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。
11、AJAX工作原理
(1)创建ajax对象
(2)判断数据传输方式
(3)打开链接open
(4)发送send
(5)当ajax执行到第四步(onreadystatechange)数据接收完成,判断http响应状态,然后执行回调函数
12、减少页面加载时间的方法
(1)注重代码的性能,高性能web开发规范编程
(2)压缩css、js文件
(3)合并js、css文件,减少http请求
(4)外部js、css文件放在最底下
(5)减少dom操作,尽量用变量替代不必要的dom操作

常见前端知识摘要

标签:value   参数传递   不同   pen   封装   数组   没有   回收机制   func   

原文地址:https://www.cnblogs.com/goloving/p/8531565.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!