前端之神:浏览器

·  阅读 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'));

}, [])

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改