记2018前端面试之旅

时间  2019-12-06
标签 前端 面试 之旅 栏目 快乐工作 繁體版
原文   原文链接

持续更新直到找到合适工做为止！-_-!javascript

面试一

日期：20180420css

前端性能优化？

前端性能优化这个问题能够回答的比较多，我本身的答案：
前端性能优化能够从：html

  • 减小HTTP请求的数量
  • 减小HTTP请求的大小
  • 缓存
  • 内容分发网络
  • 脚本放置在底部，样式表放置在顶部
  • ...

减小HTTP请求的数量：前端

  • 将公用的js、css文件合并
  • CSS雪碧图
  • 图片地图
  • 内联图片

不详细赘述了vue

标题文字

图片预加载方式？

图片预加载的主要思路： 图片预加载的主要思路就是把稍后须要用到的图片悄悄的提早加载到本地，由于浏览器有缓存的缘由，若是稍后用到这个url的图片了，浏览器会优先从本地缓存找该url对应的图片，若是图片没过时的话，就使用这个图片。html5

图片预加载实现的方法：java

  • 适用js的image对象也有onload和onerror事件，分别是加载完后和加载失败时执行。

Image对象是专门用于处理图片加载的，就至关于内存中的img标签。react

  • css实现图片预加载：写一个CSS样式设置一批背景图片，而后将其隐藏，这样你就看不到那些图片了。那些背景图片就是你想预载的图片
  • 使用Ajax实现预加载：该方法利用DOM，不只仅预加载图片，还会预加载CSS、JavaScript等相关的东西。使用Ajax，比直接使用JavaScript，优越之处在于JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。
  • 使用jQuery图片预加载(延迟加载)插件Lazy Load：Lazy Load也叫惰性加载，延迟加载，顾名思义，就是在图片未到达可视区域时，不加载图片

参考： 图片预加载的方法git

手写http请求？（XMLHttpRequest）

使用XMLHttpRequest对象：建立XHR对象、配置header、发送请求！经过设置回调来接受服务器响应！面试

谈谈promise?

Promise的优势：

  • 最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了
  • 串行执行异步任务，不用Promise须要写一层一层的嵌套代码，任何任务失败则再也不继续并执行错误处理函数
  • Promise还能够并行执行异步任务

若是咱们组合使用Promise，就能够把不少异步任务以并行和串行的方式组合起来执行。

ES5做用域和ES6做用域？

ES5: 函数做用域（局部）和全局做用域
ES6: 多出了一个块级做用域，也就是{}花括号里声明的单独的做用域

ES5怎么实现类？

使用原型继承的方式实现类！

对象的深拷贝？ES六、ES5

浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用
深拷贝： 建立一个新的对象和数组，将原对象的各项属性的“值”（数组的全部元素）拷贝过来，是“值”而不是“引用”

深拷贝对象（不讨论数组的状况）：

  • 循环遍历对象的属性赋值
  • ES6的Object.assign: (用于对象的合并，将源对象（source）的全部可枚举属性，复制到目标对象（target），并返回合并后的target)
  • ES6扩展运算符:扩展运算符（...）用于取出参数对象的全部可遍历属性，拷贝到当前对象之中
  • JSON.parse(JSON.stringify(obj)): 上面三种方法不能拷贝全部层级，该方法能够拷贝对象全部层级
  • 手动些递归（-_-!）

参考：https://www.cnblogs.com/pengh...

字符串的截取两个方法（subString subStr）的区别？

stringObject.substr(start,length):在字符串中抽取从 start 下标开始的指定数目的字符
stringObject.substring(start,stop): 用于提取字符串中介于两个指定下标之间的字符

使用过less、sass么？

没用过，从预编译语言的优势回答的
使用的优势：

  • 方便CSS的维护，成本和编写成本
  • 为 CSS 加入程序式语言的特性

缺点：

  • 提升了门槛

跨域？

同源指的是：URL由协议、域名、端口和路径组成，若是两个URL的协议、域名和端口相同，则表示他们同源。
同源策略：浏览器的同源策略，限制了来自不一样源的"document"或脚本，对当前"document"读取或设置某些属性（可是容许当前源执行其余源的脚本）

前端跨域实现方式：

  • JSONP：<script> 标签是不受同源策略的限制的，它能够载入任意地方的 JavaScript 文件，而并不要求同源。
  • 修改document.domain： 浏览器脚本修改document.domain。域名只容许往上升，例如a.git.com到git.com，这样脚本就能够访问git.com上的资源了。还有种用法是假设浏览器访问了a.git.com和b.git.com，若是它们的脚本都把域名设为git.com，那么浏览器本地的资源能够共享。
  • window.postMessage：Html5的新方法，两个域下的脚本能够跨window通讯。
  • 利用表单：浏览器里不由止表单跨域，因此能够用Javascript + iframe + 表单实现跨域调用

