巉岩2019前端经典面试题

2021年1月21日发(作者：冉庸)
1
，

html
和
xml
有什么区别

html
是超文本标记语言


xml
是可扩展标记语言

html
语法宽松，
xml
语法严谨

html
使用固有标记，
xml
没有固有标记

html
标签预定义，
xml
标签可扩展，可定义

html
是用来显示数据的，
xml
是用来描述和存储数据的

2
，

css
有哪几种选择器？权重的优先级？

第一种为

属性选择器

第二种为

id
选择器

第三种为

class
选择器

第四种为

伪类选择器

第五种是

后代选择器

第六种是

标签选择器

第七种是

通用选择器

第八种是

伪元素选择器

1.
第一等：代表内联样式，如
: style=
”
”
，权值为
1000
。

2. < br>第二等：代表
ID
选择器，如：
#content
，权值为
0 100
。

3.
第三等：代表类，伪类和属性选择器，如
.con tent
，权值为
0010
。

4.
第四等：代表类型选择器和伪元素选择器，如
div p
，权值为
0001
。

5.
通配符、子选择器、相邻选 择器等的。如
*
、
>
、
+,
权值为
0000
。

6.
继承的样式没有权值。



3
，

网页有哪几部分组成？

结构层：
html
表示层：
css
行为层：
js
和
dom
4
，

一个
200*200
的
div
在不 同分辨率屏幕上下左右居中，
用
css
实现

Div{







}


















position
:

absolute
;

width
:

200
px
;

height
:

200
px
;

top
:

50
%
;

left
:

50
%
;

margin-top
:

-100
px
;

margin-left
:

-100
px
;


5
，

阐述清楚浮动的几种方式

第一种


父级
div
定义高度
height
适合高度固定的布局

第二种

父级
div
定义

overflow
：
hidden
第三种

结尾处加空标签

clear
：

both

让父级自动获取高度

第四种

父级
div
定义

伪类
:after
和

zoom

6
，

解释
css sprites
，如何使用？

CSS
Sprites
其实就是把 网页中一些背景图片整合到一张图片文件中，再利用
CSS
的
“
backgr ound-image
”
，
“
background- repeat
”
，
“
background- position
”的组合进行背景定位，
background- position
可以用数字能精确的定位出背景图片的位置。


CSS Sprites
为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加
载更多的图片

7
，

如何用原生
js
给一个按钮绑定两个
onclick
事件？

Var btn1 =document. getElementsById(“btn”);

btn1.
addEnvent Listener(“click”,”hello1);

entListener(“click”,”hello2);


function hello1(){
alert(“hello1”);

}
function hello2(){
alert(“hello2”);

}

8,
拖曳会用到哪些事件？

Dragstart
Dragenter
Dragover
Dragleave
Drag
Drop
Dragend

9,
请列举
jQuery
中选择器？

1
，

基本选择器

ID
，
class
，元素之类的

2
，

层级选择器

返回的是
jQuery
对象才可以进行的链式操作

如


后代元素，子元素，兄弟元素，相邻元素

3
，

过滤选择器

基本过滤
,
内容过滤
,
可见性过滤
,
属性过滤
,
子元素过滤和表单对象属性过滤选择器



10
，
JavaScript
中有哪些定时器，
他们的区别和用法是什么？

SetTimeout

只会执行一次

SetInterval

会一直重复执行

方式都为：
settimeout
（函数，时间）



11
，请描述一下
cookies

sessionstorage
和
localstorage
区
别

相同点：都储存在客户端上

不同点：
1
储存大小



Cookies
数据大小不能超过
4k


Sessionstorage
和
Localstorage
比
cookies
大

，可以达到
5m
或更多



2
有效时间



Localstorage
储存持久数据，浏览器关闭后也不会丢失，除非主动删除数据



Sessionstorage
数据在关闭游览器之后自动删除



Cookies
设置的
cookies
过期时间之前一直有效，即使窗口和游览器关闭。



3
数据与服务器之间的交互方式



Cookies
的数据会自动的传递到服务器，服务器端也可以写
cookies
到 客户端



Sessionstorage
和
localstorage
不会上传到服务器，仅在本地保存



12
，计算一个数组
arr
所有元素的和

//
可以通过


entbyid
（）
.value;
来获取输入框中的值

function
sum2
(){


var
arr1
=
[
1
,
2
,
3
,
4< br>,
5
,
6
,
7
,
8
,
9< br>];


var
sum1
=
0
;


for
(
var
i
=
0
;i
<=
;i
++
) {


if
(
typeof
arr1[i]
==

) {


sum1
+=
arr1[i];


}


}


document
.write(sum1);

}

13
，
编
写
一
个
方
法
去
掉
数
组
里
的
重
复
内
容

