前端面试题五

1. TCP和UDP的区别

(1)TCP面向连接的;UDP是面向无连接的。

(2)TCP提供可靠的数据传输服务。也就是说,通过TCP连接传送的数据,无差错,不丢失,不重复,且按序到达。UDP尽最大努力交付,即保证不可靠交付。

(3)TCP面向字节流,实际上是TCP把数据看成一连串无结构的字节流。

UDP是面向报文的,UDP没有拥塞控制,因此网络出现拥塞不会使源主机的发送速率变低(对实时应用很有用,如IP电话,实时视频会议等)

(4)每一条TCP连接只能是点到点的。

UDP支持一对一,一对多,多对一和多对多的交互通信。

(5)TCP首部开销20字节。

UDP的首部开销小,只有8个字节。

(6)TCP的逻辑通信信道是全双工的可靠信道,UDP则是不可靠信道。

2. TCP, HTTP、IP分别在哪一层 

TCP:传输层

HTTP:应用层

IP:网络层

3. Vue是怎样编译的

4. 手写防抖

function debounce(f,wait){
  let timer
  return(..args)=>{
        clearTimeout(timer)
        timer=setTimeout(()=>{
            f(...args    )
        },wait)
    }    
}        

5. 常用排序,说一下快速排序

思想:采用分治的思想,通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的数据比另一部分的数据都要小,然后再按此方法对这两部分分别进行排序,整个排序过程可以递归进行。

6. 常用的数据结构

数组、栈、队列、链表、树、散列表、堆、图  

7. 手写Set类,包含add和remove方法

8. 网络的五层模型和七层模型

9. 同源策略,什么地方用到了同源策略

同源策略简单来说就是JavaScript代码能够操作哪些web内容的一条完整的安全限制。也是由Netscape提出的一个著名的安全策略。

而同源则是域名、端口、协议三者相同。

浏览器用到了同源策略。

同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。

10. src和href有哪些区别

(1)请求资源类型不同

href是Hyper Reference的缩写,表示超文本引用。用来建立元素和文档之间的连接。常用的a,link。

src是Soure,在请求资源时,会把其指向的资源下载并应用到文档中,常用的有script、img、iframe

(2)作用结果不同

href用于在当前文档和引用资源之间确立联系。

src用于替换当前内容。

(3)浏览器的解析方式不同

若在文档中添加href,浏览器会识别这个文档并命名为css文件,就会并行下载资源,不会停止对当前文档的处理。这也是为什么建议使用link加载css,而不是使用@import方式。

当浏览器解析到src,会暂停对其他资源的下载和处理,直到将该资源加载、编译和执行完毕。图片和框架等也如此,类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

11. link和@import的区别

(1)link是XHTML标签,除了能够加载CSS,还可以定义RSS等其他事务;而@import属于CSS范畴,只可以加载CSS。
(2)link引用CSS时,在页面载入时同时加载;@import需要页面完全载入以后再加载。
(3)link是XHTML标签,无兼容问题;@import则是在CSS2.1提出的,低版本的浏览器不支持。
(4)link支持使用Javascript控制DOM改变样式;而@import不支持。

12. ajax请求中readyState都有哪些,代表什么

readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕

5 个状态,分别是 0-4
0: 还没调用open方法
1: 未调用send方法,也就是还没发送数据给服务器
2: 还没有接收到响应
3: 开始接收到了部分数据
4: 接收完成,数据可以在客户端使用了

常用状态码(status)及其含义:

404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改 )

13. 前端安全

(1)xss跨站脚本攻击

  原理:页面渲染的数据中包含可运行的脚本

  攻击的基本类型:反射型(url参数直接注入)和存储型(存储到DB后读取时注入)

  注入点:HTML节点内的内容(text);HTML中DOM元素的属性;Javascript代码;富文本

//HTML节点内容注入
<div><script>alert(1);</script></div>  

//DOM属性注入
<img src='/images/1.png' onerror='alert(1);'>  

//javascript代码
<script>
    var a = '1';alert(1);''
</script>

//富文本是html标签,文字,以及样式的集合,很容易实现HTML节点内容注入和DOM属性注入,有被攻击的风险

  

(2)csrf跨站请求伪造攻击

  原理:在第三方网站向本网站发起请求(如图)

  

(3)点击劫持

  原理:第三方网站通过iframe内嵌某一个网站,并且将iframe设置为透明不可见,将其覆盖在其他经过伪装的DOM上,伪装的可点击DOM(按钮等)与实际内嵌网站的可点击DOM位置相同,当用户点击伪装的DOM时,实际上点击的是iframe中内嵌的网页的DOM从而触发请求操作

  特点:用户自己做了点击操作;用户毫不知情;

如何防御:(1)xss攻击防御

  1)浏览器自带防御机制,主要应对反射型攻击(HTML内容或属性):http响应头中自动添加x-xss-protection,值为0(关闭),1(打开),默认打开

  2)对特定字符做转义:内容注入替换尖括号( < => &lt;   > => &gt; ) 属性注入替换单引号或双引号( " => &quot;  ' => &#39; )

  3)CSP(Content Security Policy)内容安全策略:用于指定哪些内容可执行

