阅读 2673

网易金融前端实习生电话面试整理

大厂前端面试考什么? | 掘金技术征文

前端面试题总结——综合问题

1.CSS作用

CSS:层叠样式表单,渲染HTML元素标签的样式。通过使用CSS样式设计页面的格式,可将页面的内容与表现形式分离。不仅可使维护站点的外观更加容易,而且还可以使HTML文档代码更加简练,缩短浏览器的加载时间。

2.CSS3动画

CSS动画简介

animation:

@keyframes规则用于创建动画,在 @keyframes 中规定CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:

  • 规定动画的名称 animation-name
  • 规定动画的时长 animation-duration

用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。

0% 是动画的开始,100% 是动画的完成。

属性描述
@keyframes规定动画。
animation所有动画属性的简写属性,除了 animation-play-state 属性。
animation-name规定 @keyframes 动画的名称。
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function规定动画的速度曲线。默认是 "ease"。
animation-delay规定动画何时开始。默认是 0。
animation-iteration-count规定动画被播放的次数。默认是 1。
animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode规定对象动画时间之外的状态。

CSS的transition和animation有何区别

transition和animation都可以作动效。

transition

是过渡,由一个状态过渡到另一个状态,比如高度100px过渡到200px;transition的作用在于,指定状态变化所需要的时间。

(1)transition需要事件触发,所以没法在网页加载时自动发生。

(2)transition是一次性的,不能重复发生,除非一再触发。

(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。

(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。

animation

是动画,animation有帧的概念,可以设置关键帧keyframe,一个动画可以由多个状态过渡组成。

3.选择器权重及优先级 

权重分为四级,权重值越大优先级越高。

1.内联样式。如:style=“xxx”,权值为1000

2.ID选择器。如:#content,权值为100

3.类,伪类和属性选择器。如:.content,:hover,[attribute],权值为10

4.元素选择器,伪元素选择器。如:div,p,权值为1

注意:通用选择器(*),子选择器(>),相邻同胞选择器(+)并不在四个等级中,权值为0

权重值越大优先级越高,相同权值后定义覆盖前面定义的

!important  强制重定义,提升优先级。

不要用标签名限制 class 规则,如div.info这样的写法,其实我们可以直接写为.info,从右到左解析的原因可以知道为什么其低效。

4.JQuery机制 

前端知识点总结——JQ(上)

前端知识点总结——JQ(下)

5.AJAX

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。AJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的情况。

1.创建一个ajax对象,var ajax = new XMLHttpRequest();

2.连接服务器,ajax.open(method,url,true );   异步传输(多个事情一起做)

3.发送请求,ajax.send( );

4.接受返回,处理数据。

readystate(浏览器服务器进行到哪一步了)

0:(未初始化)未调用open方法

1:(载入)已调用send方法,正在发送求情

2:(载入完成)send完成

3:(解析)正在解析响应内容

4:(完成)响应内容解析完成

status HTTP状态码

200:成功

301:永久重定向

302:临时重定向

304:资源找到,但不符合条件

404:找不到资源

500:服务器端出错

6.HTTP协议 

HTTP协议详解

HTTP协议是超文本传输协议

HTTP是一个基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)。

HTTP协议工作于客户端-服务端架构为上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后,向客户端发送响应信息。

1.输入地址

2.浏览器通过DNS服务器查找域名的IP地址(DNS查找过程:浏览器缓存->系统缓存->路由器缓存)

3.浏览器向web服务器发送一个HTTP请求

4.服务器永久重定向响应(从http://example.com到http://www.example.com)

5.浏览器跟踪重定向地址

6.服务器处理请求

7.服务返回一个HTTP响应

8.浏览器显示HTML

9.浏览器发送请求获取嵌在HTML中的资源(如图片,音频,视频,css,js等)

10.浏览器发送异步请求


 7.原型 

JS进阶(1) —— 人人都能懂的构造函数

JS进阶(2):人人都能懂的原型对象

 8.闭包

 9.Promise  

es6—Promise

10.回调机制  

JS—回调函数

11.ES6 Class 继承 与原生JS继承区别

小谈ES6中的class与继承

在ES5中,继承实质上是子类先创建属于自己的this,然后再将父类的方法添加到this(也就是使用Parent.apply(this)的方式)或者this.__proto__(即Child.prototype=new Parent())上。

而在ES6中,则是先创建父类的实例对象this,然后再用子类的构造函数修改this

12.跨域

允许跨域请求: link, img, script
不允许跨域: xhr对象 (ajax请求)
变通: script 需要服务器返回一段可执行的js语句

服务器应该返回包含数据的一条可执行的js语句复制代码

如何实现?
客户端实现: JSONP (填充式json)

1. 在客户端定义处理函数

2. 在按钮单击事件中,动态创建script元素,src设置为服务端地址,并携带请求参数callback=函数名(jsonp不支持POST请求,因为script只支持get请求)

3. 在服务器端,接收请求参数中的函数名,将函数名和要返回的数据,拼接为一条可执行的js语句

4. 客户端script,请求服务端php,获得可执行语句,自动调用提前定义好的函数处理数据

5. 在客户端处理函数结尾,要动态删除script

服务器端代理:添加http请求头

CORS


关注下面的标签,发现更多相似文章
评论