需要掌握的一些知识点

原作者:汪汪, 地址前端面试知识点总结
本文只摘取部分内容

1、websocket

websocket是一种协议,可以让我们建立客户端到服务器端的全双工通信,这就意味着服务器端可以主动推送数据到客户端,

2、webstorage

webstorage是本地存储,存储在客户端,包括localeStorage和sessionStorage,localeStorage是持久化存储在客户端,只要用户不主动删除,就不会消失,sessionStorage也是存储在客户端,但是他的存在时间是一个回话,一旦浏览器的关于该回话的页面关闭了,sessionStorage就消失了,

3、缓存

html5允许我们自己控制哪些文件需要缓存,哪些不需要,具体的做法如下:

1、首先给html添加manifest属性,并赋值为cache.manifest
2、cache.manifest的内容为: 
         CACHE MANIFEST
         #v1.2
         CACHE :           //表示需要缓存的文件
           a.js
           b.js
       NETWORK:    //表示只在用户在线的时候才需要的文件,不会缓存
         c.js
       FALLBACK
       /        /index.html     //表示如果找不到第一个资源就用第二个资源代替

4、web worker

web worker是运行在浏览器后台的js程序,他不影响主程序的运行,是另开的一个js线程,可以用这个线程执行复杂的数据操作,然后把操作结果通过postMessage传递给主线程,这样在进行复杂且耗时的操作时就不会阻塞主线程了。

5cookie,sessionStorage,localeStorage的区别

cookie是存储在浏览器端,并且随浏览器的请求一起发送到服务器端的,它有一定的过期时间,到了过期时间自动会消失。sessionStorage和localeStorage也是存储在客户端的,同属于web Storage,比cookie的存储大小要大有8m,cookie只有4kb,localeStorage是持久化的存储在客户端,如果用户不手动清除的话,不会自动消失,会一直存在,sessionStorage也是存储在客户端,但是它的存活时间是在一个回话期间,只要浏览器的回话关闭了就会自动消失。

6、多个页面之间如何进行通信

使用cookie,使用web worker,使用localeStorage和sessionStorage

7、浏览器的渲染过程

(1)、首先获取html,然后构建dom树

  • (2)、其次根据css构建render树,render树中不包含定位和几何信息*

(3)、最后构建布局数,布局是含有元素的定位和几何信息

8、重构、回流

浏览器的重构指的是改变每个元素外观时所触发的浏览器行为,比如颜色,背景等样式发生了改变而进行的重新构造新外观的过程。重构不会引发页面的重新布局,不一定伴随着回流,

回流指的是浏览器为了重新渲染页面的需要而进行的重新计算元素的几何大小和位置的,他的开销是非常大的,回流可以理解为渲染树需要重新进行计算,一般最好触发元素的重构,避免元素的回流;比如通过通过添加类来添加css样式,而不是直接在DOM上设置,当需要操作某一块元素时候,最好使其脱离文档流,这样就不会引起回流了,比如设置position:absolute或者fixed,或者display:none,等操作结束后在显示。

9、浏览器的垃圾回收机制

垃圾收集器必须跟踪哪个变量有用哪个变量没用,对于不再有用的变量打上标记,以备将来收回其占用的内存,内存泄露和浏览器实现的垃圾回收机制息息相关, 而浏览器实现标识无用变量的策略主要有下两个方法:

第一,引用计数法

跟踪记录每个值被引用的次数。当声明一个变量并将引用类型的值赋给该变量时,则这个值的引用次数就是1。如果同一个值又被赋给另一个变量,则该值的引用次 数加1.相反,如果包含对这个值引用的变量又取得另外一个值,则这个值的引用次数减1.当这个值的引用次数变成0时,则说明没有办法访问这个值了,因此就 可以将其占用的内存空间回收回来。

如: var a = {}; //对象{}的引用计数为1
b = a; //对象{}的引用计数为 1+1
a = null; //对象{}的引用计数为2-1
所以这时对象{}不会被回收;

IE 6, 7 对DOM对象进行引用计数回收, 这样简单的垃圾回收机制,非常容易出现循环引用问题导致内存不能被回收, 进行导致内存泄露等问题,一般不用引用计数法。

第二,标记清除法

到2008年为止,IE,Firefox,Opera,Chrome和Safari的javascript实现使用的都是标记清除式的垃圾收集策略(或类似的策略),只不过垃圾收集的时间间隔互有不同。

标记清除的算法分为两个阶段,标记(mark)和清除(sweep). 第一阶段从引用根节点开始标记所有被引用的对象,第二阶段遍历整个堆,把未标记的对象清除

10、优化下面代码

var str="我喜欢我可爱的女朋友,";
str=str+"她叫喵喵,";
str=str+"她时而可爱,时而认真,";
str=str+"她那天真的笑声可以让人忘掉一切烦恼。";
console.log(str);

这里的优化主要是对加号操作符的优化,因为加号在JavaScript中非常耗时和耗内存,需要经过以下六步:

1、首先开辟一块临时空间,存储字符串,
2、然后在开辟一块空间
3、把str中的字符串复制到刚刚开辟的空间
4、在把需要连接的字符串复制到str后面
5、str指向这块空间
6、回收str原来的空间和临时空间

优化的方法是使用数组的push方法,数组是连续的存储空间,可以省下很多步

var res=[];
var str="我喜欢我可爱的女朋友,";
res.push(str);
res.push("她叫喵喵,");
res.push("她时而可爱,时而认真,");
res.push("她那天真的笑声可以让人忘掉一切烦恼。");
console.log(res.join(""));

11、优雅降级和渐进增强

优雅降级指的是一开始就构建功能完好的网站,然后在慢慢兼容低版本的浏览器,使得各个浏览器之间的差异不要太大。

渐进增强是指在基本功能得到满足的情况下,对支持新特性的浏览器使用新特性,带给用户更换的体验。

优雅降级和渐进增强的出发点不同,前者是慢慢向下兼容,是向后看,后着是慢慢向上,增强功能,是向前看。

mode_edit