面试

[chengfengliu]

1、JS如何计算浏览器的渲染时间？
Navigation Timing 是一个可以在web中精确测量性能的javascript API。这个API提供了一个简单的方法来获得页面导航、加载事件的精确而又详细的时间状态。目前在 IE9、Chrome、Firefox nightly builds 中可用。

domLoading: 这是整个过程中开始时的时间戳，浏览器第一次收到HTML文档的字节开始解析时的时间戳。
domInteractive: 当浏览器完成了所有的HTML解析且DOM构造完成时的时间戳。
domContentLoaded: 当DOM完毕且没有css样式阻止js的执行——意味着我们现在可以构造render tree——的时间戳。
许多js框架当它们开始执行它们自己的逻辑之前等待这个事件——因为浏览器捕捉EventStart和EventEnd时间戳来允许我们追踪这个事件执行多久。
domComplete: 和名字暗示的一样，页面上所有的资源（例如图片等）下载完成和页面上所有的操作都完
loadEvent: 当每个页面上最后一步加载浏览器的时候出发onload事件的时候会触发额外的应用逻辑
domInteractive:标记DOM完成
domContentLoaded:标记DOM和CSSOM的完成
如果这里没有js阻塞的话domInteractive之后会马上是DOMContentLoaded
domComplete 标记当页面以及所有的资源都完成时候

 function measureCRP() {
        var t = window.performance.timing,
         dns = t.domainLookupEnd - t.domainLookupStart,//DNS解析时间
         tcp = t.connectEnd - t.connectStart,//TCP建立连接时间
         white = t.responseStart - t.navigationStart,//白屏时间
          interactive = t.domInteractive - t.domLoading,
          dcl = t.domContentLoadedEventStart - t.domLoading,
          complete = t.domComplete - t.domLoading;
}

地址栏输入URL，浏览器运行步骤
加载 - 解析 - 渲染
1）浏览器会解析三个东西：
一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
CSS，解析CSS会产生CSS规则树。
Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.
2）解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。
3）最后通过调用操作系统Native GUI的API绘制。

2、浏览器缓存

3.HTML5新增标签
artical 标记定义一篇文章
header 标记定义一个页面或一个区域的头部
nav 标记定义导航链接
section 标记定义一个区域
aside 标记定义页面内容部分的侧边栏
hgroup 标记定义文件中一个区块的相关信息
figure 标记定义一组媒体内容以及它们的标题
figcaption 标签定义 figure 元素的标题。
footer 标记定义一个页面或一个区域的底部
dialog 标记定义一个对话框(会话框)类似微信

多媒体交互标签

标记定义媒体资源 标记定义图片 标记定义外部的可交互的内容或插件 比如flash

appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。
insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。
5.前端优化方案

今日头条
1.讲讲你最近在做的项目
2.node中间件
中间件简化和隔离基础设施与业务逻辑之间的细节，让开发者能够关注在业务的开发上，以达到提升开发效率的目的。
在最早的中间件的定义中，它是一种在操作系统上为应用软件提供服务的计算机软件。它既不是操作系统的一部分，也不是应用软件的一部分，它处于操作系统与应用软件之间，让应用软件更好、更方便地使用底层服务。如今中间件的含义借指了这种封装底层细节，为上层提供更方便服务的意义，并非限定在操作系统层面。这里要提到的中间件，就是为我们封装上文提及的所有HTTP请求细节处理（querystring解析、cookie解析）的中间件，开发者可以脱离这部分细节，专注在业务上。

3.app.use()
为具体的业务逻辑添加中间件
（1）如果第一个参数是路径，如果匹配成功，则按顺序触发执行，每个中间件执行完成后，按照约定调用传入next()方法以触发下一个中间件执行，直到最后的业务逻辑。
（2）如果第一个参数不是路径，而是中间件，则为每个路由配置此中间件。

4.HTTP POST content-type
（1）application/x-www-form-urlencoded
这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。很多时候，我们用 Ajax 提交数据时，也是使用这种方式。
（2）multipart/form-data
这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 form 的 enctyped 等于这个值。这种方式一般用来上传文件。每部分都是以 –boundary 开始，紧接着是内容描述信息，然后是回车，最后是字段具体内容（字段、文本或二进制等）。如果传输的是文件，还要包含文件名和文件类型信息。消息主体最后以 –boundary标示结束。
（3）application/json
（4）text/xml

5.canvas的点击事件是如何绑定的？
基本思路是：给Canvas元素绑定事件，当事件发生时，检查事件对象的位置，然后检查哪些图形覆盖了该位置。
事件对象e的layerX和layerY属性表示Canvas内部坐标系中的坐标。

6.on事件与addEventListener的区别？
（1）addEventListener可以给一个事件注册多个监听器
（2）useCapture false默认表示冒泡，true表示捕获。这个参数设置的是元素事件的触发顺序，即页面中某元素设置了事件监听，其内部元素也设置有事件监听，冒泡是先触发最内部元素的事件，再依次触发外一层元素的事件，捕获刚好相反，由外到内依次触发。
（3）如果要移除 addEventListener() 添加的事件监听，就要使用removeEventListener()

7.跨域
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。

腾讯
1.字节流与字符流
所有文件都是按字节存放在磁盘上。但是可以分为字节或者字符进行输入输出。字节流是一个字节为单位，适合于音频、图片等二进制类型文件，而字符流是一个字符为单位（ASCII（数字、英文）:1个字符占一个字节，Unicode: 1个字符占两个字节（网络传输速度慢），UTF-8：变长字节，对于英文一个字节，对于汉字两个或三个字节。），适合处理文字等文件。
2.HTTPS原理
3.浏览器渲染原理
4.垃圾回收
5.hash
6.抓包

面经
1.有一个数组，对这个数组按顺序进行异步处理，一个处理完才开始下一个，用forEach行不行？
单纯用forEach是不行的，因为forEach里是异步处理。
可以用Promise解决，在forEach的回调函数中new Promise()，然后promises.push()。最后Promise.all(promises).then()
2.如何让一个cookie同时用于a.qq.com和b.qq.com?
（1）在a域名的登陆页面，登陆成功后，插入一个隐藏的iframe，src指向b域名，b域名的服务端检验通过后写cookie到浏览器即可。
（2）创建cookie的时候设置关联domain，这样即可实现对指定域名的cookie创建！
3.海量数据处理 - 10亿个数中找出最大的10000个数（top K问题）
先拿10000个数建堆，然后一次添加剩余元素，如果大于堆顶的数（10000中最小的），将这个数替换堆顶，并调整结构使之仍然是一个最小堆，这样，遍历完后，堆中的10000个数就是所需的最大的10000个。建堆时间复杂度是O（mlogm），算法的时间复杂度为O（nmlogm）（n为10亿，m为10000）。
4.如何判断一个对象是数组？

function isArray(o){
  return Object.prototype.toString.call(o) ==  '[object Array]';
}
// 或者
Array.isArray()

5.用js中的正则表达式去掉两边的空格

function trim(str) { 
  return str.replace(/(^\s*)\|(\s*$)/g, ""); 
}

6.nginx适合做什么？
nginx可以作为一个HTTP服务器进行网站的发布处理，另外Nginx可以作为反向代理进行负载均衡的实现。
正向代理：屏蔽客户端，翻墙和缓存
反向代理：屏蔽服务端，负载均衡
7.正则表达式匹配qq号？
var reg = /^[1-9][0-9]{4,9}$/gim;