For面试 临阵磨枪(前端 )

自我介绍  【项目】!@@!!

1 浏览器渲染过程 

浏览器的渲染过程主要包括以下几步:

  1. 解析HTML生成DOM树。
  2. 解析CSS生成CSSOM规则树。
  3. 将DOM树与CSSOM规则树合并在一起生成渲染树。
  4. 遍历渲染树开始布局,计算每个节点的位置大小信息。
  5. 将渲染树每个节点绘制到屏幕。

渲染阻塞

当浏览器遇到一个 script 标记时,DOM 构建将暂停,直至脚本完成执行,然后继续构建DOM。

CSS 优先   JS置后:

当解析html的时候,会把新来的元素插入dom树里面,同时去查找css,然后把对应的样式规则应用到元素上,查找样式表是按照从右到左的顺序去匹配的。

构建渲染树

浏览器会先从DOM树的根节点开始遍历每个可见节点。对每个可见节点,找到其适配的CSS样式规则并应用。

渲染树构建完成后,每个节点都是可见节点并且都含有其内容和对应规则的样式。这也是渲染树与DOM树的最大区别所在。渲染树是用于显示,那些不可见的元素当然就不会在这棵树中出现了

【重排与重绘]
重绘比如说颜色变了 不太影响整体布局的
重排 尺寸变了  布局 窗口尺寸 重新验证计算渲染书  [  比较严重 ]

2  闭包

1  上下文 内部对象(AO 对象 函数作用域)   保存这个函数中所有的变量值和该函数内部定义的函数的引用。函数每次执行时对应的执行上下文都是独一无二的,正常情况下函数执行完毕执行上下文就会被销毁。 active  object 
【变量值 + 函数 】
2 作用域链 初始值为引用着上一层作用域链里面所有的作用域,后面执行的时候还会将 AO 对象添加进去 。作用域链就是执行上下文对象的集合,这个集合是链条状的。
闭包的创造函数必定包含两部分:
    一些闭包函数执行时依赖的变量,每次执行闭包函数时都能访问和修改
    返回的函数,这个函数中必定使用到上面所说的那些变量
var counterA = counterCreator();
它其实是把闭包函数赋值给了一个变量,这个变量是一个活对象,这活对象引用了闭包函数,闭包函数又引用了 AO 对象,所以这个时候 AO 对象也是一个活对象。此时闭包函数的作用域链得以保存,不会被垃圾回收机制所回收。
参考垃圾回收机制
作用域链保存了下来, AO 对象 被回收了
活对象 引用 没有被回收。
简单介绍
// 生成闭包的函数
function counterCreator() {
 
    // 被返回函数所依赖的变量
    var index = 1;
 
    // 被返回的函数
     function counter() {
        return index ++;
    }
    return counter;
}
 
// 被赋值为闭包函数
var counterA = counterCreator();
 
// 使用
counterA();
 

3 阻塞并行 

