2018最新前端面试题五

一、请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)

1.减少HTTP请求；
2.合并压缩Js/css文件；
3.使用缓存manifest；
4.服务器端开启gzip；
5.使用CDN，用户可以就近获取所需要的资源，访问速度有保障，稳定性也有保障
6.外部JS和CSS放底下
7.尽可能少的操作DOM，某些需要重复操作的DOM可以放变量里

二、请描述伪元素 (pseudo-elements) 及其用途。

伪类用于选择那些DOM树中不存在的不容易被常规选择器找到的信息 :hover :active :focus :link
伪元素用于将某些特殊效果添加到选择器上； 如::before ::after
伪元素用于表现非正文、装饰性的东西，利于HTML语义化；

三、你有兼容 retina 屏幕的经历吗？如果有，在什么地方使用了何种技术？

淘宝的lib-flexible库;

四、请问为何要使用 translate() 而非 absolute position，或反之的理由？为什么？

从动画来讲，transform可以让GPU参与运算，FPS更高；absolute最小动画单位是1px，而transform可以更小，使动画更平滑，
从其他角度来讲，就是absolute必须有relative的父盒子；

五、你是如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？（这个是百度后的答案）

对内：模块模式；
对外：继承

六、解释 function foo() {} 与 var foo = function() {} 用法的区别

1.函数声明必须有函数名字，2.可以在任何地方调用，即存在变量提升
3.函数表达式前后两个名称可以相同也可以不同；4.函数表达式后边那个名字可以省略；
5.表达式后面的名字只能在函数内部使用；6.函数只能在声明后才能调用

七、请解释 JSONP 的工作原理，以及它为什么不是真正的 Ajax。

json是一种数据格式；jsonp是一种数据调用的方法；
1.利用script标签没有跨域限制的特性，在脚本里创建一个script标签，地址指向第三方API，如
<script src="http://www.example.net/api?param1=1&param2=2"></script> （src属性皆不受跨域限制）
2.提供一个回调函数来接收数据；第三方产生的数据为json数据的包装，形如callback({"name":"hax","gender":"Male"}) ，回调函数可通过URL参数传递callback=fn
3.这样浏览器会调用callback函数，并传递解析后的json对象作为参数。本站脚本可在callback函数里处理传入的数据；ajax本质是通过XmlHttpRequest获取服务器信息，而JSONP核心则是动态添加script标签来调用服务器提供的JS脚本；

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

相关阅读：

2018最新前端面试题四

2018最新前端面试题三

2018最新前端面试题二

2018最新前端面试题一

以上就是2018最新前端面试题五的详细内容，更多请关注Gxl网其它相关文章！