头部背景图片
小畅童鞋的学习笔记 |
小畅童鞋的学习笔记 |

前后端交互面经

秋招季,总结一下前后端交互部分面经~

一. 跨域问题:

什么是跨域?

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。
所谓同源是指,协议,域名,端口均相同。
注意:
如果是协议和端口造成的跨域问题“前台”是无能为力的;
在跨域问题上,域仅仅是通过“URL的首部”来识别

解决方案:

特别注意两点:
第一,如果是协议和端口造成的跨域问题“前台”是无能为力的,
第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
1. JSONP方式解决跨域问题
script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。
2. CORS解决跨域问题
对后台进行配置,例如:PHP端修改header,然后配置Apache web服务器跨域
3. 代理请求方式解决接口跨域问题
前端对接口进行代理:(前端ajax请求的是本地接口;本地接口接收到请求后向实际的接口请求数据,然后再将信息返回给前端;一般用node.js即可代理;)
详情参考https://segmentfault.com/a/1190000012469713

二. Jsonp实现原理

  1. 拥有”src”这个属性的标签都拥有跨域的能力,比如<\script>、<\img>、<\iframe>
    当需要通讯时,本站脚本创建一个script元素,地址指向第三方的API网址,形如:
<script src="http://www.example.net/api?param1=1¶m2=2"></script>

并提供一个回调函数localHandler来接收数据(函数名可约定,或通过地址参数传递)。

<script src="http://www.example.net/api?param1=1&callback=localHandler" type="text/javascript">
var localHandler = function(data){
    alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' + data.result);
};
</script>
  1. 第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),形如:
localHandler(
    {
        "result":"hax",
        "gender":"Male"
    }
)
  1. 这样浏览器会调用localHandler函数,并传递解析后json对象作为参数。

三. 从输入一个URL到页面加载完成的过程中都发生了什么事情?

主要分为6步:

  1. DNS域名解析
  2. 浏览器与服务器建立TCP连接(3次握手过程)
  3. 浏览器向服务器发起HTTP请求
  4. 服务器接受请求,进行响应结果,将生成的html返回给客户端
  5. 浏览器解析HTML,并请求html代码中的资源
  6. 浏览器对页面进行渲染呈现给用户

网络通信的整个流程:

流程描述:
第一步:打开浏览器,想要请求访问京东,在地址栏输入了网址:www.jd.com。(www.jd.com是域名就是一个IP地址的名称,IP地址不好记,所有有了域名。)
第二步:先将请求信息发给了交换机,然后交给了路由器,路由发给DNS服务器,通过DNS协议去找我们要访问的京东的IP地址:
  第三步:查到的京东服务器对应的IP地址之后,路由器通过路由协议找到一个路由转发的最优路径,将你的请求信息还送给这个IP地址的京东的路由器
  第四步:京东的路由器发给了京东网站的服务器上
  第五步:京东网站服务器按照来的时候的路径,在返回给你他自己的网站
  第六步:当你打开浏览器的时候,你的电脑给你的浏览器这个运行起来的程序给了一个编号,叫做端口号,当你的电脑收到京东发送过来的消息的时候,你的电脑通过端口号找到你的浏览器,你的浏览器拿到了京东的网站信息,然后将网站呈现在了自己的浏览器上

四. 进程和线程的区别

  • 进程:是并发执行的程序在执行过程中分配和管理资源的基本单位,是一个动态概念,竞争计算机系统资源的基本单位。
  • 线程:是进程的一个执行单元,是进程内科调度实体。比进程更小的独立运行的基本单位。线程也被称为轻量级进程。
    一个程序至少一个进程,一个进程至少一个线程。

  • 对资源的管理和保护要求高,不限制开销和效率时,使用多进程
    要求效率高,频繁切换时,资源的保护管理要求不是很高时,使用多线程

  • 线程共享进程资源,进程之间的资源独立
    一个进程崩溃后,在保护模式下不会对其他进程产生影响,但是一个线程崩溃整个进程都死掉。所以多进程要比多线程健壮。进程切换时,消耗的资源大,效率高

  • 线程与进程的区别:
    a. 一个程序至少有一个进程,一个进程至少有一个线程
    b. 线程的划分尺度小于进程,使得多线程程序的并发性高
    c. 进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率
    d. 每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制
    e. 多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配

五. 队列和栈介绍

  • 队列:先进先出,表尾插入,表头删除
    :先进后出,表尾删除插入
  • 栈与队列的相同点:
    1.都是线性结构。
    2.插入操作都是限定在表尾进行。
    3.都可以通过顺序结构和链式结构实现。
    4.插入与删除的时间复杂度都是O(1),在空间复杂度上两者也一样。
    5.多链栈和多链队列的管理模式可以相同。

