首页 > 技术文章 > 2018网易前端实习面试总结

shenminer 2018-04-13 14:04 原文

一面:

1.双向绑定的原理,用js原生怎么写?

//3种方法的源码

https://github.com/WilberTian/Two-way-data-binding.git

2.解决跨域问题的方法

3.Ajax的过程

4.http如何判断那个浏览器访问

   user-agent

5.content-type的类型,你用过那些

application/x-www-form-urlencoded:最常见的 POST 提交数据的方式了。浏览器的原生 form 表单,如果不设置 enctype 属性,

multipart/form-data:常见的 POST 数据提交的方式。我们使用表单上传文件时,必须让 form 的 enctyped 等于这个值。

application/json:

text/xml:XML-RPC(XML Remote Procedure Call)。它是一种使用 HTTP 作为传输协议,XML 作为编码方式的远程调用规范。

6.jquery,$后可以跟什么

选择器,选取元素

$(document).ready(fun)//当文档加载完成时

7.ES6,有了解吗?

箭头函数,类,模块等

 

二面:

1.在做项目的过程中,有没有遇到性能方面的问题,如何优化的

(1)展示页面图片过多,加载缓慢------>懒加载,当该内容在窗口时,显示

                                                                 css sprite合并图片,用定位实现布局,减少图片的加载

         jQuery自带lazyload.js,

1.在需要懒加载的图片上添加如下:

<img class='lazy' data-original='' ">;

data-original为要显示的图片

2.启动懒加载

$("img.lazy").lazyload({

   placeholder:'resources/images/loading.gif'

 effect : "fadeIn",

 container: $("#container"),
  failure_limit : 10
  .....

});

(2).减少http请求,利用浏览器缓存一部分信息

(3).打包压缩js和css文件

(4).减少对dom的操作,使用innerHTML代替DOM操作

2.浏览器渲染的过程?

  DOM Tree:浏览器将HTML解析成树形的数据结构。

  CSSOM:浏览器将CSS解析成树形的数据结构。

  Render Tree: DOM和CSSOM合并后生成Render Tree。

  layout: 有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系,从而去计算出每个节点在屏幕中的位置。

  painting: 按照算出来的规则,通过显卡,把内容画到屏幕上。

  reflow(回流):当浏览器发现某个部分发生了点变化影响了布局,需要倒回去重新渲染,内行称这个回退的过程叫 reflow。reflow 会从 <html> 这个 root frame 开始递归往下,依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。现在界面上流行的一些效果,比如树状目录的折叠、展开(实质上是元素的显 示与隐藏)等,都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码,它们都彼此相互影响着。

  repaint(重绘):改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重画,但是元素的几何尺寸没有变。

过程:

(1).先加载javascript可能会修改DOM,导致后续的html资源白白加载,所以html必须等待javascript文件加载完毕后,再继续渲染。

(2).将html代码按照深度优先遍历来生成DOM树

          css文件下载完后,进行渲染,生成相应的CSSOM

  (3) .所有的css文件下载完且所有的CSSOM构建结束后,就会和DOM一起生成Render Tree。

  (4) .浏览器就会进入Layout环节,将所有的节点位置计算出来。

  (5) . 通过Painting环节将所有的节点内容呈现到屏幕上

3.angular与jQuery的不同,好处?

angular基于数据驱动

jQuery基于DOM驱动

4.研究生阶段,研究的内容?

5.从小到大做过最自豪的事?

 

HR面:

1.家庭情况

2.对未来的展望

3.实习时间

4.为什么要加入网易?

5.你有什么要问的?

推荐阅读