金山办公2020笔试

文章目录

一、==的使用
二、减少网页加载时间的方法
三、HTTP缓存，与缓存有关的头部
- 【Last-modified】
- 【ETag】
- 【Expires】
- 【Cache-Control】
- 浏览器使用缓存的过程
四、DOM Tree与Render Tree
五、JS的装箱/拆箱转换
六、编程题

一、==的使用

问题：[] == [] 的输出结果是什么？

==是相等操作符，相等操作符会先转换操作数(通常为强制转型)，如果两个操作数相等，则返回true。

转换不同数据类型的规则：

布尔值转换成数值
字符串与数值比较，字符串转换为数值
一个操作数是对象，另一个操作数不是，调用valeOf()方法，用得到的基本类型值按前面的规则进行比较
一个操作数是NaN，无论另一个操作数是什么，都返回false
两个操作数都是对象，比较是否为同一对象，同一对象则返回true，否则为false
undefined == null ，返回true (undefined、null和其他比结果都是false )

[ ]和{ }的使用：

Number([])   // 0
Number({})   // NaN

[] == []   //false
{} == {}    //false

在 JavaScript 中，Object、Array、Function、RegExp、Date 都是引用类型。
声明引用类型的时候，变量名保存在栈内存中，对应值保存在堆内存中。变量在栈内存中实际保存的是这个值在堆内存中的地址也就是指针。
比较两个引用型变量的时候只有他们的指针指向同一个地址的时候才是相等的返回true，否则为false。

[] == ![]
{} == !{}

逻辑非 (!) 的优先级高于相等操作符 ( == )
![]为false，[] == false应用规则1和规则3，结果为 0==0，返回true
!{}为false，{} == false应用规则1和规则3，结果为NaN == 0，返回false

if([]){    //true
}if({}){    //true
}

null、undefined、NaN、+0、-0、""，这六种转换成布尔类型是false，其余都是true。

二、减少网页加载时间的方法

异步加载js，在<script>标签上增加属性defer或者async 浏览器渲染原理
减少http请求（合并文件、http缓存）
优化图片（根据浏览器窗口的大小来压缩和调整图像大小）
压缩js和css代码（一般js、css文件中存在大量的空格、换行、注释，这些利于阅读，如果能够压缩掉，将会很有利于网络传输）
CDN加速

CDN加速

CDN的全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的Internet中增加一层新的CACHE(缓存)层，将网站的内容发布到最接近用户的网络”边缘“的节点，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因，提高用户访问网站的响应速度。

分类：根据加速对象不同分为客户端加速和服务端加速
客户端加速：Cache部署在网络出口处，把经常访问的内容缓存在本地，提高响应速度和节约宽带。
服务端加速：Cache部署在服务器前端，作为Web服务器的代理缓存机，提高Web服务器的性能，加速访问速度。

三、HTTP缓存，与缓存有关的头部

HTTP缓存：
一些不经常变更的资源(比如网站logo等静态资源)，使用缓存可以减少网络传输成本，提高加载资源的速度，一定程度上可以加快网页的渲染。

浏览器缓存分类：
缓存协商：Last-modified，Etag
彻底缓存：cache-control，Expires

【Last-modified】

第一次向服务器发出请求是，服务器会反馈回来带有Last-modified:GMTtime头的response。当我们再次请求相同的数据时，我们发送的请求带上if-modified-since:GMTtimehttp 请求头，该请求头包含了上一次从服务器获取数据的日期。

服务器用服务器本身所有的Last-modified时间与我们新发送的If-Modified-Since中包含时间比较，如果服务器上的数据从那时起没有变化，服务器将会返回一个http状态代码304，表示数据没变化，直接用你本地的缓存数据吧。

【ETag】

第一次向服务器发出请求是，服务器会反馈回来的response中不仅包含你所请求的数据，还包含某种数据的hash (在 ETag 头信息中给出)。这个hash 定完全取决于服务器。

