js 进阶问题

1、html渲染过程

参考回答: 浏览器渲染页面是一个从上至下的过程,当拿到html以后首先会生成dom树,加载解析css构建cssom树,解析css的时候不会阻塞进程,我们通常会把首屏样式放到head里面,然后加载执行js,在js里面可能会有动态创建修改dom的逻辑,浏览器为了优化整个渲染过程,会在解析到js的时候阻塞整个进程,我们通常把js放到body后面来优化首屏的加载速度,当dom以及cssom都构建完成后会生成渲染树,再根据渲染树将dom树上的节点布局到屏幕上的正确位置,最后遍历绘制的所有节点,为其添加对应的样式
延伸理解
重绘:改变dom的外观属性,如背景色,outline等
重排: 改变dom的结构,几何属性等
为了减少浏览器的重排重绘,我们应该将多次改变样式的操作合并成一次操作

2、HTTPS和HTTP的区别及优缺点

参考回答:
1.http是超文本传输协议,信息是明文传输, https是具有安全性的ssl加密传输协议
2.两者采用完全不同的连接方式,http连接是无状态的, https是由ssl+http协议构建的可进行加密传输,身份认证的网络协议
3.两者用的端口也不一样,前者80后者443
4.https 需要证书
优点
https在seo以及安全性方面要高于http
缺点
https加载时间较长,证书收费

3、js中this

参考回答:
js中this的指向总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的, 而非函数被声明时的环境
具体到实际应用中,this 的指向大致可以分为以下几种
*作为对象的方法调用指向当前对象
*作为普通函数调用指向全局window
*构造函数调用指向返回的对象
*call,apply 调用指向其第一个参数

4、怎么理解js中是原型链? 如何实现继承?

参考回答:
每个构造函数都有一个原型对象
每个原型对象都包含一个指向构造函数的指针
每个实例都包含一个指向原型对象的指针
查找方式是一层层向上查找直至顶层Object.prototype
实现继承的方式常用的有:
原型链继承
借用构造函数(call,apply)
组合继承(原型链+构造函数)
原型式继承
寄生式组合式继承
延伸理解:
优缺点?
每一种继承的方式都有自己的优缺点
组合继承的特点是会调用构造函数两次,
都是将多种继承方式组合到一起相辅相成.
new 运算符具体干了什么?
创建一个空的对象
将空的对象的__proto__成员指向构造函数的prototype成员对象
调用构造函数将this指向前面创建的对象

5、怎么理解js中的内存泄漏?

参考回答:
内存泄漏的定义为当程序不再需要的内存,由于某种原因其不会返回到操作系统或可用内存池,内存泄漏会导致一系列问题,比如: 运行缓慢,崩溃,高延迟等
js中常见的内存泄露:
意外的全局变量
遗忘的计时器或回调函数
脱离文档的DOM引用
闭包

6、如何理解浏览器的跨域问题?常用的解决方式有哪些?

参考回答:
浏览器的同源策略会导致跨域,这里同源策略又分为以下两种 :
DOM同源策略:禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况,不同域名的iframe是限制互相访问的。
XmlHttpRequest同源策略:禁止使用XHR对象向不同源的服务器地址发起HTTP请求。只要协议、域名、端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操作
注:协议、域名、端口有任何一个不同,都视为不同的域
常用的解决方式:
1.CORS(Cross-origin resource sharing) 跨域资源共享
注: 这种方式如果想要携带cookie需要xhr设置withCredentials为true, 服务端 Access-Control-Allow-Credentials:true
2.jsonp实现跨域(动态创建script,利用src属性进行跨域)
3.服务器代理(浏览器有跨域限制,服务端没有)
4.document.domain
5.window.name
6.hash传值
7.possMessage

7、函数防抖,函数节流的基本概念以及工作中实际使用到的场景?实现的思路是?

参考回答:
函数防抖(debounce)
基本概念: 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
举例理解: 我们用手指一直按住一个弹簧,它将不会马上弹起直到你松手为止
使用场景:
按钮重复点击
输入框连续输入
判断scroll是否滑到底部
简单实现:

const debounce = (fn,delay) => {
    let timer = null
    return () => {
        let ctx = this, args = arguments
        clearTimeout(timer)
        timer = setTimeout( ()=> {
          fn.apply(ctx,args)
        }, delay)
    }
}

函数节流(throttle)
基本概念: 在规定的时间范围内相同的操作触发多次只执行一次
DOM拖拽
Canvas画笔
窗口resize
简单实现:

const throttle = (fn,gapTime = 100) => {
    let timer = null
    let start_time = new Date().getTime()
    return () => {
        let ctx = this, args = arguments,
        current_time = new Date().getTime()
        clearTimeout(timer)
        if(curr_time - start_time >= gapTime()){
          fn.apply(ctx,args)
          start_time = current_time
        }else{
          timer = setTimeout( ()=> {
          fn.apply(ctx,args)
          }, gapTime)
        }
    }
}
8、js中的eventloop机制?

参考回答:
首先javascript是单线程机制,就是指当我们在执行一个任务的时候,其它的事情都得等待他执行完毕
在js中所有任务分为两种, 同步任务及异步任务
执行栈执行主线程任务,当有操作dom,ajax交互,使用定时器异步操作的时候,这些任务会被移入到 callback queue 任务队列中 当主线程任务执行完毕为空时,会读取callback queue队列中的函数,进入主线程执行 上述过程会不断重复,也就是常说的Event Loop(事件循环)
在一个事件循环中,异步任务返回结果后会被扔进一个任务列队中,根据异步事件上的类型,这个事件会被放到对应的宏任务或者微任务列队中去, 当执行栈为空的时候,主线程会先查看微任务中的事件列队,如果微任务不是空先依次执行微任务,如果是空的再去宏任务列队中取出一个事件并把对应的回调加入到当前执行栈,如此反复,进入循环
下面用一道题来加深印象

setTimeout(function () {
    console.log(1);
});
new Promise( (resolve,reject) => {
    console.log(2)
}).then( (val) => {
    console.log(val);
})
输出的结果是2,1
9、web安全攻击手段有哪些?以及如何防范

常见的有xss, csrf, sql注入
xss(cross site scripting) 跨站脚本攻击
定义: 指攻击者在网页嵌入脚本,用户浏览网页触发恶意脚本执行
XSS攻击分为3类:存储型(持久型)、反射型(非持久型)、基于DOM
如何防范:
设置HttpOnly以避免cookie劫持的危险
过滤,对诸如

你可能感兴趣的:(js)