六. Post和get区别

  • Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE,对URL地址(网络上的资源)的查,改,增,删4个操作。5、HEAD;6、TRACE;7、OPTIONS;方法
    Image1.png
  • Post和put区别
    PUT请求:如果两个请求相同,后一个请求会把第一个请求覆盖掉。(所以PUT用来改资源)
    Post请求:后一个请求不会把第一个请求覆盖掉。(所以Post用来增资源)

七. 计算机网络的七层OSI

应用层、表示层、会话层、传输层、网络层、数据链路层、物理层
Image2.png

八. TCP/IP五层模型的协议

应用层、传输层、网络层、数据链路层、物理层

九. TCP和UDP的区别是什么

Image3.png

十. TCP与HTTP的不同,HTTP是什么,HTTPS是什么

  • HTTP协议即超文本传送协议(Hypertext Transfer Protocol ),是Web联网的基础,也是手机联网常用的协议之一,HTTP协议是建立在TCP协议之上的一种应用。
  • HTTPS即加密的HTTP,HTTPS并不是一个新协议,而是HTTP+SSL(TLS)。原本HTTP先和TCP(假定传输层是TCP协议)直接通信,而加了SSL后,就变成HTTP先和SSL通信,再由SSL和TCP通信,相当于SSL被嵌在了HTTP和TCP之间。
  • TCP是传输层,而http是应用层,http是要基于TCP连接基础上的
    TCP就是单纯建立连接,不涉及任何我们需要请求的实际数据,简单的传输。
    http是用来收发数据,即实际应用上来的。

十一. TCP的三次握手,为什么不是两次?

  • 三次握手:请求,确认,建立连接
    第一次:客户端C发送一个请求连接的位码SYN(1)和一个随机产生的序列号Seq(x)给服务器S,C进入SYN_SEND状等待服务器确认。
    第二次:S收到了这个请求连接的位码SYN(1),实现确认一下,发送了一个确认码ACK(x+1)+SYN(1)+Seq(y)给进入SYN_RECV状态。
    第三次:C收到了SYN+ACK,一比较一样,于是他又发送了一个ACK(y+1)+Seq(z)给S,S收到以后就确定建立连接,C和S进入ESTABLISHED状态,TCP连接建立完成。
  • 为什么不是两次?
    三次是①C能和S通信②S能和C通信③S和C建立连接,
    两次的话,不能确定S和C是否能通信,会产生问题
    Image4.png

十二. 四次挥手:确保数据能够完整传输。

  1. 第一次挥手:Client发送一个FIN,用来关闭Client到Server的数据传送,Client进入FIN_WAIT_1状态。C没数据传输了
  2. 第二次挥手:Server收到FIN后,发送一个ACK给Client,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号),Server进入CLOSE_WAIT状态。S说我也没了
  3. 第三次挥手:Server发送一个FIN,用来关闭Server到Client的数据传送,Server进入LAST_ACK状态。C请求关闭
  4. 第四次挥手:Client收到FIN后,Client进入TIME_WAIT状态,接着发送一个ACK给Server,确认序号为收到序号+1,Server进入CLOSED状态,完成四次挥手。S同意并关闭

十三. Ajax工作原理

  1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
  3. 设置响应HTTP请求状态变化的函数.
  4. 发送HTTP请求.
  5. 获取异步调用返回的数据.
  6. 使用JavaScript和DOM实现局部刷新.

十四. HTTP状态码及常见举例