服务端跨域实现方式：

  • 反向代理服务器： 将你的服务器配置成 须要跨域获取的资源的 反向代理服务器。也就是说，将其余域名的资源映射到你本身的域名之下，这样浏览器就认为他们是同源的。
  • Cross-Origin Resource Sharing： 是 W3C 推出的一种跨站资源获取的机制。服务器 在响应头中设置相应的选项，浏览器若是支持这种方法的话就会将这种跨站资源请求视为合法，进而获取资源。

this 值？

this值在四种状况下：

  • 全局调用函数时，在ES5中为指向window对象，但在ES6中this的值为undefined
  • 对象调用方法时，this的值为指向该对象
  • 构造函数建立对象时，this指向新建立的对象
  • call/apply/bind 方法时this值被更改成它们三的第一个参数

谈谈CommonJs、AMD、CMD？

CommonJs: 模块的加载方式是同步的（服务器端模块加载）
AMD: 异步方式加载模块，模块的加载不影响它后面语句的运行。全部依赖这个模块的语句，都定义在一个回调函数中，等到加载完成以后，这个回调函数才会运行。（浏览器端模块加载） AMD的方式比较适合浏览器（require.js 遵循的是AMD规范实现的模块加载）
CMD: CMD至关于按需加载，定义一个模块的时候不须要当即制定依赖模块，在须要的时候require就能够了，比较方便；而AMD则相反，定义模块的时候须要制定依赖模块，并以形参的方式引入factory中

AMD 与 CMD 的区别：

  • AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
  • CMD推崇就近依赖，只有在用到某个模块的时候再去require

一样都是异步加载模块，AMD在加载模块完成后就会执行改模块，全部模块都加载执行完后会进入require的回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不必定一致，看网络速度，哪一个先下载下来，哪一个先执行，可是主逻辑必定在全部依赖加载完成后才执行

CMD加载完某个依赖模块后并不执行，只是下载而已，在全部依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是彻底一致的

这也是不少人说AMD用户体验好，由于没有延迟，依赖模块提早执行了，CMD性能好，由于只有用户须要的时候才执行的缘由

require.js 遵循AMD规范，主要为了解决下面两个问题：

  • 实现js文件的异步加载，避免网页失去响应
  • 管理模块之间的依赖性，便于代码的编写和维护

参考： http://www.ruanyifeng.com/blo... https://www.jianshu.com/p/042...

vue 中的 data为何是函数而不是属性值？

面试二

看代码说出打印值？

这道题的代码具体不清了，考查的是数组相似下面这样

var a = [,1],
    b = [,1,,1],
    c = [1,];
    console.log(a.length); 
    console.log(b.length);
    console.log(c.length);

打印： 2 2 1

如下哪些方法属于全局函数？在window对象下

A eval
B parseFloat
C setTimeout
D alert
E enscape

clipboard.png

答案： ABCDE

下面哪段代码会报错？

A var a = ()
B var b = {}
C var c = []
D var d =

答案： A

如下哪些方法能够在前端跨域？

A JSONP
B script 标签
C iframe 和 location.hash
D flash
E postMessage

答案： ABCDE
参考：http://www.cnblogs.com/rainma...
clipboard.png

看下列代码，将会输出什么?（考查变量声明提高）

var foo = 1;
function(){
    console.log(foo);
    var foo = 2;
    console.log(foo);
}

输出undefined 和 2

