客户端每下载一个资源,都要进行http请求,这样依次构建HTML DOM Tree,CSSOM Tree,Render Tree,然后执行layout和paint操作。其中js脚本的加载和执行会阻塞dom的加载(asyn和defer除外),因为脚本可能会修改dom结构。css一般不会操作dom,所以css的加载不会影响dom加载,但有可能影响js的加载和执行。所以最佳实践是csslink放在head标签内,script标签放在body标签的最底部。不过,现在浏览器一般使用了prefatch优化,即提前并行下载css,js等资源,但并不执行,因为执行顺序存在着依赖关系。
The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes as an argument a callback to be invoked before the repaint.
闭包可以理解为函数中定义的函数,由于存在作用域链,内层函数可以访问外层函数的变量,那么内层函数就可以实时的对那个变量进行操作,而如果把这个内层函数当作返回值的话,那么外层函数的外部就可以突破作用域限制访问那个变量。
通俗的解释就是 function return function,就是由于作用域链的原因,内层函数可以访问外层函数中的变量,那个内层函数就是我们通常所说的闭包,它构成了函数内部和外部的桥梁。
闭包有以下两个作用:
访问函数内部的变量
可以使这些变量始终保存在内存中
闭包会使函数中的变量保存在内存当中,内存的消耗很大,所以我们不要滥用闭包,在适当的时候才去用
写一下快速排序
function quickSort(arr) {
if (Object.prototype.toString.call(arr) != "[object Array]") {
return;
}
if (arr.length <= 1) {
return arr;
}
var middle = Math.floor(arr.length / 2);
var pivot = arr.splice(middle, 1)[0];
var left = [];
var right = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot], quickSort(right));
}
那再写一下二分搜索
function binarySearch(arr, target) {
if (Object.prototype.toString.call(arr) != "[object Array]") {
return;
}
// arr前提要是从小到大排列的数组
arr = quickSort(arr);
var bottom = 0;
var top = arr.length - 1;
var position;
while (bottom < top) {
var middle = Math.floor((bottom + top) / 2);
if (arr[middle] == target) {
position = middle;
console.log("Find target at position: " + position);
return position;
} else if (arr[middle] < target) {
bottom = middle + 1;
} else if (arr[middle] > target) {
top = middle;
}
}
return position;
}
浏览器常驻的5个线程是什么?
从输入一个Url到浏览器渲染显示页面,中间都发生了什么?
浏览器开启一个线程处理这个url请求,然后通过DNS服务将Url域名转换为IP地址。DNS的过程包括DNS缓存查询,递归查询和迭代查询,DNS服务器分为根服务器(root)、顶级域DNS服务器(.com, .org, .cn)、和权威DNS服务器(baidu.com, google.com等)。其中顶级域也称为一级域,权威DNS也称为二级域DNS。DNS查询细节参考这里。
拿到服务器IP之后,便开始建立TCP连接,通过三次握手(SYN, SYN|ACK, ACK)建立TCP连接。
TCP连接建立之后,浏览器便开始发送HTTPGet请求,请求位于服务器上的资源,如html、css、js、img等,当服务器返回状态200时,就表示请求成功。关于Http详情,可参考:这里。
客户端每下载一个资源,都要进行http请求,这样依次构建HTML DOM Tree,CSSOM Tree,Render Tree,然后执行layout和paint操作。其中js脚本的加载和执行会阻塞dom的加载(asyn和defer除外),因为脚本可能会修改dom结构。css一般不会操作dom,所以css的加载不会影响dom加载,但有可能影响js的加载和执行。所以最佳实践是csslink放在head标签内,script标签放在body标签的最底部。不过,现在浏览器一般使用了prefatch优化,即提前并行下载css,js等资源,但并不执行,因为执行顺序存在着依赖关系。
请谈谈你对雅虎军规和前端性能优化的理解?
谈谈requestAnimationFrame原理,以及你知道的其他前端动画方法
The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes as an argument a callback to be invoked before the repaint.
requestAnimationFrame(callback fn)的核心原理是递归,即在update函数内部递归调用requestAnimationFrame(update),从而完成动画。它是为浏览器专门设计的动画API,当窗口处于未激活状态时,动画会自动停止,降低了CPU开销。
其他实现动画的方法:CSS3 animation @keyframes || CSS3 transition: all 1s ease-in-out 0.5s; || setInterval setTimeout draw() update() loop()模式 || jQuery 动画API || canvas 等等。
解释下闭包
闭包可以理解为函数中定义的函数,由于存在作用域链,内层函数可以访问外层函数的变量,那么内层函数就可以实时的对那个变量进行操作,而如果把这个内层函数当作返回值的话,那么外层函数的外部就可以突破作用域限制访问那个变量。 通俗的解释就是 function return function,就是由于作用域链的原因,内层函数可以访问外层函数中的变量,那个内层函数就是我们通常所说的闭包,它构成了函数内部和外部的桥梁。 闭包有以下两个作用:
闭包会使函数中的变量保存在内存当中,内存的消耗很大,所以我们不要滥用闭包,在适当的时候才去用
写一下快速排序
那再写一下二分搜索
写一个fibonacci数列函数0, 1, 1, 2, 3....
用查表法改进上述算法
好的,查表,查表,查表。。。
实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制
数组去重
自定义console.log方法,使得可以传入多个参数,并且自动加上app前缀
请封装cookie操作方法
Cookie和Session
cookie的中文意思是小甜饼,可以看出cookie的确非常小,一般存放的数据量只有4k左右。它的作用是标志用户信息,让服务器了解用户的身份。它的原理图如下所示:
即服务器在用户第一次请求之后,会设置一些cookie信息如sessionID等,然后发送给客户端,客户端每次请求时就会加上相应的cookie信息,这样服务器就了解是哪个用户在访问了。
session意思是会话,是一种存储在服务端的特定数据结构。因为http是一种无状态的协议,所以服务端就要用session的机制记录用户的状态,典型的场景如购物车应用,服务端要为特定的用户创建了特定的SessionID,用于标识这个用户,并且跟踪用户,这样才知道购物车里面有什么东西。Session存放在服务端,可以是内存,数据库或者是文件。
移动端300ms点击延迟
问题来源:safari设计的双击缩放特性
解决方案一:禁用缩放
表明这个页面是不可缩放的,那双击缩放的功能就没有意义了,此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。 这个方案有一个缺点,就是必须通过完全禁用缩放来达到去掉点击延迟的目的,然而完全禁用缩放并不是我们的初衷,我们只是想禁掉默认的双击缩放行为,这样就不用等待300ms来判断当前操作是否是双击。
方案二:更改默认的视口宽度
方案三:指针事件
跟300ms点击延迟相关的,是touch-action这个CSS属性。这个属性指定了相应元素上能够触发的用户代理(也就是浏览器)的默认行为。如果将该属性值设置为touch-action: none,那么表示在该元素上的操作不会触发用户代理的任何默认行为,就无需进行300ms的延迟判断。
方案四:现成工具
FastClick,HandJS,Polymer
inline vs block vs inline-block
Inline elements:
Block elements:
Inline-block elements:
参考
Doctype作用?严格模式与混杂模式如何区分?它们有何差异?
see here
<!DOCTYPE>声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行,这并不是一个 HTML 标签。
严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码。
混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。