前端面试题总结（4）

最新推荐文章于 2022-03-07 00:49:53 发布

wuyxinu

最新推荐文章于 2022-03-07 00:49:53 发布

阅读量8.8k

点赞数

分类专栏：面试题

本文链接：https://blog.csdn.net/wuyxinu/article/details/118091439

版权

requestAnimationFrame CSS选择器权重 HTML5新特性 CSS3动画性能优化

关键词由CSDN通过智能技术生成

面试题专栏收录该内容

5 篇文章 12 订阅

订阅专栏

一、题目

1、以下代码执行后，console 输出的信息是？

for(let i = 0; i < 5; i++){
	requestAnimationFrame(() => console.log(i));
}

2、以下代码中文字的最终颜色是

<style>
     div > #title{color: blue;}
     div > h3#title.title{color: red;}
     [lang="en"] h3.title{color: green;}
     [lang="en"] #title{color: gray;}
 </style>
 <div lang="en">
     <h3 id="title" class="title">hello</h3>
 </div>

3、以下代码的执行打印结果是？

var arr = []
arr[0] = 0;
arr[1] = 1;
arr.foo = 'c';
console.log(arr.length)

4、HTML5 没有删除哪个元素？

A、<strike> B、<center> C、<small> D、<big>

5、DHTML 的动态样式的作用是 ()

A、可使开发人员改变显示在一页上的文本或图像，以便内容能够交互地对用户的鼠标和键盘操作做出响应

B、让页面制作者以自动方式或对用户的操作做出响应的方式移动页面上的文本和图像

C、可实现客户端与服务端动态的信息资源交换

D、使网页作者改变内容的外部特征而不强制用户再次下载全部内容

6、下面那个选项设置web页面的背景颜色？

A、<body background="color-name">

B、<body backgroundcolor="color-name">

C、<body bg-color="color-name">

D、<body bgcolor="color-name">

7、判断对象myObj是否存在的写法，下面说法错误的是( )

A、typeof myObj == “undefined”

B、myObj === undefined

C、myObj === null

D、!this.hasOwnProperty(‘myObj’)

8、下列函数哪些是JavaScript的全局函数？【不定项】

A、encodeURI B、parseFloat C、setTimeout D、eval

9、以下选项中，哪些是html5 input的新属性【不定项】

A、file B、search C、number D、reset E、tel

10、当使用HTML5的拖放API实现拖动时，需要监听”开始拖动”事件，此事件的名称是：

11、下面有关CSS中link和@import的区别，描述错误的是？

A、link属于XHTML标签，而@import完全是CSS提供的一种方式

B、当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载

C、link在支持CSS的浏览器上都支持而@import只在5.0以上的版本有效

D、当使用javascript控制dom去改变样式的时候，只能使用@import方式

12、显示结果是？

var x = new Boolean(false);
if (x) {
  alert('hi'); 
}
var y = Boolean(0);
if (y) {
  alert('hello');  
}

13、下列说法错误的是()

A、设置display:none后的元素只会导致浏览器的重排而不会重绘

B、设置visibility:hidde后的元素只会导致浏览器重绘而不会重排

C、设置元素opacity:0之后，也可以触发点击事件

D、visibility:hidden的元素无法触发其点击事件

14、关于position定位，下列说法错误的是()

A、fixed元素，可定位于相对于浏览器窗口的指定坐标，它始终是以 body 为依据

B、relative元素以它原来的位置为基准偏移，在其移动后，原来的位置不再占据空间

C、absolute 的元素，如果它的父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移

D、fixed 属性的元素在标准流中不占位置

15、以下代码的输出结果是

A、“number” B、“undefined” C、“function” D、Error

16、以下哪些表达式的结果为true（）【不定项】

A、undefined == null

B、isNaN(“100”)

C、parseInt(“1a”) === 1

D、[] instanceof Array

17、关于CSS选择器，以下说法正确的是：【不定项】

A、每条选择器最多只能出现一个伪元素

B、每条选择器最多只能出现一个伪类

C、:nth-child(an+b)中n的取值从0开始

D、A+B匹配A之后所有符合B规则的元素

18、下列定义的 css 中，哪个权重是最低的？（）

A、#game div.name B、#game .name

C、#game div D、#game .name span

19、在 HTML 页面中，下面关于 Window 对象的说法不正确是（）

A、Window对象表示浏览器的窗口，可用于检索有关窗口状态的信息

B、Window对象是浏览器所有内容的主容器

C、如果文档定义了多个框架，浏览器只为原始文档创建一个Window对象，无须为每个框架创建Window对象

D、浏览器打开HTML文档时，通常会创建一个Window对象

