前端面试题汇总-其他（二）

原生js forEach()和map()区别

共同点：

1.都是循环遍历数组中的每一项。

2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数：数组中的当前项item,当前项的索引index,原始数组input。

3.匿名函数中的this都是指Window。

4.只能遍历数组。

区别：
forEach() 没有返回值

var arr = [12,23,24,42,1];  
var res = arr.forEach(function (item,index,input) {  
       input[index] = item*10;  
})  
console.log(res); //-->undefined;  
console.log(arr); //-->会对原来的数组产生改变； 

map() 有返回值，可以return 出来

var arr = [12,23,24,42,1];  
var res = arr.map(function (item,index,input) {  
    return item*10;  
})  
console.log(res);//-->[120,230,240,420,10];  
console.log(arr);//-->[12,23,24,42,1]；

jQuery .each()和.each()和.each()和.map()遍历

共同点：
即可遍历数组，又可遍历对象。
1.$.each()

没有返回值。$.each()里面的匿名函数支持2个参数：当前项的索引i，数组中的当前项n。如果遍历的是对象，k 是键，n 是值。

var arr=$.map( [0,1,2], function(n){  
     return n + 4;  
});  
console.log(arr);   
$.map({"name":"Jim","age":17},function(i,n){  
     console.log(i+":"+n);  
});

var ary = [12,23,24,42,1];
var res = ary.forEach(function (item,index,input) {
input[index] = item*10;
})
console.log(res);//-->undefined;
console.log(ary);//-->会对原来的数组产生改变；

以上内容转自 https://blog.csdn.net/andy4021/java/article/details/88359092

js将如何将伪数组转为真数组

伪数组就是像数组的对象,举个例子:

obj={
    "0":"abc",
    "1":18,
    length:2
}

这个就是伪数组,含有length属性

1. [].slice.call(obj) 这个等于Array.protype.slice.call(obj)
   var newArr=[].slice.call(obj)
   slice会把通过索引位置获取新的数组，该方法不会修改原数组，只是返回一个新的子数组.call会把this的指向改为传进去的obj
2. Array.form(obj),ES6的新语法
   var newArr=Array.from(obj)
3. 使用扩展运算符,也是ES6的语法
   var newArr= [...obj]
   以上内容转自https://blog.csdn.net/sinat_19594515/article/details/101025056

div水平垂直居中的六种方法

方法一:

绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）

div{
    background:red;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}

方法二:

绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值

图片展示： 如方法一的图片展示

代码如下：

div{
    width:600px;
    height: 600px;
    background:red;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-300px;
    margin-top:-300px;
}

方法三：

绝对定位方法：绝对定位下top left right bottom 都设置0

图片展示： 如方法一的图片展示

代码如下：

我是子级
/**css**/
div.child{
    width: 600px;
    height: 600px;
    background: red;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

方法四:

flex布局方法：当前div的父级添加flex css样式

    
child

1
/**css**/
.box{
    height:800px;
    -webkit-display:flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:center;
    justify-content:center;
    border:1px solid #ccc;
}
div.child{
    width:600px;
    height:600px;
    background-color:red;
}

方法五:

table-cell实现水平垂直居中: table-cell middle center组合使用

    
我爱你

/**css**/
.table-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 240px;
    height: 180px;
    border:1px solid #666;
}

方法六:

绝对定位：calc() 函数动态计算实现水平垂直居中

    
calc

/**css**/
.calc{
  position: relative;
  border: 1px solid #ccc;
  width: 400px;
  height: 160px;
}
.calc .child{
  position: absolute;
  width: 200px;
  height: 50px;
  left:-webkit-calc((400px - 200px)/2);
  top:-webkit-calc((160px - 50px)/2);
  left:-moz-calc((400px - 200px)/2);
  top:-moz-calc((160px - 50px)/2);
  left:calc((400px - 200px)/2);
  top:calc((160px - 50px)/2);
}

以上内容转自https://www.cnblogs.com/a-cat/p/9019184.html

前端如何优化网站性能

1、减少 HTTP 请求数量

在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。

CSS Sprites：国内俗称 CSS 精灵，这是将多张图片合并成一张图片达到减少 HTTP 请求的一种解决方案，可以通过 CSS background 属性来访问图片内容。这种方案同时还可以减少图片总字节数。

合并 CSS 和 JS 文件：现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个 CSS 或者 多个 JS 合并成一个文件。

采用 lazyLoad：俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

控制资源文件加载优先级

浏览器在加载 HTML 内容时，是将 HTML 内容从上至下依次解析，解析到 link 或者 script 标签就会加载 href 或者 src 对应链接内容，为了第一时间展示页面给用户，就需要将 CSS 提前加载，不要受 JS 加载影响。

一般情况下都是 CSS 在头部，JS 在底部。

利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。

减少重排（Reflow）

基本原理：重排是 DOM 的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的 visibility 属性，这也是 Reflow 低效的原因。如果 Reflow 的过于频繁，CPU 使用率就会急剧上升。

减少 Reflow，如果需要在 DOM 操作时添加样式，尽量使用 增加 class 属性，而不是通过 style 操作样式。

减少 DOM 操作

图标使用 IconFont 替换

网页从输入网址到渲染完成经历了哪些过程

1、输入网址；

2、发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；

3、与web服务器建立TCP连接；

4、浏览器向web服务器发送http请求；

5、web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；

6、浏览器下载web服务器返回的数据及解析html源文件；

7、生成DOM树，解析css和js，渲染页面，直至显示完成；

jQuery获取的dom对象和原生的dom对象有何区别

js原生获取的dom是一个对象，jQuery对象就是一个数组对象，其实就是选择出来的元素的数组集合，所以说他们两者是不同的对象类型不等价。

• 原生DOM对象转jQuery对象

var box = document.getElementById('box');

var $box = $(box);

• Query对象转原生DOM对象：

var $box = $('#box');

var box = $box[0];

jQuery如何扩展自定义方法

(jQuery.fn.myMethod=function () {

      alert('myMethod');

})

// 或者：

(function ($) {

        $.fn.extend({

            myMethod : function () {

                  alert('myMethod');

            }

        })

})(jQuery)

使用：

$("#div").myMethod();

以上部分内容转自：前端小酱