2018网易前端实习面试总结

摘要:
它是一种使用HTTP作为传输协议,XML作为编码方式的远程调用规范。reflow几乎是无法避免的。现在界面上流行的一些效果,比如树状目录的折叠、展开等,都将引起浏览器的reflow。.将html代码按照深度优先遍历来生成DOM树css文件下载完后,进行渲染,生成相应的CSSOM.所有的css文件下载完且所有的CSSOM构建结束后,就会和DOM一起生成RenderTree。HR面:1.家庭情况2.对未来的展望3.实习时间4.为什么要加入网易?

一面:

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

//3种方法的源码

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

2.解决跨域问题的方法

3.Ajax的过程

2018网易前端实习面试总结第1张

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 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.你有什么要问的?

免责声明:文章转载自《2018网易前端实习面试总结》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇类似西瓜视频、抖音的自动播放库苹果cms测试下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

css3实现小米商城鼠标移动图片上浮阴影效果

今天在编程爱好者编码库看见一个好玩的程序,代码如下。 <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta name="viewport"content="width=device-width, initial-sca...

用原生css实现高斯模糊、黑白等滤镜效果

  —引导— 在CSS3中,有一个强大的属性,那就是filter属性,filter顾名思义就是“滤镜”的意思,用filter属性可以让图片无需PS处理就达到一些简单的显示效果。 —定义和使用— filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。 默认值 none 继承 none 动画支持 是 版本...

【CSS】电脑、移动端公用样式

电脑端: /* Public */ @charset "utf-8"; html, body, div, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td {margin: 0; p...

12小时包你学会基于ReactMix框架的ReactNativeApp开发(二)基于Css+HTML写第一个app页面

上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑。那么今天就是来实战一下,写一个所有平台都能跑的页面出来。 首先我们要准备了解的基本知识如下,在H5开发中,我们的页面布局方式有 1. 默认布局(块状元素和内联元素...

使用@supports完美兼容CSS属性

今天写微信小程序遇到一个问题:给page加 150rpx 的 padding-bottom 值,我考虑到 iphone X 系列的底部黑线,参考我之前写的css属性——env()和constant()设置安全区域;所以我这样写: page{ padding-bottom: calc( constant(safe-area-inset-bottom) +...

利用less监视模式实时预览样式刷新浏览器

【前言】此处介绍的方法只是我个人的用法,相信大家有更好更简洁的方式。 上次写到利用LiveReload解放F5。而且LiveReload可以编辑sass/less/stylus。但是可惜发现LiveReload在编译的时候不能抛错,这就很麻烦了,少了个标点less编译就不过,查找起来太麻烦。 我目前的解决方法: 利用Less自带的客户端开发模式(devel...