求职刷题神器

funit.cn

讨论区 > 求职面经 > 京东的前端开发面试 挂在一面

京东的前端开发面试 挂在一面

陈不渡
发布于2021-03-10 10:49:51 135浏览

应该是简历过了之后,直接突击电面,很尴尬,一开始直接让自我介绍,完全没准备,支支吾吾说完了。全程通话效果也不是很好,好几个问题问了面试官才确认问的啥!主要自己还太菜,面试官老师很好,不为难的提示也还不会。继续加油吧!希望下次不会凉凉。


1. 前端基础学了哪些?框架接触了哪些?

根据自己实际情况,我回答前端三件套,框架学习了VUE。


2. CSS盒模型知道吗?解释下你的理解?

简介: 就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。 box-sizing(有3个值哦):border-box,padding-box,content-box.

区别: 这两种盒子模型最主要的区别就是width的包含范围,在标准的盒子模型中,width指content部分的宽度,在IE盒子模型中,width表示content+padding+border这三个部分的宽度,故这使得在计算整个盒子的宽度时存在着差异:

标准盒子模型的盒子宽度:左右border+左右padding+width

IE盒子模型的盒子宽度:width

在CSS3中引入了box-sizing属性,box-sizing:content-box;表示标准的盒子模型,box-sizing:border-box表示的是IE盒子模型


3. HTTP请求过程解释下?

解析URL->DNS查询->TCP封包传输->服务器接收并响应->浏览器渲染

(1)建立TCP连接(TCP三次握手)

在HTTP工作开始之前,Web浏览器首先要通过网络与Web服务器建立连接,该连接是通过TCP来完成的,该协议与IP协议共同构建Internet,即著名的TCP/IP协议族,因此Internet又被称作是TCP/IP网络。HTTP是比TCP更高层次的应用层协议,根据规则,只有低层协议建立之后才能,才能进行更高层协议的连接,因此,在HTTP工作开始之前首先要建立TCP连接。

(2)Web浏览器向Web服务器发送请求命令

一旦建立了TCP连接,Web浏览器就会向Web服务器发送请求命令例如:GET/sample/hello.jsp HTTP/1.1

(3)Web浏览器发送请求头信息

浏览器发送其请求命令之后,还要以头信息的形式向Web服务器发送一些别的信息,之后浏览器发送了一空白行来通知服务器,它已经结束了该头信息的发送。

(4) Web服务器应答

客户机向服务器发出请求后,服务器会客户机回送应答, HTTP/1.1 200 OK 应答的第一部分是协议的版本号和应答状态码

(5) Web服务器发送应答头信息

正如客户端会随同请求发送关于自身的信息一样,服务器也会随同应答向用户发送关于它自己的数据及被请求的文档。

(6) Web服务器向浏览器发送数据

Web服务器向浏览器发送头信息后,它会发送一个空白行来表示头信息的发送到此为结束,接着,它就以Content-Type应答头信息所描述的格式发送用户所请求的实际数据

(7) Web服务器关闭TCP连接(TCP四次挥手)

一般情况下,一旦Web服务器向浏览器发送了请求数据,它就要关闭TCP连接,然后如果浏览器或者服务器在其头信息加入了这行代码 Connection:keep-alive. TCP连接在发送后将仍然保持打开状态,于是,浏览器可以继续通过相同的连接发送请求。保持连接节省了为每个请求建立新连接所需的时间,还节约了网络带宽。


4. 常用的布局方式有哪些?

  • 静态布局(Static Layout)

最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。

优点:采用的是css2之前的写法,不存在浏览器兼容性。布局简单。

缺点:移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。

  • 流式布局(Liquid Layout)

流式布局也叫百分比布局

流式布局的特点是随着屏幕的改变,页面的布局没有发生大的变化,可以进行适配调整,这个正好与自适应布局相补。 流式布局常用的设计模板:

左侧固定+右侧自适应

左右固定宽度+中间自适应

页面元素的宽度按照屏幕进行适配调整,主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

你看到的页面,元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

优点: 元素的宽高用百分比做单位,元素宽高按屏幕分辨率调整,布局不发生变化

缺点: 屏幕尺度跨度过大的情况下,页面不能正常显示。

  • 弹性布局(Flex Layout)

弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使 的一些复杂易错的hacks方法(如float实现流式布局)。

优点 简单、方便、快速

缺点CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。

  • 响应式布局(Responsive layout)

采用自适应布局和流式布局的综合方式,为不同屏幕分辨率范围创建流式布局

现在优秀的页面都追求一套代码可以实现三端的浏览;

从概念可以看出来,自适应布局的诞生是为了实现不同屏幕分辨率的终端上浏览网页的不同展示方式。

