前端面试题:金山办公2020校招前端开发工程师笔试题(一)

第一题:

  • []==[]输出的结果为false;
  • 首先,‘==’运算符比较的是两个操作数是否相等,(这里不是指严格相等),两个操作数都是空数组,都是Object对象。但是对象的比较并非是值得比较,即使这两个都是空数组(包含同样的属性和数值都为空),但是这两个数组在引用上都不是同一个数组,所以他们也是不相等

第二题:

服务器角度

  • 采取CDN加速
  • 开启gzip压缩
  • 允许使用强缓存或协商缓存
  • 增加服务器带宽

客户端角度

  • 合理组织CSS、JavaScript代码位置
  • 减少DOM操作、添加事件委托
  • 部分操作可设置防抖和节流
  • 对于可预见的操作采取preload或prerender的预加载
  • 对于图片可以懒加载
  • 合并CSS图片(精灵图/雪碧图)
  • 减少使用iframe

资源优化打包角度

  • 使用打包工具将Js文件、CSS文件和静态文件进行恰当打包处理。

什么叫懒加载、懒加载有什么作用?

懒加载其实就是延时加载,即当对象需要用到的时候再去加载。

懒加载的优点:

1. 不需要将对象的实例化全部写到viewDidLoad中,可以简化代码,增强代码的可读性

2. 对象的实例化在getter方法中,各司其职,降低耦合性

3. 对系统的内存占用率会减少

第三题:

跨域问题来自于浏览器的同源策略,即当协议、域名、端口号任意一个不同时,都会引发跨域问题。

jsonp、CORS可以用来解决跨域问题

第四题:

通过响应来控制缓存,在响应头中主要有cache-control、pragma、expires三个响应头,其中expires是HTTP1.0中的响应头,后面直接跟一个缓存失效日期,但是服务器和客户端之间的时钟往往不同,因此通过该响应头来控制缓存失效时间不准确,一般不用,如果要设置客户端不缓存,则设置响应头“expires: -1”即可;pragema是HTTP1.1协议为了兼容HTTP1.0+协议,用来控制不缓存,“pragma: no-cache";cache-control是HTTP1.1中的响应头,其参数为相对的秒值,即过多少秒缓存失效,因此建议使用该响应头来控制缓存失效时间,其后可以跟的内容有no-cache、no-store、max-age、must-revalidate
为了兼容各个协议版本,要想客户端不缓存资源,一般都添加三个响应头:cache-control: no-cache、pragma: no-cache、expires: -1
注意:cache-control: no-cache控制缓存,客户端是会缓存资源的,只是在于原始服务器进行再验证之前不会想客户端提供资源,也就是资源新鲜度永远过期,这样比直接访问服务器节省了资源在网络中的传输成本,相比开启缓存增加了再验证的成本,性能失效介于两者之间;要想客户端缓存不从响应中拷贝资源副本,则应该使用cache-control: no-store,使用该响应头内容也可以让缓存立即删除已经拷贝的副本;而must-revalidate是服务器希望缓存能严格遵守过期信息,一般情况下类似no-cache,但在缓存与原始服务器进行新鲜度验证的时候,原始服务器不可用,这将会导致这一段时间中访问该资源会504 gateway timeout,因此建议使用no-cache

第五题:

box-sizing是CSS3新增属性,可调整盒子模型的样式。

box-sizing:border-box表示盒模型基于IE的盒模型,width和height决定盒模型的content区、padding区和border区。

box-sizing:content-box表示盒模型基于标准盒模型,width和height只决定盒模型的content区

box-sizing:inherit表示继承自父元素。

关于CSS的盒模型
CSS的盒模型作为网页的一部分显示在页面上。从内到外分为四个部分:content,padding,border,margin。

标准盒模型
支持W3C标准的盒模型
content显示内容,可以设置width和height属性控制盒模型的宽度与高度。
padding填充区,内容背景的最外层,将内容和边距分隔开。
border边界,可设置其宽度,样式和颜色。
margin外边距,使盒模型推开周围元素。

第六题:

DOM树是包含了所有html节点的树,渲染树是DOM树和CSSOM树组合而成的,最终渲染在页面上的树。DOM树和渲染树都是浏览器生成的

第七题:

装箱:把基本数据类型转换成对应的引用类型的操作。

拆箱:把引用类型转换成基本数据类型的操作。

在Javascript中出现 基本数据类型数据 和 引用数据类型数据要进行转换的情况下会进行装箱/拆箱操作。

第八题:

所以上面代码执行顺序为:

同步:console.log(1)->console.log(2)->console.log(5);

异步:(微任务)console.log(3)->(宏任务)console.log(4);

猜你喜欢

转载自blog.csdn.net/niuxikun/article/details/104845658