1** :信息,服务器收到请求,需要请求者继续执行操作
2** :成功,操作被成功接收并处理
3** :重定向,需要进一步的操作以完成请求
4** :客户端错误,请求包含语法错误或无法完成请求
5** :服务器错误,服务器在处理请求的过程中发生了错误
100 :继续。客户端应继续其请求。
101 :切换协议,服务器根据客户端的请求切换协议。只能切换到更高级的协议,例如,切换到HTTP的新版本协议
200 :OK。请求成功,一般用于Get和post请求。
201 :已创建。成功请求并创建了新的资源。
202 :已接受。已经接受请求,但未处理完成
203 :非授权信息。请求成功。但返回的meta信息不在原始的服务器,而是一个副本。
204:无内容。服务器成功处理,但未返回内容。在未更新网页的情况下,可确保浏览器继续显示当前文档。
300:多种选择。请求的资源可包括多个位置,相应可返回一个资源特征与地址的列表用于用户终端(例如:浏览器)选择。
301 :永久移动。请求的资源已被永久的移动到新URI,返回信息会包括新的URI,浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替。
302:临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI。
304:服务端资源无变化,可使用缓存资源
307:临时重定向。与302类似。使用GET请求重定向。
400:客户端请求的语法错误,服务器无法理解
401:请求要求用户的身份认证
403:服务端禁止访问该资源
404:服务器无法根据客户端的请求找到资源(网页)。
408:服务器等待客户端发送的请求时间过长,超时。
410:客户端请求的资源已经不存在。410不同于404,如果资源以前有现在被永久删除了可使用410代码,网站设计人员可通过301代码指定资源的新位置。
411:服务器无法处理客户端发送的不带Content-Length的请求信息
414:请求的URI过长(URI通常为网址),服务器无法处理
417:服务器无法满足Expect的请求头信息。
500:服务器内部错误,无法完成请求。
501:服务器不支持请求的功能,无法完成请求。
502:充当网关或代理的服务器,从远端服务器接收到了一个无效的请求
503:由于超载或系统维护,服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中。
504:充当网关或代理的服务器,未及时从远端服务器获取请求。
505:服务器不支持请求的HTTP协议的版本,无法完成处理。

十五. 死锁是什么

死锁是指两个或两个以上的进程在执行过程中,由于竞争资源或者由于彼此通信而造成的一种阻塞的现象,双方都在等待对方停止运行,以获取系统资源,但是没有一方提前退出时,就称为死锁。永远在互相等待的进程称为死锁进程。

十六. 自适应和响应式区别

两者都是优化适应互联网中越来越分化的视口.
应该说响应式的范畴更广一些。
响应式可以自动适应不同尺寸的屏幕,无论你的设备尺寸多么奇葩。响应式使用CSS media queries的方法,根据目标设备自动改变风格如显示类型,宽度、高度等,这能很好解决不同屏幕尺寸的显示问题。
是一个网站能够兼容多个终端而不是为每个终端做一个特定的版本,这个概念是为移动互联网浏览而诞生。
自适应设计是基于断点使用静态布局,一旦页面被加载就无法再进行自动适应,自适应会自动检测屏幕的大小来加载适当的工作布局,也就是说,当你要采用自适应设计网站时,你得一个一个设计6种常见的屏幕布局。[自适应设计要求为每一个布局单独开发和维护HTML和CSS代码]
1、320 2、480 3、760 4、960 5、1200 6、1600
自适应设计需要做更多的工作,你必须至少设计6种常见的布局。而响应式设计可以更好地适应复杂的媒体设备要求,能很好地解决显示和性能问题,修改相当麻烦。修改相当麻烦。

十七. 谈谈你对前端性能优化的理解

  1. 请求数量:合并脚本和样式表,CSS Sprites,拆分初始化负载,划分主域
  2. 请求带宽:开启GZip,精简JavaScript,移除重复脚本,图像优化,将icon做成字体
  3. 缓存利用:使用CDN,使用外部JavaScript和CSS,添加Expires头,减少DNS查找,配置ETag,使AjaX可缓存
  4. 页面结构:将样式表放在顶部,将脚本放在底部,尽早刷新文档的输出
  5. 代码校验:避免CSS表达式,避免重定向

十八. 请说出三种减少页面加载时间的方法

  1. 尽量减少页面中重复的HTTP请求数量
  2. 服务器开启gzip压缩
  3. css样式的定义放置在文件头部
  4. Javascript脚本放在文件末尾
  5. 压缩合并Javascript、CSS代码
  6. 使用多域名负载网页内的多个文件、图片

十九. 什么叫优雅降级和渐进增强?

  • 渐进增强 progressive enhancement:
    针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
  • 优雅降级 graceful degradation:
    一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

    渐进增强和优雅降级的区别:

  1. 优雅降级是从复杂的现状开始,并试图减少用户体验的供给
  2. 渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要
  3. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带

二十. 一次js请求一般情况下有哪些地方会有缓存处理?

  1. 浏览器端存储
  2. 浏览器端文件缓存
  3. HTTP缓存304
  4. 服务器端文件类型缓存
  5. 表现层&DOM缓存

二十一. 一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验[性能优化]。

  1. 图片懒加载,滚动到相应位置才加载图片。
  2. 图片预加载,如果为幻灯片、相册等,将当前展示图片的前一张和后一张优先下载。
  3. 使用CSSsprite,SVGsprite,Iconfont、Base64等技术,如果图片为css图片的话。
  4. 如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。

二十二. 网站重构的理解

