前端基础知识点四部曲(四)

服务器端面试篇

1、状态码

2XX(成功处理了请求状态)
          200 服务器已经成功处理请求,并提供了请求的网页
          201 用户新建或修改数据成功
          202 一个请求已经进入后台
          204 用户删除成功
3XX(每次请求使用的重定向不要超过5次)
          304 网页上次请求没有更新,节省带宽和开销
4XX(表示请求可能出错,妨碍了服务器的处理)
          400 服务器不理解请求的语法
          401 用户没有权限(用户名,密码输入错误)
          403 用户得到授权(401相反),但是访问被禁止
          404 服务器找不到请求的网页,
5XX(表示服务器在处理请求的时候发生内部错误)
          500 服务器遇到错误,无法完成请求
          503 服务器目前无法使用(超载或停机维护)

2、304的缓存原理(添加Etag标签.last-modified)

  • 1.服务器首先产生Etag,服务器可在稍后使用它来判断页面是否被修改。本质上,客户端通过该记号传回服务器要求服务器验证(客户端)缓存)
  • 2.304是HTTP的状态码,服务器用来标识这个文件没有被修改,不返回内容,浏览器接受到这个状态码会去去找浏览器缓存的文件
  • 3.流程:客户端请求一个页面A。服务器返回页面A,并在A上加一个Tage客服端渲染该页面,并把Tage也存储在缓存中。客户端再次请求页面A并将上次请求的资源和ETage一起传递给服务器。服务器检查Tage.并且判断出该页面自上次客户端请求之后未被修改。直接返回304

last-modified: 客服端请求资源,同时有一个last-modified的属性标记此文件在服务器最后修改的时间,客服端第二次请求此url时,根据http协议。浏览器会向服务器发送一个If-Modified-Since报头,询问该事件之后文件是否被修改,没修改返回304

 有了Last-Modified,为什么还要用ETag?
  1、因为如果在一秒钟之内对一个文件进行两次更改,Last-Modified就会不正确(Last—Modified不能识别秒单位的修改)
  2、某些服务器不能精确的得到文件的最后修改时间
  3、一些文件也行会周期新的更改,但是他的内容并不改变(仅仅改变修改的事件),这个时候我们并不希望客户端认为文件被修改,而重新Get

ETag,为什么还要用Last-Modified?
  1、两者互补,ETag的判断的缺陷,比如一些图片等静态文件的修改
  2、如果每次扫描内容都生成ETag比较,显然要比直接比较修改时间慢的多。


ETag是被请求变量的实体值(文件的索引节,大小和最后修改的时间的Hash值)
  1、ETag的值服务器端对文件的索引节,大小和最后的修改的事件进行Hash后得到的。

3、get/post的区别

  • 1.get数据是存放在url之后,以?分割url和传输数据,参数之间以&相连; post方法是把提交的数据放在http包的Body中
  • 2.get提交的数据大小有限制,(因为浏览器对url的长度有限制),post的方法提交的数据没有限制
  • 3.get需要request.queryString来获取变量的值,而post方式通过request.from来获取变量的值
  • 4.get的方法提交数据,会带来安全问题,比如登录一个页面,通过get的方式提交数据,用户名和密码就会出现在url上

4、http和https的总结

4.1、http协议的理解

1.超文本的传输协议,是用于从万维网服务器超文本传输到本地资源的传输协议
2.基于TCP/IP通信协议来传递数据(HTML,图片资源)
3.基于运用层的面向对象的协议,由于其简洁、快速的方法、适用于分布式超媒体信息系统
4.http请求信息request:
    请求行(request line)、请求头部(header),空行和请求数据四部分构成

    请求行,用来说明请求类型,要访问的资源以及所使用的HTTP版本.
    请求头部,用来说明服务器要使用的附加信息
    空行,请求头部后面的空行是必须的
    请求数据也叫主体,可以添加任意的其他数据。
5.http相应信息Response
    状态行、消息报头、空行和响应正文

    状态行,由HTTP协议版本号, 状态码, 状态消息 三部分组成
    消息报头,用来说明客户端要使用的一些附加信息
    空行,消息报头后面的空行是必须的
    响应正文,服务器返回给客户端的文本信息。

4.2、http和https的区别

http https
是以安全为目标的HTTP通道,简单讲是HTTP的安全版本,通过SSL加密 超文本传输协议。是一个客服端和服务器端请求和应答的标准(tcp),使浏览器更加高效,使网络传输减少

4.3、http1.0、1.1、2.0的区别

