金山wps前端工程师笔试题（B卷）

最新推荐文章于 2024-04-29 17:03:19 发布

Yuewting

最新推荐文章于 2024-04-29 17:03:19 发布

阅读量1.5k

点赞数 1

分类专栏：面试题

本文链接：https://blog.csdn.net/Yuewting/article/details/82873316

版权

面试题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 请写出以下代码的输出结果

function f1() {
    var n = 99;
    nAdd=function() {
        n += 1;
    }
    function f2() {
        console.log(n);
    }
    return f2;
}
var result = f1();
result();
nAdd();
result();

答：

2. 不使用第三个变量（不可以再定义其他变量）交换a和b的值

方法一：

let a = 1;
b = 2;
a = a + b;
b = a - b;
a = a - b;

方法二：

let a = 1;
b = 2;
a ^= b;//位运算符，异或 a=a^b
b ^= a;
a ^= b;

方法三：

let a =1;
b = 2;
a = {a:b, b:a};
b = a.b;
a = a.a;

方法四：

let a =1;
b = 2;
[a,b] = [b,a];//ES6解构赋值语法

3. 详细描述font-family属性的用法+详细描述line-height属性的用法。

答：font-family属性指定一个元素的字体。font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，ont-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

line-height: 设置行间的距离（行高），具体来说是指两行文字间基线间的距离。line-height被用来控制行与行之间的垂直距离，不允许使用负值。line-height有四个属性取值，分别是normal、number、length、percentage。

4. 你如何从浏览器的URL中获取查询字符串参数，请写一个通用函数。

答：

function showURL() {
    var myHref = window.location.href;
    var args = myHref.split('?');
    if(args[0] == myHref) {
        return '';
    }
    var arr = args[1].split('&');
    var obj = {};
    for(var i = 0; i < arr.length; i++) {
        var arg = arr[i].split('=')
        obj[arg[0]] = arg[1];
    }
    return obj;
}

5. JavaScript typeof返回的数据类型有哪些？

答：number、boolean、string、function、object、undefined、symbol

6. 内存泄漏是什么？什么情况下会引发内存泄漏？

答：程序运行需要内存，只要程序提出要求，操作系统或者运行时就必须供给内存。对于持续运行的服务进程，必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。不再用到的内存，没有及时释放，就叫做内存泄漏。

引发内存泄漏：闭包、意外的全局变量、定时器、死循环、反复重写同一个属性会造成内存大量占用(但关闭IE后内存会被释放)、没有清理的DOM元素引用。

7. 请解释一下relative、fixed、absolute、static元素的区别？请解释一下inline和inline-block的区别？

答：

relative：生成相对定位的元素，相对于其正常位置进行定位。未脱离文档流。

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。脱离文档流。

absolute：生成绝对元素的定位，相对于除static定位以外的第一个父元素进行定位。

static：默认值，没有定位，元素出现在正常的流中。

inline：此元素会被显示为内联元素，一系列inline元素都在一行内显示，直到该行排满。inline元素设置width、height属性无效。可以设置margain，但是不能设置padding。

inline-block：行内块元素，让这个元素显示在同一行不换行，但是又可以控制高度和宽度。

8. 请写出至少5种方式让客户端不缓存页面图片

9. 请用JavaScript实现，输入参数1，8，3，2输出[1,"8",2,"3",3,"2",8,"1"](数字以从小到大排列，字符按从大到小排列，并交叉组合的数组)。

10. 请列举你使用过的网站性能优化的方法？

答：

1、首屏加载时减少HTTP请求

等待首页传送数据完成页面较完整地显示后，再利用AJAX异步请求更多数据。

2、图片与组件懒加载

监听视口与HTML文档高度之间的偏差然后进行AJAX异步请求后台数据

3、图片等静态资源合并

在页面中有多个小图时，压缩成一张雪碧图，让多张图片请求变为一次请求，根据background-position定位其中的图片

4、压缩JS和CSS代码

减少请求的JS和CSS文件大小

5、减少DOM操作

将DOM查询、DOM操作的代码分别放在一起，能有效减少DOM的操作成本，以及使用文档碎片。

6、通过webpack+vue进行项目构建

利用webpack的代码分割和合并功能，进行高效的组件化加载数据，浏览即加载相应数据；利用vue的虚拟DOM特性，使用diff算法计算出相应所需要更新的DOM，最大化的减少不必要的DOM操作。

11. 请用原生JS实现小火箭动画(旋转45度角，10s匀速飞行500px)，已知结构<div><img src="rocket.jpg" /></div>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css3</title> 
<style> 
div
{
	width: 100px;
	height: 100px;
	background: red;
	top: 500px;
	position: relative;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	animation:myfirst 10s;
	-webkit-animation:myfirst 10s; /* Safari and Chrome */
}

@keyframes myfirst
{
	0% {
		left:0px; 
		top:500px;
	}
	100% { 
		left: 500px; 
		top: 0px;
	}
}

/* Safari and Chrome */
@-webkit-keyframes myfirst 
{
	0% {
		left:0px; 
		top:500px;
	}
	100% {
		left:500px; 
		top:0px;
	}
}
</style>
</head>
<body>

<div></div>

</body>
</html>