如下代码输出什么？(考查逻辑表达式）

console.log(1 && 2);

输出： 2

如下代码输出什么？（javascript）

console.log(1+"2"+"2"); 
console.log(1+ +"2"+"2");
console.log(1+ -"1"+2);
console.log(1+ -"1"+"2");
console.log(+"1"+2);
console.log(1+ "2");
console.log("A"-"B"+"2");
console.log("A"-"B"+2);

输出： 122 32 2 02 3 12 NaN2 NaN

在body中插入“<ul><li>第一行...</li><li>...</li>...</ul>”,ul中有10个li，要求插入时考虑性能

页面插入DOM会引发回流和重绘。尽可能减小回流和重绘的次数为主要思路。

参考： http://developer.51cto.com/ar...

谈谈cookies、sessionStorage、localStorage之间的区别？

主要从四个方面来回答：

  • 做用域
  • 大小
  • 生存周期
  • 存储位置 sessionstorage和localstorage都是html5提供的客户端存储方式（都保存在客户端）

区别：

  • cookie数据始终在同源的http请求中携带（即便不须要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，能够限制cookie只属于某个路径下。
  • 存储大小限制也不一样，cookie数据不能超过4k，同时由于每次http请求都会携带cookie，因此cookie只适合保存很小的数据，如会话标识。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。
  • 数据有效期不一样，sessionStorage：仅在当前浏览器窗口关闭前有效，天然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，所以用做持久数据；cookie只在设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭。
  • 做用域不一样，sessionStorage不在不一样的浏览器窗口中共享，即便是同一个页面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。Web Storage 支持事件通知机制，能够将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

对象的深拷贝、浅拷贝？为何须要深拷贝？

浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用
深拷贝： 建立一个新的对象和数组，将原对象的各项属性的“值”（数组的全部元素）拷贝过来，是“值”而不是“引用”

深拷贝对象（不讨论数组的状况）：

  • 循环遍历对象的属性赋值
  • ES6的Object.assign: (用于对象的合并，将源对象（source）的全部可枚举属性，复制到目标对象（target），并返回合并后的target)
  • ES6扩展运算符:扩展运算符（...）用于取出参数对象的全部可遍历属性，拷贝到当前对象之中
  • JSON.parse(JSON.stringify(obj)): 上面三种方法不能拷贝全部层级，该方法能够拷贝对象全部层级
  • 手动些递归（-_-!）

为何须要深拷贝： 个人回答是 咱们拷贝的初衷是，建立一个新对象，该新对象拥有原有对象的全部属性和方法。若是浅拷贝，那原对象改变，表面上看就是咱们拷贝的对象也变了。

数组去重方法有哪些？

方法：

  • 双层循环去重（新数组保存，遍历新数组查找有无已重复元素）
  • 排序后相邻去除法
/*
* 给传入数组排序，排序后相同值相邻，
* 而后遍历时,新数组只加入不与前一值重复的值。
* 会打乱原来数组的顺序
* */
function uniq(array){
    array.sort();
    var temp=[array[0]];
    for(var i = 1; i < array.length; i++){
        if( array[i] !== temp[temp.length-1]){
            temp.push(array[i]);
        }
    }
    return temp;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));
  • 数组下标法
/*
*
* 仍是得调用“indexOf”性能跟方法1差很少，
* 实现思路：若是当前数组的第i项在当前数组中第一次出现的位置不是i，
* 那么表示第i项是重复的，忽略掉。不然存入结果数组。
* */
function uniq(array){
    var temp = [];
    for(var i = 0; i < array.length; i++) {
        //若是当前数组的第i项在当前数组中第一次出现的位置是i，才存入数组；不然表明是重复的
        if(array.indexOf(array[i]) == i){
            temp.push(array[i])
        }
    }
    return temp;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));
  • 优化遍历数组法
// 思路：获取没重复的最右一值放入新数组
    /*
    * 推荐的方法
    *
    * 方法的实现代码至关酷炫，
    * 实现思路：获取没重复的最右一值放入新数组。
    * （检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断）*/
    function uniq(array){
        var temp = [];
        var index = [];
        var l = array.length;
        for(var i = 0; i < l; i++) {
            for(var j = i + 1; j < l; j++){
                if (array[i] === array[j]){
                    i++;
                    j = i;
                }
            }
            temp.push(array[i]);
            index.push(i);
        }
        console.log(index);
        return temp;
    }
    
    var aa = [1,2,2,3,5,3,6,5];
    console.log(uniq(aa));
  • 对象键值法去重
/*
    * 速度最快， 占空间最多（空间换时间）
    *
    * 该方法执行的速度比其余任何方法都快， 就是占用的内存大一些。
    * 现思路：新建一js对象以及新数组，遍历传入数组时，判断值是否为js对象的键，
    * 不是的话给对象新增该键并放入新数组。
    * 注意点：判断是否为js对象键时，会自动对传入的键执行“toString()”，
    * 不一样的键可能会被误认为同样，例如n[val]-- n[1]、n["1"]；
    * 解决上述问题仍是得调用“indexOf”。*/
    function uniq(array){
        var temp = {}, r = [], len = array.length, val, type;
        for (var i = 0; i < len; i++) {
            val = array[i];
            type = typeof val;
            if (!temp[val]) {
                temp[val] = [type];
                r.push(val);
            } else if (temp[val].indexOf(type) < 0) {
                temp[val].push(type);
                r.push(val);
            }
        }
        return r;
    }
    
    var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
    console.log(uniq(aa));
  • ES6
// ES6
function unique (arr) {
  const seen = new Map()
  return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
}

谈谈react/vue/angular之间的差别、区别？

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程