重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。

  1. 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
  2. 对于移动平台的优化,针对于SEO进行优化
  3. 减少代码间的耦合,让代码保持弹性
  4. 压缩或合并JS、CSS、image等前端资源

二十三. 谈谈以前端角度出发做好SEO需要考虑什么?

  1. 了解搜索引擎如何抓取网页和如何索引网页
  2. meta标签优化
  3. 关键词分析
  4. 付费给搜索引擎
  5. 链接交换和链接广泛度(Link Popularity)
  6. 合理的标签使用

二十四. 前端页面有哪三层构成,分别是什么?作用是什么?

  1. 结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达。解决了页面“内容是什么”的问题。
  2. 表示层:由CSS负责创建,解决了页面“如何显示内容”的问题。
  3. 行为层:由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。

二十五. 系统访问量变高了,速度变慢了怎么办?

优化。
优化方式很多,如:读写分离、负载均衡
资源服务器和应用服务器分离,即应用部署在应用服务器上,资源部署在资源服务器上。这时候,js和css的引用就需要更改为绝对URL,指向对应的资源服务器。

二十六. WEB应用从服务器主动推送Data到客户端有那些方式?

  1. html5 websoket
  2. WebSocket 通过 Flash
  3. XHR长时间连接
  4. XHR Multipart Streaming
  5. 不可见的Iframe
  6. 标签的长时间连接(可跨域)

二十七. 知道的网页制作会用到的图片格式有哪些?

png-8,png-24,jpeg,gif,svg
Webp:谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
Apng:全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展,可以实现png格式的动态图片效果。04年诞生,但一直得不到各大浏览器厂商的支持,直到日前得到 iOS safari 8的支持,有望代替GIF成为下一代动态图标准。

二十八. AMD和CMD 规范的区别?

AMD 提前执行依赖 - 尽早执行,requireJS 是它的实现
CMD 按需执行依赖 - 懒执行,seaJS 是它的实现

二十九. CDN(内容分发网络,Content Distribute Network)的概念以及使用CDN加速的优点。

CDN解决的是如何将数据快速可靠从源站传递到用户的问题。用户获取数据时,不需要直接从源站获取,通过CDN对于数据的分发,用户可以从一个较优的服务器获取数据,从而达到快速访问,并减少源站负载压力的目的。

三十. 前端 MV*框架的意义

  • 早期前端都是比较简单,基本以页面为工作单元,内容以浏览型为主,也偶尔有简单的表单操作,基本不太需要框架。
  • 随着 AJAX 的出现,Web2.0的兴起,人们可以在页面上可以做比较复杂的事情了,然后前端框架才真正出现了。
  • 如果是页面型产品,多数确实不太需要它,因为页面中的 JavaScript代码,处理交互的绝对远远超过处理模型的,但是如果是应用软件类产品,这就太需要了。
  • 长期做某个行业软件的公司,一般都会沉淀下来一些业务组件,主要体现在数据模型、业务规则和业务流程,这些组件基本都存在于后端,在前端很少有相应的组织。
  • 从协作关系上讲,很多前端开发团队每个成员的职责不是很清晰,有了前端的 MV框架,这个状况会大有改观。
  • 之所以感受不到 MV*框架的重要性,是因为Model部分代码较少,View的相对多一些。如果主要在操作View和Controller,那当然 jQuery 这类库比较好用了。

三十一. 对前端工程师这个职位是怎么看的?

前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近。

  1. 实现界面交互
  2. 提升用户体验
  3. 有了Node.js,前端可以实现服务端的一些事情

前景:

  1. 前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更??
  2. 参与项目,快速高质量完成实现效果图,精确到1px;
  3. 与团队成员,UI设计,产品经理的沟通;
  4. 做好的页面结构,页面重构和用户体验;
  5. 处理hack,兼容、写出优美的代码格式;
  6. 针对服务器的优化、拥抱最新前端技术。

三十二. 平时如何管理你的项目?

  1. 先期团队必须确定好全局样式(globe.css),编码模式(utf-8) 等;
  2. 编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行);
  3. 标注样式编写人,各模块都及时标注(标注关键样式调用的地方);
  4. 页面进行标注(例如 页面 模块 开始和结束);
  5. CSS跟HTML 分文件夹并行存放,命名都得统一(例如style.css);
  6. JS 分文件夹存放 命名以该JS功能为准的英文翻译。
  7. 图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理

三十三. 说说最近最流行的一些东西吧?常去哪些网站?

CSDN、SegmentFault、php.net、MDN、css参考手册、iconfont、underscore、github、Bootstrap、W3Shool、W3Cplus、caniuse

Lililich's Blog