阻塞更倾向于线程/进程的状态,是否正在运行,
同步异步更像是,拿到消息的方式,期间可以运行也可以不运行。
(创建, 就绪, 运行 阻塞 终止
线程阻塞,发生死锁。线程执行完销毁。
【同步异步】
同步调用的时候,线程不一定阻塞,调用虽然没返回,但它还是在运行状态中的,CPU很可能还在执行这段代码,而阻塞的话,它就肯定不在CPU中跑这个代码了。
异步是说调用的时候结果不会马上返回,线程可能被阻塞起来,也可能不阻塞,两者没关系。非阻塞是说调用的时候,线程肯定不会进入阻塞状态。
异步小例子、
// func() 执行后,还没得出结果就立即返回,然后执行 next() 了
// 等到结果出来,func() 回调 callback() 通知调用者结果。
【组合】
    同步阻塞调用:得不到结果不返回,线程进入阻塞态等待
    同步非阻塞调用:得不到结果不返回,线程不阻塞一直在CPU运行。
    异步阻塞调用:去到别的线程,让别的线程阻塞起来等待结果,自己不阻塞。
    异步非阻塞调用:去到别的线程,别的线程一直在运行,直到得出结果。
[并发 并行 ]
并行是多个程序在多个CPU上同时运行,任意一个时刻可以有很多个程序同时运行,互不干扰。
并发是多个程序在一个CPU上运行,CPU在多个程序之间快速切换,微观上不是同时运行,任意一个时刻只有一个程序在运行,但宏观上看起来就像多个程序同时运行一样,因为CPU切换速度非常快,时间片是64ms(每64ms切换一次,不同的操作系统有不同的时间),人类的反应速度是100ms,你还没反应过来,CPU已经切换了好几个程序了。
举个例子吧,并行就是,多个人,有人在扫地,有人在做饭,有人在洗衣服,扫地,做饭,洗衣服都是同时进行的。
并发就是,有一个人,这个人一会儿扫地,一会儿做饭,一会儿洗衣服,他在这3件事中来回做,同一时刻只做一件事,不是同时做的,但最后3件事都可以做完。
( 时间片上不同 ) 

4 异步编程 

js是单线程的,只能采取单线程非阻塞方式。参考 https://zhuanlan.zhihu.com/p/66593213
执行setTimeout函数。由于它是一个异步操作,所以它会被分为两部分来执行,先调用setTimeout方法,然后把要执行的函数放到一个队列中。代码继续往下执行,当把所有的代码都执行完后,放到队列中的函数才会被执行。这样,所有异步执行的函数都不会阻塞其他代码的执行。
JS的单线程并不是指整个JS引擎只有1个线程。它是指运行代码只有1个线程,但是它还有其他线程来执行其他任务。比如时间函数的计时、AJAX技术中的和后台交互等操作。所以,实际情况应该是:JS引擎中执行代码的线程开始运行代码,当执行到异步方法时,把异步的回调方法放入到队列中,然后由专门计时的线程开始计时。代码线程继续运行。如果计时的时间已到,那么它会通知代码线程来执行队列中对应的回调函数。当然,前提是代码线程已经把同步代码执行完后。否则需要继续等待,就像这个例子中一样。
如果之前同步代码阻塞了那后面是不能执行的。(死循环 这时放到最后的settimeout也没了0 0

回调函数

js中  函数是一等公民,它和其他数据类型一样,可以作为参数传递也可以作为返回值返回
就像前面等待五秒输出,先执行异步方法(好了你要这样, 我知道了)再后面执行回调函数(五秒之约已到,可以输出了)
例子:我想打印4句话,但是每句话都在前一句话的基础上延迟2秒输出。
如果输出的内容越来越多,嵌套的代码也会增多。俗称“回调地狱”

使用promise 

https://zhuanlan.zhihu.com/p/66593213 这个写的很好。参考 但是没看完。。。

promise: 直接看阮一峰的,前两章就可以很详细 https://es6.ruanyifeng.com/#docs/promise
闭包  http://www.alloyteam.com/2019/07/closure/#prettyPhoto
 
 
const promise = new Promise(function(resolve, reject) {
  // ... some code
 
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。
 
resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
【函数是参数~~~  当做结果 传递。。函数可以传入, 也可以作为参数。】
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
Promise 新建后立即执行,然后,then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行,所以resolved最后输出。
【完成是完成了 不过排队后面去了】
继续看下一个: 
(1) p2的resolve方法将p1作为参数,即一个异步操作的结果是返回另一个异步操作。
(2)调用resolve或reject并不会终结 Promise 的参数函数的执行。
同理,其他的写后面但是需要定时,也问题不大(比如onload的时候才执行resolve),因为。。立即 resolved 的 Promise 是在本轮事件循环的末尾执行,总是晚于本轮循环的同步任务。
但如果写的是return resolve 那就没了
一般来说,调用resolve或reject以后,Promise 的使命就完成了,后继操作应该放到then方法里面,而不应该直接写在resolve或reject的后面。所以,最好在它们前面加上return语句,这样就不会有意外。(仅此而已)
再稍微看一下then
 
有关刷题
返回 数组返回两个的时候  记得是[i,j]  如果是括号会被吞了 
1/ 哈希表
js中的map  用来保存键 值 对
(1) get, 直接找key, 返回的当然 是value 
(2) has,有 没有 返回布尔
(3) set 添加key+ value (两个QuQ) 
但是什么吧, 可以用map来模拟哈希表,直接比如说把存的当做是map的id。
map用法.
let nums=[1,2,3,4,9];
        let target=13;
        function twoSum(nums, target) {
            //
            let map= new Map();
            for(let i=0;i<nums.length;i++){
                //当前:  nums[i]
                // 如果当前的has 布尔 有
                if(map.has(target-nums[i])){
                    console.log('看看',map.get(target-nums[i]));
                    return([map.get(target-nums[i]),i]);
                    //先给一个id,然后再给我当今的id
                }//没有 创建
                else{
                    map.set(nums[i],i);// 
                }
            }
        };
        console.log(twoSum(nums,target));
2/  7 easy 整数反转 
没啥不同,只是注意 给的是int的话要直接toSrting, 不能直接当做string处理呀
str.substr  substring 返回子串   从什么长度开始子串
3/  35 搜索插入位置
js使用二分查找... 
再稍微等一下,就复习下 选择题,做一点选择题
slice 返回新数组。
splice 老数组
a.pop()
arr.join()
 
 
 
 
============= 有点垂头丧气的时候  
安娜苏- 许愿精灵
太寻常的瓜果,中后还是沐浴露味道。,
4711真好啊(痴汉脸
 
1.CORS
CORS(Corss-Origin Resource Sharing,跨资源共享),基本思想是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应的成功或失败。即给请求附加一个额外的Origin头部,其中包含请求页面的源信息(协议、域名和端口),以便服务器根据这个头部决定是否给予响应。
2.document.domain
将页面的document.domain设置为相同的值,页面间可以互相访问对方的JavaScript对象。
注意:
不能将值设置为URL中不包含的域;
松散的域名不能再设置为紧绷的域名。
3.图像Ping
var img=new Image();
img.onload=img.onerror=function(){
... ...
}
img.src="url?name=value";
请求数据通过查询字符串的形式发送,响应可以是任意内容,通常是像素图或204响应。
图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。
缺点:
只能发送GET请求;
无法访问服务器的响应文本,只能用于浏览器与服务器间的单向通信。
4.Jsonp
var script=document.createElement("script");
script.src="url?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);
JSONP由两部分组成:回调函数和数据
回调函数是接收到响应时应该在页面中调用的函数,其名字一般在请求中指定。
数据是传入回调函数中的JSON数据。
优点:
能够直接访问响应文本,可用于浏览器与服务器间的双向通信。
缺点:
JSONP从其他域中加载代码执行,其他域可能不安全;
难以确定JSONP请求是否失败。
5.Comet
Comet可实现服务器向浏览器推送数据。
Comet是实现方式:长轮询和流
短轮询即浏览器定时向服务器发送请求,看有没有数据更新。
长轮询即浏览器向服务器发送一个请求,然后服务器一直保持连接打开,直到有数据可发送。发送完数据后,浏览器关闭连接,随即又向服务器发起一个新请求。其优点是所有浏览器都支持,使用XHR对象和setTimeout()即可实现。
流即浏览器向服务器发送一个请求,而服务器保持连接打开,然后周期性地向浏览器发送数据,页面的整个生命周期内只使用一个HTTP连接。
6.WebSocket
WebSocket可在一个单独的持久连接上提供全双工、双向通信。
WebSocket使用自定义协议,未加密的连接时ws://;加密的链接是wss://。
var webSocket=new WebSocket("ws://");
webSocket.send(message);
webSocket.onmessage=function(event){
var data=event.data;
... ....
}
注意:
必须给WebSocket构造函数传入绝对URL;
WebSocket可以打开任何站点的连接,是否会与某个域中的页面通信,完全取决于服务器;
WebSocket只能发送纯文本数据,对于复杂的数据结构,在发送之前必须进行序列化JSON.stringify(message))。
优点:
在客户端和服务器之间发送非常少的数据,减少字节开销。
 
 
阻止默认事件:
e.preventDefault()
e.returnValue = false  (IE)
阻止冒泡:
e.stopPropagation()
e.cancelBubble = true (IE)
 
1 有关js 等同
一般使用双等来判断(==),如果还需要类型相同那么就用三等(===)。
说一下这两个的区别:
== equality 等同,=== identity 恒等。
==, 两边值类型不同的时候,要先进行类型转换,再比较。 
===,不做类型转换,类型不同的一定不等。 
下面分别说明: 
先说 ===,这个比较简单。下面的规则用来判断两个值是否===相等: 
1、如果类型不同,就[不相等] 
2、如果两个都是数值,并且是同一个值,那么[相等]。
3、如果两个都是字符串,每个位置的字符都一样,那么[相等];否则[不相等]。 
4、如果两个值都是true,或者都是false,那么[相等]。 
5、如果两个值都引用同一个对象或函数,那么[相等];否则[不相等]。 
6、如果两个值都是null,或者都是undefined,那么[相等]。 (undefined不等于null! )
再说 ==,根据以下规则: 
1、如果两个值类型相同,进行 === 比较。 
2、如果两个值类型不同,他们可能相等。根据下面规则进行类型转换再比较: 
a、如果一个是null、一个是undefined,那么[相等]。 
b、如果一个是字符串,一个是数值,把字符串转换成数值再进行比较。 
c、如果任一值是 true,把它转换成 1 再比较;如果任一值是 false,把它转换成 0 再比较。 
d、任何其他组合,都[不相等]。
 

2 有关  bind call apply .

bind绑定一个函数, 但不是立即执行的,等待参数传入.(一般后面加括号都是等会立即执行..) 
function partial(fn, str1, str2) {
    function result(str3) {
        return fn.bind(this, str1, str2)(str3);
    }
    return result;
}
总体上说,是拿了别人的方法来自己用.前面是别人的方法名,后面的自己的名。 用call连接...
apply传递数组 call单个参数 
bind返回函数, 不立即执行
先传this,再传自己。
js中的伪数组(例如通过document.getElementsByTagName获取的元素、含有length属性的对象)具有length属性,并且可以通过0、1、2…下标来访问其中的元素,但是没有Array中的push、pop等方法。就可以利用call,apply来转化成真正的数组,就可以使用数组的方法了
 
function fn10() {
    return Array.prototype.slice.call(arguments);
}
console.log(fn10(1,2,3,4,5)); // [1, 2, 3, 4, 5]

case3: 含有length属性的对象

let obj4 = {
	0: 1,
	1: 'thomas',
	2: 13,
	length: 3 // 一定要有length属性
};

console.log(Array.prototype.slice.call(obj4)); // [1, "thomas", 13]
// 用 apply方法
[].push.apply(arr1,arr2);  // 给arr1添加arr2
console.log(arr1); // [1, 2, 3, 4, 5, 6]
console.log(arr2); // 不变
原文地址:https://www.cnblogs.com/lx2331/p/13742411.html