1.0跟1.1的区别:

长连接:HTTP1.0需要使用keep-alive参数来告知服务器建立一个长连接,而HTP1.1默认支持长连接

节约宽带:HTTP1.1支持只发送一个header信息(不带任何body信息)

host域(设置虚拟站点,也就是说,webserver上的多个虚拟站点可以共享同一个ip端口):HTTP1.0没有host域

1.1跟2.0的区别:

  • 1.http2采用的二进制文本传输数据,而非http1文本格式,二进制在协议的解析和扩展更好
  • 2.数据压缩:对信息头采用了HPACK进行压缩传输,节省了信息头带来的网络流量
  • 3.多路复用:一个连接可以并发处理多个请求
  • 4.服务器推送:我们对支持HTTP2.0的webserver请求数据的时候,服务器会顺便把一些客户端需要的资源一起推送到客户端,免得客户端再次创建连接发送请求到服务器端获取。这种方式非常合适加载静态资源

5、web总结

5.1、web缓存

1.web缓存就是存在于客户端与服务器之间的一个副本、当你第一个发出请求后,缓存根据请求保存输出内容的副本
2.缓存的好处
        (1)减少不必要的请求
    (2)降低服务器的压力,减少服务器的消耗
    (3)降低网络延迟,加快页面打开速度(直接读取浏览器的数)

5.2、常见的web安全及防护原理

  • 1.sql注入原理:通郭sql命令插入到web表单递交或者输入活命,达到欺骗服务器执行的恶意sql命令
    防范:1.对用户输入进行校验
    2.不适用动态拼接sql
  • 2.XSS(跨站脚本攻击):往web页面插入恶意的html标签或者js代码。
    举例子:在论坛放置一个看是安全的链接,窃取cookie中的用户信息
    防范:1.尽量采用post而不使用get提交表单
    2.避免cookie中泄漏用户的隐式
  • 3.CSRF(跨站请求伪装):通过伪装来自受信任用户的请求
    举例子:黄轶老师的webapp音乐请求数据就是利用CSRF跨站请求伪装来获取QQ音乐的数据
    防范:在客服端页面增加伪随机数,通过验证码
  • XSS和CSRF的区别:
    1.XSS是获取信息,不需要提前知道其他用户页面的代码和数据包
    2.CSRF代替用户完成指定的动作,需要知道其他页面的代码和数据包

5.3、CDN(内容分发网络)

1.尽可能的避开互联网有可能影响数据传输速度和稳定性的瓶颈和环节。使内容传输的更快更稳定。
2.关键技术:内容存储和分发技术中
3.基本原理:广泛采用各种缓存服务器,将这些缓存服务器分布到用户访问相对的地区或者网络中。当用户访问网络时利用全局负载技术
        将用户的访问指向距离最近的缓存服务器,由缓存服务器直接相应用户的请求(全局负载技术)

6、前端呈现流程(TCP三次握手,DOM树渲染)

6.1、从输入url到获取页面的完整过程

1.查询NDS(域名解析),获取域名对应的IP地址  查询浏览器缓存
2.浏览器与服务器建立tcp链接(三次握手)
3.浏览器向服务器发送http请求(请求和传输数据)
4.服务器接受到这个请求后,根据路经参数,经过后端的一些处理生成html代码返回给浏览器
5.浏览器拿到完整的html页面代码开始解析和渲染,如果遇到外部的css或者js,图片一样的步骤
6.浏览器根据拿到的资源对页面进行渲染,把一个完整的页面呈现出来

6.2、TCP三次握手

客服端发c起请求连接服务器端s确认,服务器端也发起连接确认客服端确认。

  • 第一次握手:客服端发送一个请求连接,服务器端只能确认自己可以接受客服端发送的报文段
  • 第二次握手: 服务端向客服端发送一个链接,确认客服端收到自己发送的报文段
  • 第三次握手: 服务器端确认客服端收到了自己发送的报文段

6.3、浏览器渲染原理及流程 DOM -> CSSOM -> render -> layout -> print