20、CSS2中轮廓outline说法错误的是（）

A、轮廓是绘制于元素周围的一条线

B、轮廓位于边框边缘的外围，可起到突出元素的作用

C、CSS outline可以设置内外边距样式

D、CSS outline 属性可以设置元素轮廓的颜色和宽度。

21、Javascript的表达式 ”2”+3+4 的值为？

22、NOSCRIPT标签是做什么用的？

23、以下代码执行后，a.x 和 b.x 的结果分别是？

function A(x){
this.x = x;
}
A.prototype.x = 1;

function B(x){
this.x = x;
}
B.prototype = new A();
var a = new A(2), b = new B(3);
delete b.x;

24、关于 animation-timing-function 下列说法正确的是？()

A、linear 默认动画，动画从头到尾的速度是相同的

B、ease 默认动画，动画以低速开始，然后加快，在结束前变慢

C、cubic-bezier(n,n,n,n)，在 cubic-bezier 函数中自己的值。可能的值是从 0 到 100 的数值

D、ease-in 动画以低速结束

25、以下属于CSS盒子模型属性的有?

A、border B、margin C、position D、display

26、下面哪些技术可用于优化 CSS 图片加载 ?

A、CSSSprite B、SVGSprite C、Iconfont D、Base64

二、解答

1、 0 1 2 3 4

因为let在循环条件的时候定义，而不是在外部定义，则每一次循环let都会生成一个块级作用域保存当前的值

什么是requestAnimationFrame

在Web应用中，实现动画效果的方法比较多，JavaScript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的 API，即 requestAnimationFrame（rAF），顾名思义就是 “请求动画帧”。

requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。

设置这个API的目的是为了让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。代码中使用这个API，就是告诉浏览器希望执行一个动画，让浏览器在下一个动画帧安排一次网页重绘。

requestAnimationFrame的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率（60Hz或75Hz），也就是说，每秒最多只能重绘60次或75次，requestAnimationFrame的基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。此外，使用这个API，一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力。

不过有一点需要注意，requestAnimationFrame是在主线程上完成。这意味着，如果主线程非常繁忙，requestAnimationFrame的动画效果会大打折扣。

requestAnimationFrame使用一个回调函数作为参数。这个回调函数会在浏览器重绘之前调用。

requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：

1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。

2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

2、red

选择器的权重如下

在这里插入图片描述

h3#title.title 同一个标签各种属性写在一起权重依次想加（以前没见过这种写法，自己的见识甚是浅啊。。）

div > #title{color: blue;}             //标签+id = 100+1 = 101
div > h3#title.title{color: red;}         //标签+标签+id+类 = 1+1+100+10=112
[lang=”en”] h3.title{color: green;}        //属性+标签+类 = 10+1+10 =21
[lang=”en”] #title{color: gray;}         //属性+id = 10+100 = 110

css优先级，可以给选择器分配权值：

id选择器的权值为100
class、属性和伪类选择器的权值为10
标签选择器、伪元素的权值为1
权值较大的优先级越高
比较样式时，将对应的选择器权值相加，大的优先级高
权值相同的，根据从上往下的原则，后定义的优先级高
特殊！important，优先级最高

ps：CSS的选择器进制是256进制。

3、2

1.数组也是对象；

2.对象不能用length返回其拥有的属性数量

这里要理解所谓‘数组’其实是array类型对象的一个特殊作用，就是：我们可以对它进行一种模式的数据存储，但除此之外，它依然是一个对象

var arr = [‘1’，‘2’] //这本质上是一系列操作：得到一个数组对象；调用了它的数组方法存入了一些数据，arr.length根据存入数据的数目被修改
arr.length，对arr对象的length属性进行一个访问
arr.foo = ‘hello’ 对arr对象创建一个属性，所以.foo 跟.length地位是并列的：就是arr的一个属性，同时arr的数组方法跟这些属性是毫不相关的

4、C

记住以下删除的标签：

<acronym>：被标记的首字母缩略词
<applet>：一个嵌入的 Java applet；即能够解析java的class文件的一个东东
<basefont>：该标签可以为文档中的所有文本定义默认字体颜色、字体大小和字体系列。参考：https://www.w3school.com.cn/tags/tag_basefont.asp
<big>：让文本比常规的字体大一号
<center>：水平居中
<dir>：文本方向为从右向左的段落：<bdo dir="rtl">文本方向从右到左!</bdo>
<font>：规定文本的尺寸、字体和颜色
<frame>：<frameset>元素被用来组织一个或者多个<frame> 元素
<frameset>：HTML5 不支持<frameset>标签
<noframes>：noframes 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。参考：https://www.w3school.com.cn/tags/tag_noframes.asp
<strike>：<strike>标签可定义加删除线文本定义。参考：https://www.w3school.com.cn/tags/tag_strike.asp
<tt>：<tt>标签呈现类似打字机或者等宽的文本效果。参考：https://www.w3school.com.cn/tags/tag_tt.asp