//我们可以在http响应头中设置Content-Security-Policy
//图片可以从任何地方加载(注意 "*" 通配符)
//多媒体文件仅允许从 media1.com 和 media2.com 加载(不允许从这些站点的子域名)
//可运行脚本仅允许来自于userscripts.example.com
Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com

//同时meta中也支持设置Content-Security-Policy
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">

  (2)csrf防御

    1)禁止第三方网站携带本网站的cookie信息:设置same-site属性,same-site属性有两个值,Strict(所有的第三方请求都不能携带本网站的cookie)和Lax(链接可以,但是form表单提交和ajax请求不行

    2)本网站前端页面添加验证信息:使用验证码或者添加token验证

  验证码:当发起请求时,前端需要输入本网站页面的验证码信息,后端对验证码进行验证,验证码正确才会进行相关操作(存取数据等)

  token验证:a站前端将token存在当前页面中(比如表单中的input隐藏域,meta标签或者任何一个dom的属性)和cookie中,当请求a站后端的时候,参数中带上这个token字段,a站后端将参数中的token和cookie中的token做对比, 相同则验证通过,不同则请求不合法

不管是验证码还是token验证,原理都是一样的,在a站前端页面加入验证,当第三方网站请求a站后端时,即使能携带a站cookie,但是因为没有经过a站的前端页面从而拿不到验证信息,也会导致请求失败。

两种防御的方法也有区别,验证码需要用户去填写,从而增加了用户使用网站的复杂度,而token验证在用户无感知的情况下就可以实现,不影响用户体验。我个人理解,验证码验证一般使用在需要提高用户认知的场景,比如,登录多次失败,修改个人信息(用户名,密码,绑定手机号等等),而一些获取商品列表信息,搜索等接口,使用token比较合理。可以看看我们平时使用的这些网站,作参考~

    3)referer验证:禁止来自第三方的请求

    4)使用post请求:有一个说法是“post请求比get请求更安全”,那这种说法对不对呢?实际上这种说法并不准确,对于CSRF攻击来讲,不管是post还是get都能实现攻击,区别只是post请求攻击方需要构造一个form表单才可以发起请求,比get请求(img的src, a标签的href等等)的攻击方式复杂了一些,但是并不能有效的阻止攻击。

(3)点击劫持攻击防御

   1)Javascript禁止内嵌:当网页没有被使用iframe内嵌时,top和window是相等的;当网页被内嵌时,top和window是不相等的;可以在本网站的页面中添加如下判断:

<script>
if (top.location != window.location) {
    //如果不相等,说明使用了iframe,可进行相关的操作
}
</script>

但是这种方式并不是万能的,因为iframe标签中的属性sandbox属性是可以禁用内嵌网页的脚本的:

<iframe sandbox='allow-forms' src='...'></iframe>

    2)设置http响应头 X-Frame-Options:有三个值 DENY(禁止内嵌) SAMEORIGIN(只允许同域名页面内嵌) ALLOW-FROM(指定可以内嵌的地址)

    能在所有的web服务器端预设好X-Frame-Options字段值是最理想的状态。

   3)一些辅助手段,比如添加验证码,提高用户的防范意识

14. 在调用接口的页面中,刚进来时产生白屏可能是什么原因?

(1)首页直出时间过长

(2)依赖js没加载完全

(3)文件依赖关系表map.js加载不正确

(4)接口调用时间过长

解决方案:
(1) 如果是基于 Cake[3] 工具开发的,也可以直接用首屏填充伪标签。

(2) 尽量同步输出,异步输出请尽量 mock 出现在首屏的模板。

(3) 需要使用nodejs直出了,通过在服务端增加一个nodejs中间层,由nginx将前端的请求转发到nodejs上,nodejs响应请求,加载资源,向底层的cgi进行API请求,之后进行拼接,返回html页面,这样资源跟api的请求时间都在服务端完成,缩短了时间,至于模板之类的,还是能够用到前端。当然nodejs也会有请求资源错误的情况,这个时候就需要返回错误标志给前端,前端再发起原来的异步请求,这种方式相当于一种容灾保障。

(4)因为是应用方式,所以总是难免存在一些基础依赖,比如modjs,backbone, underscore, jquery等,这种一般都会通过打包成一个js来减少http请求以及文件大小。针对这种情况,只能通过打包模式,加载资源的模式进行改进。强烈按照“首页必须”进行开发,按需加载,其他的资源可以放在二屏,毕竟首页决定着是否还会继续使用。

(5) 尽量减少文件夹的嵌套,文件名不要过长
接口调用时间过长也会导致单页面应用的加载时间过长,这种我们主要是前端需要给接口设置timeout

(6)可订制的客户端,也可以仿照(manifest/appcache,不完善不适合)做一个缓存机制,即是判断服务器版本是否与客户端保存的资源一致,不一致即下载新的,一致即直接使用本地的,这样就变成一个类本地应用了。

15. vue组件间通信方式

(1)v-bind      props

(2)emit       v-on

(3)$children    $parent

(4)project   inject

(5)eventBus

(6)vuex

原文地址:https://www.cnblogs.com/yjw520/p/15191624.html