小赢科技 前端社招二面 附答案分析

每天一篇面经,麻麻再也不用担心我缺钙!(๑•̀ㅂ•́)و✧

面试内容
  1. 前端安全,csrf和xss攻击知道吗?
  2. 内存泄漏是什么?怎么造成的?
  3. 页面监控是什么?怎么看性能信息?错误怎么处理,onerror怎么用?
  4. 前端优化?
  5. HTTP1 1.1 2都更新了什么?
  6. 闭包和模块模式?
面试答案解析

1.前端安全csrf和xss
csrf跨站请求伪造。攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并运行一些操作(比如发邮件、发消息、转账、购买等)。由于浏览器曾经认证过,所以被访问网站会认为是用户自愿的。利用了web中用户身份验证的漏洞:简单的身份验证只能保证请求发自某个用户的浏览器,却不能保证请求本身是用户自愿发出的。
防御:
1.检查Referer字段:这个字段用以标明请求来源于哪个地址,来判断发送请求地址和相应地址是否在同一域名下。缺点是Referer字段也有被攻击者篡改的可能。
2.添加校验token:要求在访问敏感数据请求时用户浏览器提供不保存在cookie中并且攻击者无法伪造的数据作为校验,csrf攻击就无法继续。
xss:跨网站脚本。利用网站开发时留下的漏洞,注入恶意命令使用户加载并执行。
常见攻击:
1.盗取cookie
2.植入flash,通过crossdomain权限设置进一步获取更高权限
3.利用iframe、frame、XMLHttpRequest或Flash等,以(被攻击)用户身份执行管理动作(加好友、发消息、关注等)
4.利用可被攻击的域受到其他域的信任,执行本不被允许的操作。
5.在访问量极大的页面上的XSS可以攻击一些小型网站,实现DDoS攻击效果。
防御:
1.不信任用户提交的任何内容。全部进行规范检查和过滤操作。
2.实现Session标记、CAPTCHA(验证码)系统或者HTTP引用头检查,防止被第三方网站执行。对于用户提交信息中的img等link,检查是否有重定向回本站、不是真的图片等可以操作。
3.cookie防盗。避免在cookie中泄漏隐私。通过使用cookie和系统IP绑定来降低风险。
4.确认接收的内容被妥善的规范化,仅包含最小的、安全的Tag(没有JavaScript),去掉任何对远程内容的引用,使用HTTPonly的cookie(不允许js读取cookie)。

2.内存泄漏 Memory Leak
内存泄漏:程序中已动态分配的堆内存由于某种原因未释放或无法释放,造成系统内存的浪费,导致程序运行减慢甚至崩溃。
常见原因
1.闭包。闭包会保留对另一个函数的内部引用,所以被引用的函数内部变量不会被回收,始终保存在内存中造成泄漏。
2.全局变量。1)大量未声明变量,都会视为全局变量,又缓存大量的数据 2)this指向也可以指向window造成全局变量。而全局变量在窗口关闭和重新刷新之前都不会释放,造成内存泄漏
3.事件监听。对一个事件进行重复监听。比如在SPA单页面中,在页面加载中写了事件监听,但是在页面离开没有移除,那么再次加载页面就可能会造成重复监听的现象。
4.定时器。被忘记清除的定时器setTimeout、setInterval。
5.循环引用。两个对象之间的相互引用,不会被回收

3.页面监控,错误处理和性能信息,onerror用法
页面监控:web端数据监控,包括页面打开速度(测速)、页面稳定性(JS Error)和外部服务调用成功率(API)三个方面监测Web页面的健康度。
测速:监控用户从开始访问到加载完成经历的每一个时间点的耗时。可使用W3C的工具-Nacigation Timing API. 再根据时间点的耗时,得到判断性能的指标信息(比如,首字节时间、白屏时间、首xu屏时间、总耗时等)。
页面稳定性:js代码异常捕获。
1)单点捕获。在可能会发生异常的地方,写try..catch实现单点捕获。
2)全局捕获。利用window.onerror。但是需要注意 1)返回值为true错就会忽略 2)最好写在所有js脚本前面3)可以捕获网络异常,但无法判断错误原由
3)跨站点请求异常。跨域js文件添加crossorigin,同时服务器添加Access-Control-Allow-Origin支持跨域共享。