参考：https://jingyan.baidu.com/article/19192ad8c6ced1e53e57072d.html

5、D

DHTML 将 HTML、JavaScript、DOM 以及 CSS 组合在一起，用于创造动态性更强的网页。通过 JavaScript 和 HTML DOM，能够动态地改变 HTML 元素的样式。

6、D

bgcolor:文档的背景颜色。此方法不符合规范，请使用 CSS 的 background-color 属性替代

7、C

前提是myobj是一个对象，只是存在与不存在的问题，几种表示方法：

1、！obj

2、！window.obj

3、typeof myObj == "undefined（判断对象是否有定义，已定义未赋值，返回true）

4、myObj == undefined（已定义未赋值。返回true）

5、myObj === undefined （已定义未赋值，返回true）

6、!this.hasOwnProperty(‘myObj’))（判断是否为顶层对象的一个属性）

7、myobj == null（注意null与undefined的区别，ull指的是已经赋值为null的空对象，即这个对象实际上是有值的，而undefined指的是不存在或没有赋值的对象。）

只有null===null时，结果为true;

其余类型与null,比较时结果都为false。

所以使用 myObj===null时，myObj的类型是不确定的，不能判断myObj是否是对象，更不能判断对象是否存在

8、ABD

编码相关：

escape()、unescape()、encodeURI()、decodeURI()、

encodeURIComponent()、decodeURIComponent()

数据处理：

Number()、String()

数字相关：

isFinite()、isNaN()、parseFloat()、parseInt()

特殊：

eval()

按选项的意思来看，应该指的是ECMAScript本身的global全局对象下的属性，在W3C上看是没有setTimeout的，setTimeout来自于window

9、BCE

在HTML5中，为input元素新增了以下一些type属性值：

color：用于指定颜色的控件。
date：用于输入日期的控件（年，月，日，不包括时间）。
month：用于输入年月的控件，不带时区。
week：用于输入一个由星期-年组成的日期，日期不包括时区
time：用于输入不含时区的时间控件。
datetime：基于UTC时区的日期时间输入控件（时，分，秒及几分之一秒）。
datetime-local：用于输入日期时间控件，不包含时区。
email：用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。
number: 用于应该包含数值的输入域。只能输入数字
range：用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
tel：用于输入电话号码的控件。在移动端输入会显示数字键盘，PC端无效果
url：用于编辑URL的字段。

10、dragstart

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

首先，为了使元素可拖动，把 draggable 属性设置为 true

拖动什么 - ondragstart

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件

11、D

1，@import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。
2，@import 是css2里面的，所以古老的ie5不支持。
3，当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的

4，link除了能加载css外还能定义RSS，定义rel连接属性，@import只能加载css

12、Hi

此题考查的是 JS 的类型转换：

if(x) 这里期望 x 是一个布尔类型的原始值，而 x 是一个对象，任何对象转为布尔值，都为得到 true（切记！在 JS 中，只有 0，-0，NaN，""，null，undefined 这六个值转布尔值时，结果为 false）。
题目的第二部分，一定要注意 y = Boolean(0)，**而不是 y = new Boolean(0)。**这两个有很大区别，用 new 调用构造函数会新建一个布尔对象，此处没有加 new，进行的是显示类型转换，正如上述第一条所说，0 转换布尔，结果为 false，所以此时 y 的值就是 false。如果加了 new，那么 y 就是一个 Boolean 类型的对象，执行 if(y) 时，对象转布尔，始终是 true，所以结果会与不加 new 的时候相反。

13、A

display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint

visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint，但不可触发绑定事件

opacity=0：指的是元素不可见但存在，保留空间，不影响结构，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的

重排一定重绘，重绘不一定重排

14、D

fixed不以body为依据，只以浏览器窗口为依据。

在这里插入图片描述

15、D

实践证明：

如果是typeof f，结果是function

如果是typeof f()，结果是number

如果是typeof g,结果是undefined.

如果是typeof g(),结果是ReferenceError，g is not defined

16、ACD

// 1. isNaN()函数用来判断一个数是否是NaN;
// 只有一个值是NaN或者能被转换为NaN的时候才返回true 
console.log(isNaN('e'));//true,因为e可以被转换为NaN 
console.log(isNaN('11'));//false,因为字符串可以被转换为数字,不能被转为NaN 
console.log(isNaN(null));//false,因为null可以被转换为0,不能被转为NaN 
console.log(isNaN(NaN));// true,NaN返回true

