1. 浏览器提供的符合W3C标准的DOM操作API、浏览器差异、兼容性
- web API：浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。
- DOM文档对象模型，是W3C组织推荐的处理可扩展标志语言的标准编程接口。
- 获取元素：getElementById getElementByTagName getElementByName getElementByClassName querySelector
- 创建元素：write() createElement() createAttribute() createCommment()
- 修改元素：appendChild() insertBefore() removeChild() replaceChild()
DOM解析中浏览器的差异 - 一个重要的差异就是，处理空白和换行的方式。Internet Explorer 将不会把空的空白或换行作为文本节点，而其他浏览器会。
2.浏览器提供的浏览器对象模型 (BOM)提供的所有全局API、浏览器差异、兼容性
-
BOM是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
-
我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，比如：刷新浏览器、后退、前进、在浏览器中输入URL等。
-
对话框：alert() prompt() confirm()
-
页面加载事件：onload、onunload
-
定时器：setTimeout() cleatTimeout() setInterval() clearInterval()
-
location对象：location对象是window对象下的一个属性，可以获取或设置浏览器地址栏的URL
-
history对象：back()、forward() go()
-
navigator对象：userAgent可以判断用户浏览器类型 platform可以判断浏览器所在的系统平台类型
3.大量DOM操作、海量数据的性能优化(合并操作、Diff、requestAnimationFrame等)
-
大量DOM操作解决方案：
-
减少DOM操作次数DocumentFragment，缩短循环时间使用分治思想分批次插入，采用requestAnimationFrame
-
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
4.浏览器海量数据存储、操作性能优化
一般是 localStorage 配合 IndexDB 使用
浏览器缓存
5.DOM事件流的具体实现机制、不同浏览器的差异、事件代理
- 冒泡
- 捕获
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间，事件流描述的是从页面中接收顺序的顺序。
IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。
[注意]IE9、Firefox、Chrome、Safari等现代浏览器都支持事件捕获，但是从window对象开始捕获。之前的从document开始。
6.前端发起网络请求的几种方式及其底层实现、可以手写原生ajax、fetch、可以熟练使用第三方库
1、link标签的href属性 2、script标签的src属性 3、img标签的src属性 4、ajax发送请求 5、表单提交发送请求
6、a标签的href发送请求 7、iframe的src属性发送请求 8、fetch --ajax的替代者 9、axios、request等众多开源库
var xhr = new XMLHttpRequest();
xhr.open('post', 'www.xxx.com', true);
// 接受返回值
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
console.log(xhr.responseText);
}
}
}
// 处理请求参数
postData = {"name1":"value1","name2":"value2"};
postData = (function(valuse){
for(var key in value){
oStr += `${key}=${key[key]}&`
}
return oStr;
})
// 设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 异常处理
xhr.onerror = function() {
console.log('Network request failed');
}
// 跨域携带cookie
xhr.withCredentials = true;
// 发出请求
xhr.send(postData);
7.浏览器的同源策略，如何避免同源策略，几种方式的异同点以及如何选型
请求存在跨域问题，浏览器的同源策略研制了从同以源加载的文档或者脚本如何与另外一个源的资源进行交互，这是一个用于隔离潜在恶意文件的重要安全机制。通常不允许不同源间的读操作。
跨域条件：协议，域名，端口，有一个不同就算跨域。
实现跨域的方式：
1.使用nginx反向代理实现跨域。
2.CORS：
跨域资源共享，服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源
3.jsonp：
优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持 get 方法具有局限性,不安全可能会遭受 XSS 攻击。
4.WebSocket
5.postMessage跨域：
适用于同浏览器多窗口间跨域通信、iframe间跨域通信
6.Node中间件处理
8.浏览器提供的几种存储机制、优缺点、开发中正确的选择
cookie：
- 存储在用户本地终端上的数据。cookie默认情况下的有效期是很短暂的，一旦用户关闭浏览器，cookie保存的数据就会丢失
- 每个cookie保存的数据不能超过4KB。
- cookie的优点：能用于和服务器端通信；当cookie快要过期时，可以重新设置而不是删除。
- cookie的缺点：它会随着http头信息一起发送，增加了网络流量（文档传输的负载）；它只能储存少量的数据；它只能储存字符串；有潜在的安全问题。
localStorage
- HTML5中新加入了一个localStorage特性，解决了cookie存储空间不足的问题，localStorage中一般浏览器支持的是5M大小。
- localStorage的优点：localStorage会可以将第一次请求的数据直接存储到本地；存储的数据没有时间限制。
- localStorage的缺点：
- 1.在IE8以上的IE版本才支持localStorage这个属性；
- 2.目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
- 3.localStorage在浏览器的隐私模式下面是不可读取的；
- 4.localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡；
- 5.localStorage不能被爬虫抓取到。
SessionStorage
- sessionStorage与localStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对就会被清空。
UserData、GlobalStorage、Google Gear
- 这三种的使用都有一定的局限性，例如userData是IE浏览器专属，它的容量可以达到640K，这种方案可靠，不需要安装额外插件，只不过它仅在IE下有效~
- globalStorage适用于Firefox 2+的浏览器，类似于IE的userData
- google gear是谷歌开发出的一种本地存储技术，需要安装Gear组件。
- Flash ShareObject
这种方式能能解决上面提到的cookie存储的两个弊端，而且能够跨浏览器，应该说是目前最好的本地存储方案。不过，需要在页面中插入一个Flash，当浏览器没有安装Flash控件时就不能用了。
indexDB
进行大数据的存储，通常50m, 目前应用场景都不多，放太多东西在本地会造成数据的泄露；
token
- 比如说， 小F已经登录了系统， 我给他发一个令牌(token)， 里边包含了小F的 user id， 下一次小F 再次通过Http 请求访问我的时候， 把这个token 通过Http header 带过来不就可以了。
- 不过这和session id没有本质区别啊， 任何人都可以可以伪造， 所以我得想点儿办法， 让别人伪造不了。
- 那就对数据做一个签名吧， 比如说我用HMAC-SHA256 算法，加上一个只有我才知道的密钥， 对数据做一个签名， 把这个签名和数据一起作为token ， 由于密钥别人不知道， 就无法伪造token了。
- 这个token 我不保存， 当小F把这个token 给我发过来的时候，我再用同样的HMAC-SHA256 算法和同样的密钥，对数据再计算一次签名， 和token 中的签名做个比较， 如果相同， 我就知道小F已经登录过了，并且可以直接取到小F的user id , 如果不相同， 数据部分肯定被人篡改过， 我就告诉发送者：对不起，没有认证。
- Token 中的数据是明文保存的（虽然我会用Base64做下编码， 但那不是加密）， 还是可以被别人看到的， 所以我不能在其中保存像密码这样的敏感信息。
- 当然， 如果一个人的token 被别人偷走了， 那我也没办法， 我也会认为小偷就是合法用户， 这其实和一个人的session id 被别人偷走是一样的。
- 这样一来， 我就不保存session id 了， 我只是生成token , 然后验证token ， 我用我的CPU计算时间获取了我的session 存储空间 ！
- 解除了session id这个负担， 可以说是无事一身轻， 我的机器集群现在可以轻松地做水平扩展， 用户访问量增大， 直接加机器就行。这种无状态的感觉实在是太好了！
session 的会话方式可以分为两种cookie和token来实现
- cookie 需要客户端与服务端都要存储
- token 只需要客户端存储
9.浏览器跨标签通信
方法一：使用localStorage
方法二：使用cookie + serInterval
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