var
arr=[1,2,3,4,5,1,2,3]
function
arr1
(){


var
arr2
=
[
1
,
2
,
3
,
4
,
5
,
1
,
2
,
3
] ;


var
s
=
[];


for
(i
=
0
;i
<
;i
++
){



if
(f(arr2[i])
== -
1
){




(arr2[i]);



}


}


console
.log(s);

}


14
，

和
innerHTML
的区别是什么？
< br>
是直接写入到页面的内容流，如果之前没有调用

。那么浏览
器会自动调 用
open
，页面被重写

innerHTML
将
内容写入 某个
DOM
节点，不会导致页面全部重绘。精准。



15
，
ajax
的步骤

Ajax
异步
JavaScript
和
xml

能够局部刷新网页数据而不是重新加载整个网页

第一步，创建
xmlhttprequest
对象，
var xmlhttp = new XmlHTTPrequest
（）
；

Xmlhttprequest
对象用来和服务器交换数据

Var xhttp
；

If(pRequest){

//
现在主流浏览器


Xhttp = new XMLHttpRequst();
}else{
Xhttp =new ActiveXObject(
“
P
”
);
}
第二步，
xmlHTTPrequest
对象的
open
（）和
send（）方法发送资源请求到服务器，

第三步，使用
xmlhttprequest
对象的
responseText
或
responseXML
属性获 得服务器的响应

第四部，
onreadystatechange
函数，当 发送请求到服务器，我们想要服务器响应执行一些功
能就需要使用使用
onreadystat echange
函数，每次
xmlhttprequest
对象的
ready state
发生改
变都会触发
onreadystatechange
函数。



16
，
xml
和
json
的区别，请用四点来形容

Json
相对于
xml
来讲，数据体积小，传输速度快

Json
与
JavaScript
更好交互，更好的数据交互

Xml
对数据描述性比较好

Json
的解析速度要远远快于
XML


17
，
box-sizing
常用的属性有哪些？有哪些作用？


属性值

·
box- sizing
：
content-box
·
box- sizing
：
border-box
·
box- sizing
：
inherit
content-box

·

这是
box-sizing
的默认属性值

·

是
CSS2.1
中规定的宽度高度的显示行为

·

在
CSS
中定义的宽度和高度就对应到元素的内容框

·

在
CSS
中定义的宽度和高度之外绘制元素的内边距和边框



border-box

·

在
CSS
中微元素设定的宽度和高度就决定了元素的边框盒

·

即为元素在设置内边距和边框是在已经设定好的宽度和高度之内进行绘制

·
CSS
中设定的宽度和高度减去边框和内间距才能得到元素内容所占的实际宽度和高度


(Q1)box-sizing: content-box|border- box|inherit;
(Q2)content-box:
宽度和高度分别应用到元素的 内容框。
在宽度和高度之外绘制元素的内边距
和边框
(
元素默认效果
)
。

border-box:
元素指定的任何内边距和边框都将在已设定的 宽度和高度内进行绘制。
通过从已
设定的宽度和高度分别减去边框和内边距才能得到内容的宽度 和高度。


18
，使一个
300*200
的
di v
实现屏幕水平居中

前面已经有一种方法了

第二种方法：

div
{

















left
:

0
px
;

right
:

0
px
;

top
:

0
px
;

bottom
:

0
px
;




















}

margin
:

auto
;

position
:

absolute
;

height
:

200
px
;

width
:

300
px
;

第三种方法是利用
jQuery
$$(window).resize(function(){

$$(

position:

left: ($$(window).width() - $$(

top: ($$(window).height() - $$(
});


});
此外在页面载入时，就需要调用
resize()
方法

$$(
function
(){

$$(window).resize();

});


19
，三个盒子，左右定宽，中间自适应的方法有几个？

第一种方法：左右采用浮动


中间采用
margin- left
和
margin-right
的方法

代码：

<
div
style
=

width
:

100
%
;
margin
:

0

auto
;

>




<
div
style
=

width
:

200
px
;
float
:

right
;
background-color
:

#000000
;

>11div
>




<
div
style
=

width
:

200
px
;
float
:

left
;
background-color
:

red
;

>33div
>




<
div
style
=

margin-left
:

200
px
;
margin-right
:

200
px
;
background-color
:

green
;

>22div
>



div
>









第二种方法：左右采用绝对定位，中间采用
margin- left
和
margin-right
代码：
<
div
style
=

width
:

100
%
;
margin
:

0

auto
;

>




<
div
style
=

width
:

200
px
;
position
:

absolute
;
left
:

0
px
;
background-color
:

#000000
;

>11div
>




<
div
style
=

width
:

200
px
;
position
:

absolute
;
right
:

0
px
;
background-color
:

red
;

>33div
>




<
div
style
=

margin-left
:

200
px
;
margin-right
:

200
px
;
background-color
:

green
;

>22div
>



div
>





第三种方法

负
margin
值

#main {
float: left;
width: 100%;
}

#mainContainer {
margin: 0 230px;
height: 200px;
background: green;
}

#left {
float: left;
margin-left: -100%;
width: 230px}

