前端之神：浏览器

wurong

2021年06月28日 17:07 · 阅读 269

浏览器内核：

chrome safari: webkit

Firefox浏览器，使用Gecko浏览器内核；

Opera浏览器，目前使用的是Blink浏览器内核

前端安全

xss 跨站脚本攻击

csrf 跨站身份伪装

ccsf

cookie安全

set-cookie: a=name;secure;httponly
复制代码

csp content-securety-policy

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';"/>

Http Response:  Content-Security-Policy: default-src 'self';
复制代码

指令说明

base-url 文档的基准URL

default-src

child-src connect-src font-src：控制字体文件来源

img-src：控制图片来源

media-src：控制video和audio标签里的资源来源

object-src：控制、、标签里资源的来源

script-src：控制JavaScript的有效来源

style-src：控制css的有效来源

plugin-types 控制、、插件资源的来源

reflected-xss 控制浏览器对于反射型xss的策略

report-url 用于接收浏览器发送违反CSP页面的报告地址

sandbox 控制是否控制阻止弹窗，插件，脚本执行等

浏览器前端缓存

cookie 存储少量信息 domain

sessionStorage 页面关闭会清空

localStorage 页面关闭也不会删除

.setItem

.getItem

.removeItem

.clear

浏览器事件机制

事件触发

Event

var click=new Event('click',{
    cancelable: true, //是否可以禁止浏览器默认事件    preventdefault()
    bubbles:   //是否冒泡，默认不冒泡
})
document.dispatchEvent(click);
复制代码

addEventListener第三个参数

{
capture:  是否在捕获阶段触发  默认为false
once:        是否是单次触发事件
possive:    是否允许禁止冒泡
}
复制代码

对事件触发过程的操作

cancelable   e.preventDefault()是否能够生效
cancelBubble  e.stopPropgation()是否能够生效
复制代码

duis对事件触发对象的

currentTarget   当前绑定元素
target  触发元素
复制代码

Js: BOM （Browser Object Model）

window对象

定时器

requestAnimationFrame（和浏览器的绘制帧率一致，操作很多动效样式）

setImmediate setTimeout setInterval

弹出新浏览器窗口的功能 window.open(url [, target])

移动、缩放和关闭浏览器窗口的功能

窗口滚动事件 scroll

提供浏览器详细信息的 navigator 对象 navigator

提供浏览器所加载页面的详细信息的 location 对象

提供用户显示器分辨率详细信息的 screen 对象

像 XMLHttpRequest 和 IE 的 ActiveXObject 这样的自定义对象

对 cookies 的支持

窗口路由信息 history

弹窗 alert confirm

window.performance

memory: js内存使用情况
navigation：当前页面 重定向、如何点击过来的
timing：url从输入到页面加载的过程
unload  redirect (fetchstart)appcache (connectStack secure-connectstart)tcp dns request response dom load
复制代码

postmessage

sessionStorage

localStorage

queueMicrotask?

Observable?

IntersectionObserver

useEffect(() => {

console.log();

let observer = new IntersectionObserver((item) => { if (item[0].intersectionRatio === 1) { console.log('进入区域内！！！') } }, options);

document.getElementById('id1') && observer.observe(document.getElementById('id1'));

}, [])