网易前端笔试笔记（1）

跨域请求中，需要设置哪个属性为true,才能携带cookie信息？

withCredentials

现在假设对N个元素的链表做顺序查找时，若查找每个元素的概率相同，则平均查找长度为：（N+1）/2

解析：总长度n(n+1)/2除以总个数n

下列程序的运行结果是什么

console.log(1);
new Promise(function (resolve, reject){
reject();
resolve();
}).then(function(){
console.log(2);
}, function(){
console.log(3);
});
console.log(4);

1 4 3
Promise.then是微任务属于异步，而console.log(1)、console.log(4)都是同步，所以先打印1、4。最后看Promise对象。

Promise对象只有三种结果：Pending(进行中)、Fulfilled(已成功)、Rejected(已失败)。对象的状态变化只有两种：从Pending —— Fulfilled(Resolved)；从Pending —— Rejected。

构造函数Promise接受一个函数作为参数，并且该函数有两个参数resolve 和 reject。resolve是异步操作成功时调用，reject是异步操作失败时调用。Promise实例对象的then方法中的两个函数分别指定Resolved状态（成功）和Rejected状态（失败）的回调函数。
本题：在Promise构造函数中reject()比resolve()先执行，会执行Rejected状态的回调，即console.log(3)，打印3。前面说了Promise对象状态改变只有两种情况，执行reject()后，Promise对象状态变为了Rejected。所以后面的resolve()不会执行。最终结果为：1、4、3。
状态不可逆

下列代码的执行结果

var a = 1
function fn1() {
console.log(this.a)
}
const fn2 = ()=> {
console.log(this.a)
}

const obj = {
a: 10,
fn1: fn1,
fn2: fn2
}

fn1()
fn2()
obj.fn1()
obj.fn2()

1 1 10 1
箭头函数中的this始终指向父级作用域中的this。
换句话说剪头函数会捕获其所在的上下文的this值作为自己的this值。
在箭头函数中调用this时，仅仅是沿着作用域链向上寻找，找到最近的一个this拿来使用，它与调用时的上下文无关。

• fn1（）this指向window，打印1
• fn2（）fn2是一个剪头函数，this指向作用域链上最近的this，这里为window，打印1
• obj.fn1() fn1是普通函数，this指向obj，即obj.a ，打印10
• obj.fn2() fn2是箭头函数，this会继承父级作用域中的this，为window，打印1
• 结果为1 1 10 1

下列代码的执行结果

const a = {
valueOf() {
return 'valueOf'
},
toString() {
return 'toString'
},
get() {
return 'get'
}
}
alert(a)

toString
valueOf()与toString()的区别。
在不重写这两个方法时：

• toString()方法：返回对象的字符串表示
• valueOf()方法：返回指定对象的原始值。
• 默认情况，会调用toString()方法
  二者并存的情况下，在数值运算中，优先调用了valueOf，字符串运算中，优先调用了toString
  回到本题: alert(obj)不存在数值运算，和其他操作符，所以默认调用toString方法。

小易有个32G字节的文件，需要从电脑1传送到电脑2，假设两者之间是1024Mbit/s的网络，那么需要多久能传输完

3281024M bit / 1024Mbit/s=256s

下列代码的执行结果

function fun () {
    return () => {
        return () => {
            return () => {
            console.log(this.name)
                    }
                }
        }
}
var f = fun.call({name: 'foo'})
var t1 = f.call({name: 'bar'})()()
var t2 = f().call({name: 'baz'})()
var t3 = f()().call({name: 'qux'})

foo foo foo
箭头函数没有自己的this，也不能使用call，applay以及bind去绑定this，会选择去继承父级作用域的this。所以后面几次的call实际上是失败的。所以剪头函数层层向上寻找name，只会在最外层的fun函数作用域中找到this指向。
var f = fun.call({name: ‘foo’})这一句 会将this指向{name: ‘foo’}。
var t1 = f.call({name: ‘bar’})()()，执行f(),之后返回的都是箭头函数,所以直到最后，父级作用域上的this还是指向{name: ‘foo’}。打印：foo。
下面两个同样，因为t1、t2、t3都是箭头函数，使用call()方法不能改变this指向，作用域链上最近的this还是指向{name:‘foo’}。

Cookie LocalStorage sessionStorage

• cookie 一般由服务器生成，可以设置失效时间。如果实在浏览器端生成，默认关闭浏览器后失效，4k左右大小，每次都会携带在http头中，如果使用cookie保存过多的数据会带来性能问题。需要程序员自己封装，原生的接口不友好
• localStorage 除非被清除，否则永远保存，5mb左右，仅在客户端保存，原生接口可以接受也可以再封装
• seeionstprage 仅在当前会话下有效，关闭页面或者浏览器后被清除，5mb左右，仅在客户端保存，原生接口可以接受也可以再封装

块级元素，行内元素

• 块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。
• 块级元素的padding和margin值的设置都是有效的。行内元素和块级元素都是盒子模型。
  行内元素的padding-top、padding-bottom、margin-top、margin-bottom属性设置是无效的（top bottom）
  行内元素的padding-left、padding-right、margin-left、margin-right属性设置是有效的（left right）
  行内元素的 line-height 属性设置是有效的。
  行内元素的 width、height 属性设置是无效的。
  行内元素的padding-top、padding-bottom从显示的效果上是增加的，但其实设置的是无效的，并不会对他周围的元素产生任何影
  • textarea是行内元素 - 多行文本输入框，input也是行内元素
    行内inline 块级block 行内块级line-block(拥有内在尺寸，可设置高宽，不会自动换行 )

有哪些常见的服务端推送的通信解决方案？它们的优劣分别是什么？

1. Ajax轮询，利用XHR，通过setInterval定时向后端发送请求
   优点：实现简单
   缺点：数据同步不及时，增加后端处理压力
2. Ajax长轮询，在Ajax轮询的基础上做的改进，在后端数据没有更新时不再返回空响应，而且后端一直保持连接，直到后端有数据变化，则响应请求并且关闭连接，前端收到数据后，再次向后端发起请求，并处理刚刚收到的数据
   优点：通信及时，服务端资源消耗低
   缺点：请求交替时消息会延迟
3. websocket，允许服务端主动向客户端发送数据，浏览器和服务器只需要完成一次握手就可以创建持久性的连接，并进行双向数据传输
   优点：通信及时，采用双工的通信模式
   缺点：服务端资源消耗高

从输入url到页面展现发生了什么？

1. 浏览器向服务器发送一个http请求
2. 进行DNS解析
   • 先找浏览器缓存
   • 再找os缓存
   • 读取本地host文件
   • 发起网络DNS请求调用
   • 得到最后的服务器ip
3. 客户端启动端口，经过三次握手进入到服务器的网卡
4. 浏览器就可以发送真正的请求
5. 服务器接收到http请求，解析路径和参数，经后台的处理完成响应
6. 浏览器可以收到服务器端的响应，并开始渲染页面。DOM树+CSS树=Render Tree
7. 添加用户与界面的交互，绑定一些事件，执行一些动态的行为.
8. 还可刷新一些局部内容。

其中在页面渲染以及网络请求响应的性能优化方面，我们分别可以做哪些优化工作？

1. DNS的优化
2. 资源的合并与压缩：减小http请求数量，减小数据传送的体积
3. 减少重绘与回流