当再次请求相同的数据时，我们发送的请求包含If-None-Match: 头信息，该头信息中包含 ETaghash，如果数据没有改变，服务器判断后将返回 304 状态代码。

【Last-modified】和【ETag】的区别
服务器比较的值不同，Last-modified比较的是最近修改的时间，ETag比较的是hash值。

【Expires】

Expires指的是过期时间，特指的是缓存服务器上缓存的过期时间。过了Expires设置的过期时间，缓存器内的缓存也就过期了，就需要重新向源服务器发送请求，检查数据是否被修改或者获取最新的数据。

Expires的值是一个绝对时间，由服务器产生。但是由于源服务器和缓存服务器的时间未必会相同，会造成缓存失效时间不准确。

【Cache-Control】

cache-control的值是相对浏览器的时间，优先级最高。

常用值：

max-age=***：表示缓存的内容将在多少秒后失效，单位是秒。
public ：表示所有内容都将被缓存。（因为默认的是http认证过的内容才可以被缓存）
private：表示内容只缓存到私有缓存中，即仅客户端可以缓存，缓存服务器也不可以。
no-cache：强制每次的请求直接发送给源服务器，必须先与服务器确认返回的响应是否被更改，然后才能使用该响应来满足后续对同一个网址的请求。(表示可以缓存，但是在使用缓存之前需要向服务器验证)
no-store：表示强制不缓存任何内容，不缓存。
must-revalidate和proxy-revalidate：如果缓存的内容失效，请求必须发送到服务器或者代理服务器进行重新验证。proxy-revalidate只对缓存代理服务器起作用。

浏览器使用缓存的过程

浏览器发起请求

检查是否有缓存
有Pragma字段 no-cache强制请求新资源
有缓存并且没有Pragma,先判断缓存是否过期（Cache-Control 优先于 Expires），没有过期就使用缓存
缓存有效时间过期了，查看是否使用了Eatg和Last-Modified 头部
发送If-none-Match和 If-Modified-Since去验证是否缓存还能继续使用（可能缓存到期了，但是服务端没有修改，而资源又比较大，通过校验可以减少网络传输）
资源没有修改就使用缓存
资源修改了就返回新的资源

四、DOM Tree与Render Tree

DOM Tree包含了所有的HTML标签，包括display：none ，JS动态添加的元素等。
Render Tree是DOM Tree和CSSOM树结合建立起来渲染在屏幕上的。不包含隐藏的节点(比如display：none)。

浏览器的渲染（DOM Tree与Render Tree的形成）

五、JS的装箱/拆箱转换

装箱：把基本数据类型转换为对应的引用类型
拆箱：把引用类型转换为基本的数据类型

每当读取一个基本类型的时候，后台就会创建一个对应的基本包装类型，从而让我们能够调用一些方法来操作这些数据结构。

var str = "text"
len = str.length    //4

在上面的例子中，str是定义的是一个字符串，字符串属于基本类型，它不是对象，所以不应该有方法。但是为什么可以使用length这样的属性？

原因是在js内部为我们做了一些列的处理，创建与之对应的引用类型，使得它能够调用方法。（这就是装箱）

上面len = str.length的过程等同于如下：

var str = new String("text")     //(1)创建String实例
len = str.length                 //(2)在实例上调用指定的方法
str = null                       //(3)销毁实例

将引用类型对象转换为对应的值类型对象，是通过引用类型的valueOf()或toString()方法实现的。（这个过程就是拆箱）

var objStr =new String("123");
console.log( typeof objStr );            //object
console.log( typeof objStr.valueOf() );  //string
console.log( typeof objStr.toString() ); // string

六、编程题

题目：计算一个整数的二进制表示中连续出现1最多的次数。
比如13的二进制是：1101，那么他的二进制表示中连续出现的1最多为2次，所以答案就是2。

let n = readline()
let num = Number(n).toString(2).toString()
var f = 0
var res = 0
for(let i=0; i<num.length; i++){if(num[i]==1){f++res = Math.max(res,f)} else {//res = Math.max(res,f)f = 0}
}
print(res)