通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.

利用媒体查询可以检测到屏幕的尺寸(主要检测宽度),并设置不同的CSS样式,就可以实现响应式的布局。


5.H5了不了解,有哪些新特性?

项目

新增或改变

实践web语义化

增加了header,footer,nav,aside,section等语义化标签

增强表单

为input增加了color,emial,data,range等类型

存储方面

提供了sessionStorage,localStorage,和离线存储,方便数据在客户端的存储和获取

多媒体方面

规定了音频和视频元素audio和vedio

其他

还有地理定位,canvas画布,拖放,多线程编程的web worker和websocket协议


6. js的作用域解释下?请举例说明?

作用域是可访问变量的集合。在 JavaScript 中, 对象和函数同样也是变量。所以在 JavaScript 中, 作用域为可访问变量、对象、函数的集合。


7. 数组常用的方法?答了之后加问数组和字符串之间的转换方式?

  • 常用方法:push(),pop(),shift(),unshift(),splice(),sort(),reverse(),map()等
  • 数组和字符串之间的转换:

ARRAY.join('转为字符串后两个值之间的元素')

ARRAY.split('字符串转数组值区分依据')

  • 数组去重


法一:indexOf循环去重

法二:ES6 Set去重;Array.from(new Set(array))

法三:Object 键值对去重;把数组的值存成 Object 的 key 值,比如 Object[value1] = true,在判断另一个值的时候,如果 Object[value2]存在的话,就说明该值是重复的。


8. 其他数据结构你还熟悉哪些?请解释下二叉树?

二叉树是一个连通的无环图,并且每一个顶点的度不大于3。有根二叉树还要满足根结点的度不大于2。有了根结点之后,每个顶点定义了唯一的父结点,和最多2个子结点。然而,没有足够的信息来区分左结点和右结点。如果不考虑连通性,允许图中有多个连通分量,这样的结构叫做森林。


9. 浏览器储存方式你知道哪几种?用过哪几种?区别是啥?

  • Cookie、sessionStorage、localStorage的区别

共同点:都是保存在浏览器端,并且是同源的

Cookie:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。 (key:可以在浏览器和服务器端来回传递,存储容量小,只有大约4K左右)

sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持,localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。 (key:本身就是一个回话过程,关闭浏览器后消失,session为一个回话,当页面不同即使是同一页面打开两次,也被视为同一次回话)

localStorage:localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。 (key:同源窗口都会共享,并且不会失效,不管窗口或者浏览器关闭与否都会始终生效)

补充说明一下cookie的作用:保存用户登录状态。例如将用户id存储于一个cookie内,这样当用户下次访问该页面时就不需要重新登录了,现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间,当超过时间期限后,cookie就会自动消失。因此,系统往往可以提示用户保持登录状态的时间:常见选项有一个月、三个月、一年等。跟踪用户行为。例如一个天气预报网站,能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的,当利用了cookie后就会显得很人性化了,系统能够记住上一次访问的地区,当下次再打开该页面时,它就会自动显示上次用户所在地区的天气情况。因为一切都是在后台完成,所以这样的页面就像为某个用户所定制的一样,使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能,那么可以使用cookie来记录用户的选项,例如:背景色、分辨率等。当用户下次访问时,仍然可以保存上一次访问的界面风格。


10. 你用过VUE,解释下你是怎么理解渐进式框架?

对于渐进式框架最简单的解释如下

渐进式框架是弱化主张的框架,不需要强行适用他的所有东西。在使用过程中,你可以根据需要引入我的部分,而不需要必须使用我的所有部分。

11. Vue里面的双向绑定原理?

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。原文链接

我们已经知道实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令(如v-model,v-on)对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。因此接下去我们执行以下3个步骤,实现数据的双向绑定:

1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。

2.实现一个订阅者Watcher,每一个Watcher都绑定一个更新函数,watcher可以收到属性的变化通知并执行相应的函数,从而更新视图。

3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令(v-model,v-on等指令),如果节点存在v-model,v-on等指令,则解析器Compile初始化这类节点的模板数据,使之可以显示在视图上,然后初始化相应的订阅者(Watcher)。

12. 开始问项目?你在项目中做了什么?用了哪些前端框架?

这部分我没有答好,说得太啰嗦!所以自己也总结以下,下次面试的时候希望自己能抓住重点...


13. 确定能够实习的时间? ...


13. 问我是不是去年10月才接触计算机相关的东西? ...


本文首次发布于趣IT ,转载请注明出处,谢谢合作

京东的前端开发面试 挂在一面

全部评论0

成为第一个评论的人

还可以上传7

表情
  • 快速扫码进群
    加入职友圈
下一步
知道了