4.前端优化
客户端:减少http请求次数、减少DNS查询次数、避免页面跳转、缓存Ajax、延迟加载、提前加载、减少DOM元素数量、根据域名划分内容、减少iframe数量、避免404
服务器:使用CDN、增减Expires或Cache-Control报文头、Gzip压缩传输文件、配置Etags、尽早flash输出、使用GET Ajax请求、避免空的图片src
Cookie:减少Cookie大小、页面内容使用无Cookie域名
CSS:样式表置顶、避免CSS表达式、用<link>替代@import、避免使用Filters
JavaScript:脚本置底、使用外部js和css文件、精简、去重、减少DOM访问
图片:优化图像、Sprite雪碧图、不要再HTML中缩放图片、使用小且可缓存的icon
网络:多路复用、header压缩、服务端推送

5.Http1 1.1 2 3
Http1:建立连接,发送请求,收到响应,然后断开连接。请求/响应描述符。
因为http1 一个tcp连接对应一个请求和响应,所以每次请求都要经历进行三次握手和慢启动的过程,于是有了http1.1 让一个tcp连接可以对应多个请求和响应。
Http1.1支持持续连接。发送a请求,收到a响应,可以继续发送b请求,收到b响应,最后由客户端确认是否要关闭连接。
http1.1 还是有问题,一个连接上只能等a结束才能开始b,并且如果第一个包堵塞了,后面的包就都会堵住。还有header每次都会携带一堆信息不管用不用得上,而且还是明(luo)文(ben)传输的所以针对这些问题有了http2.0.
Http2:
二进制传输:请求和响应数据分割为帧,并且采用二进制编码。
异步连接多路复用、请求/响应管线化请求和响应切分为帧之后可以在请求管线中无序异步发送,也就是不需要等待a给响应就可以发b请求、c请求,也不用考虑顺序。
HEADER压缩:客户端和服务端利用“首部表”,第一次连接之后只需要发送差异头信息即可。
划分请求优先级:每个请求可以带优先值,根据优先值的高低采取不用的处理策略。
服务端推送(Server Push):服务器可以将客户端可能需要的内容预先推送。
http2是基于TCP协议的,所以一旦连接中的一个流出现丢包的问题,就会造成整个TCP的流全部重传。更改TCP协议是不现实的,所以http3是基于UDP协议的QUIC协议。
Http3:
多路复用:QUIC原生实现多路复用,并且传输的单个数据流可以保证有序交付。流之间并没有依赖,一个流的丢失不会影响其他流的传输。
加密认证的报文:TCP的头部没有经过任何加密和认证,但是QUIC基本全部是经过加密认证的
向前纠错机制:每个数据包除了本身的内容之外,还包括了其他数据包的数据,因此少量的丢包可以通过其他包的冗余数据直接组装而不用重传。(仅限于少量丢包)

6.闭包和模块模式
闭包:保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。
模块模式:利用闭包的特性,形成可进行操作的单例模式,减少全局变量的使用。
// 一个简单的模块模式
      var singleMode = (function() {
        //创建私有变量
        var privateNum = 100;
        // 创建私有函数
        function addNum() {
          // 实现自己的业务逻辑代码
          privateNum++;
        console.log(privateNum)
        }
        // 返回一个对象包含公有方法和属性
        return {
          addNum: addNum
        };
      })();
      //外部调用
      singleMode.addNum(); //privateNum = 101

-END
每个知识点都大有学问,但是在字数限制下没办法写的足够清楚和详尽。所以想真正的融汇贯通还是要靠自己动手哦!
(●´∀`●) 白白~



#面经##社招##前端工程师##小赢科技#
全部评论

相关推荐

9 40 评论
分享
牛客网
牛客企业服务