#right {
float: left;
margin-left: -230px;
width: 230px;
}



#left .inner,

#right .inner {
background: orange;
margin: 0 10px;
height: 200px;
}
20
，
js
有几种数据类型？其中基本数据类型有哪些？

基本数据类型有

Boolean
，
undefined
，
null
，
number
，
string
应用类型有


object
，
array
，
function


21
，
undefined
和
null
的区别

Null
代表空值，代表一个空对象指针，一个特殊的对象值

Undefined
是未定义，类型也是
undefined

22
，
http
和
https
有什么区别？如何灵活运用？

Http
是
http
运行在
TCP
之上，传输内容是明文， 客户端和服务器无法验证对方身份。

HTTPS
是
http
运行在
SSL/tls
之上，
SSL/tls
运行在
TCP
上，所 有内容都是经过加密。加密采
用对称加密，
但是秘钥用服务器证书进行非对称加密。
服 务器和客户端都是可以互相验证身
份。


23
，常见的
Http
状态码

2
开头，请求成功，表示成功处理了请求的状态代码

3
开头，请求重定向，表示完成请求，需要进一步操作，一般是重定向

4
开头，请求错误，表示请求出错，妨碍了服务器的处理

5
开头， 这些状态码表示服务器在尝试处理请求时发生内部错误，服务器本身出错而不是请
求出错


24
，如何进行网站性能的优化

原因：用户角度


加载速度提高，更好的交互体验




服务商角度


减少页面请求，降低带宽，节省资源

方法：
1
，
JavaScript
优化和打包

2
，按需加载资源

3
，在使用
DOM
操作库时用上
array-ids
4
，缓存

5
，启用
HTTP/2
6
，应用性能分析

7
，使用负载均衡方案

8
，同构

9
，使用索引加快数据库查询

10
，使用更快的转译方案

11
，避免因
JavaScr ipt
和
css
的使用而阻塞渲染

12
，图片编码优化





25，
react
和
vue
有哪些不同，说说你对这两个框架的看法

相同点：都支持服务器渲染



都有
virtual D OM
，
组件化开发，
通过
props
参数进行父子组件数据的传递，
都实现
了
webComponent
规范



数据驱动视图



都支持
native
方案，
react
的
react native
和
vue
的
weex

不同点：
react
严格上只针对
MVC
的
view
层，
vue则是
mvvm
模式



Virtual DOM不一样，
vue
会跟踪每一个组件的依赖关系，
不需要重新渲染整个组件
树，而对于
react
来说，每次应用状态被改变，全部组件都会被重新渲染，所以
r eact
需要
shouldComponentUPdate
这个生命周期函数来进行 控制。



组件的写法不一样。
。
。



数据绑定，
vue
是双向的，
react
是单向的



State
对象在
react
应用中不可变的，
需要使用
setstate
方法更新状态，
在
vue
中
s tate
对象对象不是必须的，数据由
data
属性在
vue
对象中 管理


26
，什么是
mvvm mvc

有什么区别，原理？


1
，
MVC
（
model-view- controller
）

MVC
是比较直观的架构模式，用户模式
->view(
负责接收用户的操作输入
)->controller(
业
务 逻辑处理
)->view(
将结果反馈给
view)

2
，
MVVM
（
model-view- viewmodel
）

将
”
数据模型数据双向绑定
”的思想作为核心，
因此
model
和
view
没有什么关系，< br>之后痛
过
viewmodel
进行交互，而
model
和viewmodel
之间的交互是双向的，因此数据的视图
的变化会同时修改数据源，而数 据源的数据变化也会立刻反应
view
。


27
，
px
和
em
的区别

Px
表示像素，是一个绝对单位，不会因为其他元素而改变

南征北战的意思-黄家强微博

南征北战的意思-黄家强微博

南征北战的意思-黄家强微博

南征北战的意思-黄家强微博

南征北战的意思-黄家强微博

南征北战的意思-黄家强微博

南征北战的意思-黄家强微博

南征北战的意思-黄家强微博

本文更新与2021-01-21 03:53，由作者提供，不代表本网站立场，转载请注明出处：https://www.bjmy2z.cn/gaokao/542193.html

返回列表：高中公式大全

上一篇：C++软件工程师经典面试题
下一篇：经典行为面试题目(认知能力)