zoukankan      html  css  js  c++  java
  • 常见前端知识摘要

    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)判断数据传输方式get/post
    (3)打开链接open
    (4)发送send
    (5)当ajax执行到第四步(onreadystatechange)数据接收完成,判断http响应状态,然后执行回调函数
    12、减少页面加载时间的方法
    (1)注重代码的性能,高性能web开发规范编程
    (2)压缩css、js文件
    (3)合并js、css文件,减少http请求
    (4)外部js、css文件放在最底下
    (5)减少dom操作,尽量用变量替代不必要的dom操作

    13、JS获取当前页面url网址信息:
    window.location.href:设置或获取整个URL为字符串
    window.location.protocol:设置或获取URL的协议部分
    window.location.port:设置或获取与URL关联的端口号码
    window.location.pathname:设置或获取与URL的路径部分(就是文件地址)
    window.location.search:设置或获取href属性中跟在问号后面的部分
    window.location.hash:设置或获取 href 属性中在井号“#”后面的分段

    14、常见web安全及防护原理

    一、SQL注入原理:就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令。

    为防止sql注入安全问题,总的来说有以下几点需要注意:

    (1)永远不要信任用户的输入,要对用户的输入进行校验,可以通过正则表达式,或限制长度,对单引号和双"-"进行转换等。

    (2)永远不要使用动态拼装SQL,可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。

    (3)永远不要使用管理员权限的数据库连接,为每个应用使用单独的权限有限的数据库连接。

    (4)不要把机密信息明文存放,请加密或者hash掉密码和敏感的信息。

    二、XSS原理及防范:Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。比如:攻击者在论坛中放一个看似安全的链接,骗取用户点击后,窃取cookie中的用户私密信息;或者攻击者在论坛中加一个恶意表单,当用户提交表单的时候,却把信息传送到攻击者的服务器中,而不是用户原本以为的信任站点。

    XSS防范方法:

    (1)代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤;

    (2)任何内容写到页面之前都必须加以enCode,避免不小心把html tag 弄出来。这一个层面做好,至少可以堵住超过一半的XSS 攻击。

    (3)避免直接在cookie 中泄露用户隐私,例如email、密码等等。

    (4)通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值,不可能拿来重放。

    (5)如果网站不需要再浏览器端对cookie 进行操作,可以在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie 。

    (6)尽量采用POST 而非GET 提交表单

    三、XSS与CSRF的区别:XSS是获取信息,不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作,需要知道其他用户页面的代码和数据包。

    要完成一次CSRF攻击,受害者必须依次完成两个步骤:(1)登录受信任网站A,并在本地生成Cookie。 (2)在不登出A的情况下,访问危险网站B。

    CSRF的防御:(1)服务端的CSRF方式方法很多样,但总的思想都是一致的,就是在客户端页面增加伪随机数。(2)通过验证码的方法。

  • 相关阅读:
    语言精粹【摘要】
    【转】一个Java程序员应该掌握的10项技能
    比较有用的网址
    推荐一些国内的Jquery CDN免费服务
    CSS3动画【归纳总结】
    scrollTo与border结合使用的小玩意
    aria-label及aria-labelledby应用//////////[信息无障碍产品联盟]
    aria初探(一)
    没有this的JavaScript
    Front-end Job Interview Questions
  • 原文地址:https://www.cnblogs.com/goloving/p/8531565.html
Copyright © 2011-2022 走看看