流程:解析html以及构建dom树 -> 构建render树 ->  布局render树 -> 绘制render树
    概念:1.构建DOM树: 渲染引擎解析HTML文档,首先将标签转换成DOM树中的DOM node(包括js生成的标签)生成内容树
          2.构建渲染树: 解析对应的css样式文件信息(包括js生成的样式和外部的css)
          3.布局渲染树:从根节点递归调用,计算每一个元素的大小,位置等。给出每个节点所在的屏幕的精准位置
          4.绘制渲染树:遍历渲染树,使用UI后端层来绘制每一个节点
   
    重绘:当盒子的位置、大小以及其他属性,例如颜色、字体大小等到确定下来之后,浏览器便把这些颜色都按照各自的特性绘制一遍,将内容呈现在页面上
        触发重绘的条件:改变元素外观属性。如:color,background-color等
        重绘是指一个元素外观的改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观
    注意:table及其内部元素需要多次计算才能确定好其在渲染树中节点的属性值,比同等元素要多发时间,要尽量避免使用table布局
    
    重排(重构/回流/reflow): 当渲染书中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建,这就是回流。
        每个页面都需要一次回流,就是页面第一次渲染的时候
    重排一定会影响重绘,但是重绘不一定会影响重排

7、前端储存总结

7.1、存储方式与传输方式

  • 1.indexBD: 是h5的本地存储库,把一些数据存储到浏览器中,没网络,浏览器可以从这里读取数据,离线运用。5m

  • 2.Cookie: 通过浏览器记录信息确认用户身份,最大4kb,这也就限制了传输的数据,请求的性能会受到影响

  • 3.Session: 服务器端使用的一种记录客户状态的机制(session_id存在set_cookie发送到客服端,保存为cookie)

  • 4.localStroage: h5的本地存储,数据永久保存在客服端

      1、cookie,sessionStorage,localStorage是存放在客户端,session对象数据是存放在服务器上
         实际上浏览器和服务器之间仅需传递session id即可,服务器根据session-id找到对应的用户session对象
          session存储数据更安全一些,一般存放用户信息,浏览器只适合存储一般的数据
      2、cookie数据始终在同源的http请求中携带,在浏览器和服务器来回传递,里面存放着session-id
         sessionStorage,localStorage仅在本地保存
      3、大小限制区别,cookie数据不超过4kb,localStorage在谷歌浏览中2.6MB
      4、数据有效期不同,cookie在设置的(服务器设置)有效期内有效,不管窗口和浏览器关闭
        sessionStorage仅在当前浏览器窗口关闭前有效,关闭即销毁(临时存储)
        localStorage始终有效    
    

7.2、SessionStorage和localStorage区别:

1.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在用一个会话的页面中才能被访问(也就是说在第一次通信过程中)
   并且在会话结束后数据也随之销毁,不是一个持久的本地存储,会话级别的储存
2.localStorage用于持久化的本地存储,除非主动删除数据,否则不会过期

7.3、token、cookie、session三者的理解

  • 1、token就是令牌,比如你授权(登录)一个程序时,他就是个依据,判断你是否已经授权该软件(最好的身份认证,安全性好,且是唯一的)用户身份的验证方式
  • 2、cookie是写在客户端一个txt文件,里面包括登录信息之类的,这样你下次在登录某个网站,就会自动调用cookie自动登录用户名服务器生成,发送到浏览器、浏览器保存,下次请求再次发送给服务器(存放着登录信息)
  • 3、session是一类用来客户端和服务器之间保存状态的解决方案,会话完成被销毁(代表的就是服务器和客户端的一次会话过程)cookie中存放着sessionID,请求会发送这个id。sesion因为request对象而产生。

7.3、基于Token的身份验证:(最简单的token: uid用户唯一的身份识别 + time当前事件戳 + sign签名)

  1、用户通过用户名和密码发送请求
  2、服务器端验证
  3、服务器端返回一个带签名的token,给客户端
  4、客户端储存token,并且每次用于发送请求
  5、服务器验证token并且返回数据
  每一次请求都需要token
 cookie与session区别
  1、cookie数据存放在客户的浏览器上,session数据放在服务器上。
  2、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。
  3、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能考虑到减轻服务器性能方面,应当使用COOKIE。
  4、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。

7.4、session与token区别

  • 1、session认证只是把简单的User的信息存储Session里面,sessionID不可预测,一种认证手段。只存在服务端,不能共享到其他的网站和第三方App
  • 2、token是oAuth Token,提供的是认证和授权,认证针对用户,授权是针对App,目的就是让某APP有权访问某用户的的信息。Token是唯一的,token不能转移到其他的App,也不能转到其他用户上。(适用app)
  • 3、session的状态是存在服务器端的,客户端只存在session id, Token状态是存储在客户端的

7.5、Cookie的弊端有哪些???(优势:保存客户端数据,分担了服务器存储的负担)

  1、数量和长度的限制。每个特定的域名下最多生成20个cookie(chorme和safari没有限制)
  2、安全性问题。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容