// 2. parseInt(string,raix)函数有两个参数
// 2.1 注意:string字符串只会被解析从第一个字符开始直到不是数字的字符部分
console.log(parseInt('223'));//223
// 2.2 当字符串中间存在非数字,那么就只解析前面是数字的部分字符
console.log(parseInt('22e3'));//22
// 2.3 如果字符串中第一个字符就不是数字,那么返回NaN 
console.log(parseInt('e21'));//NaN

// 对于parseInt()函数还有一个易考点,就是利用数组的下标,还记得parseInt()函数的第二个参数吗？
// 2.4 parseInt()函数的第二个参数指的就是进制,这个参数小于2或者大于36的时候,都会返回NaN 
console.log(parseInt(1,1));//NaN ,因为第二个参数是1表示1进制<2,所以错误
console.log(parseInt(1,2));//1,因为表示二进制 =2,在范围内
// 2.5 我们一般都是省略这个参数的,这个时候就是默认为10进制
console.log(parseInt(99));//99
// 2.6 我们第二个参数使用0的时候也是使用十进制
console.log(parseInt(99,0));//99
// 2.7 如果第一个参数前缀使用0x/0X则表示使用16进制
console.log(parseInt(0x99));//153=16*9+9
console.log(parseInt(0x99,10));//如果第一个参数使用了0x表示十六进制,那么第二个参数设置了值也无效

// 2.8 看一个实例,对于数组
var arr=[1,2,3,2,5];
console.log(arr.map(parseInt));//[1, NaN, NaN, 2, NaN]
// arr.map方法就是对于数组arr里面的每一项都去使用方法里面的函数,最后返回新数组
// 因为map方***有索引,所以实际上就是 
parseInt(1,0);//1,因为0表示十进制
parseInt(2,1);//1进制<2，所以错啦!
parseInt(3,2);// 2进制,但是3不在0——2范围内(3应该改为11),所以不符合2进制要求
parseInt(2,3);//符合,因为三进制是0-3,而2在范围内
parseInt(5,4);//4进制不包括5,所以NaN

17、AC

伪类和伪元素的区别, 总结的很好, 直接看结论. - 唐安 - 博客园
https://www.cnblogs.com/andy-lehhaxm/p/9561776.html

C.:nth-child(an+b)在下标计算表达式an+b中：
a,b是系数可以是任意整数；
n就是个字面量“n”，表示是递增变量，并且取值是从0开始的整数。

**D.**匹配任意元素，满足条件：

B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）

18、C

优先级是：内联样式 > id 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器。多个选择器组合的时候，不应该简单地给这些选择器分配权值，然后相加比较大小。因为上面所说的优先级是不能越级的，比方说 1 个 id 选择器能顶你 n 个类选择器…所以要逐级比较，同级的就比较数量，数量多的优先级高。当然，!important 的优先级最高。

同级比较时，越精确，优先级越高

即 div.name 的优先级肯定比 div高

19、C

考察的是JavaScript中浏览器的Window对象。

Window 对象表示浏览器中打开的窗口，通过Window对象的属性，比如closed属性检索窗口是否已被关闭。所以A正确。

window对象的属性包含内容：所以B正确。

在这里插入图片描述

如果文档包含框架（<frame> 或 <iframe> 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。所以C不正确，D正确。

20、C

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-drzMX70x-1624268344801)(D:\Users\EX-WENJUN004\Desktop\learn\前端面试题总结（4）.assets\1624267191212.png)]

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
注释：轮廓线不会占据空间，也不一定是矩形。

21、“234”

1、“+”是左关联，表达式相当于(“2”+3)+4

2、根据ES5规范11,6,1节，如果某个操作数是字符串或者能够通过以下步骤转换为字符串的话，+将进行拼接操作。（ToPrimitive、DefaultValue。。。）

3、“－”是右连接，结果为number

22、用来定义在脚本未被执行时的替代内容

NOSCRIPT标签用来定义在脚本未被执行时的替代内容。也可以用在检测浏览器是否支持脚本，若不支持脚本则可以显示NOSCRIPT标签里的innerText

noscript:用以在不支持js的浏览器中显示替代的内容，这个元素可以包含能够出现在文档<body>中任何html元素，script元素除外。包含在noscript元素的内容只有在下列情况下才会显示出来

1.浏览器不支持脚本

2.浏览器支持脚本，但脚本被禁用

23、2, undefined

知识点：prototype、new operator

答案：2, undefined

在这里插入图片描述

24、B

属性	描述
linear	动画从头到尾的速度是相同的。
ease 默认	动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。