浏览器

  • requestAnimationFrame（callback): 下一次 repaint 前执行，相同时间内高刷新率屏幕执行次数更多。 非当前 tab 或者隐藏的 iframe 暂停执行

  • 注意祖先元素 event.stopPropagation()也会阻止子代元素的事件向上冒泡

  • mouseover 和 mouseout 在父元素和其子元素上都可以触发。鼠标从父元素移动到子元素时会触发父元素的 mouseout，触发子元素的 mouseover 并冒泡到父元素

  • mouseenter 和 mouseleave 只在父元素触发，不受子元素影响，符合直觉

  • 减少 xss 漏洞：使用 document.createTextNode('用户输入内容') 或 textContent 或者 转译特殊字符。React 会帮我们做字符串转义。react 元素的$$typeof 属性是 Symbol 类型，防止用户输入模拟 react 元素

  • 通过 innerHTML 替换的 script、style 不会执行或生效。 append 进去的会执行

  • script async 属性：异步脚本，不阻塞 dom 解析，加载完成就执行

  • script defer 属性： 延迟脚本，不阻塞 dom 解析，在 DOMContentLoaded 事件之前按出现顺序执行

  • storage 最多 5M

  • sessionStorage 只在当前 tab 标签，和通过此 tab 标签打开的 tab 标签有效【window.open 等】。 手动打开的 tab，没有之前的 sessionStorage

  • cookie: 4k 随着请求发送,

宏任务，微任务

  1. 实际比较复杂： https://stackoverflow.com/questions/66978060/is-events-like-click-are-macrotasks

  2. 有宏任务队列和微任务队列

  • script，settimeout，DOM event 是在宏任务队列里，

  • promise.then， queueMicroTask，mutationObservers 在微任务队列里，

  • 执行玩一个宏任务之后，会执行所有微任务，包括在此期间新添加的微任务，执行完所有微任务之前，不会有 UI 渲染

  • DOM event 包括 click， messageChannel 等;

  • 宏任务队列不一定是先进先出。 setTimeout vs messageChannel

cookie

  • 新标准 http ， https 的 cookie 不再共用

cookie 属性

  • Secure：https 请求才可以携带 cookie

  • HttpOnly：js 不能访问这个 cookie

  • Domain: 默认当前 host，不包含子域。手动设置 Domain=mozilla.org，则包含子域

  • Path：/docs

  • SameSite: Lax(新标准默认值)，Strict，None。 Strict：发起请求的站点的域名和 cookie 的域名一致，才携带 cookie。 Lax：即使发起请求的站点的域名和 cookie 的域名不一致，但如果是导航到的站点与 cookie 域名一致，也携带 cookie。这样导航到目标网站可以自动登录等。None 指定浏览器会在同站请求和跨站请求下继续发送 cookie，但仅在安全的上下文中（cookie 设置了 Secure 属性）

跨域

  • https://www.ruanyifeng.com/blog/2016/04/cors.html

  • cors：是一种机制，在不同源（协议，域名，端口）的情况下，通过 http 头，服务器可以告诉浏览器应该允许从这些源加载资源

  • 浏览器将 CORS 请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

  • 简单请求只允许特定的请求方法和请求头

  • 非简单请求自动发预检请求 options

  • 标签上的 cossorigin 属性，告诉元素如何处理跨域请求。如果没有 cossorigin，window.onerror 不能读取 script 报错详细信息，canvas 不能处理 img。除了设置 cossorigin，服务器也要设置相应 http 头，Access-Control-Allow-Origin 等

  • jsonp： 简单的 get 请求不会造成跨域，利用这一点来实现加载跨域服务器上资源的技术，通常可以用来加载 js 并执行回调函数

  • cors: 服务器设置 Access-Control-Allow-Origin 等头 【todo 待完善】

  • 我们为前端和后端服务配置 nginx 转发，这样就不存在跨域

上一页js下一页interview

最后更新于