browser

HTML

February 17, 2023
browser

Web components # custom element # 名字里必须要有 hyphen - Autonomous custom elements – “all-new” elements, extending the abstract HTMLElement class. class MyElement extends HTMLElement { constructor() { super(); // element created } connectedCallback() { // browser calls this method when the element is added to the document // (can be called many times if an element is repeatedly added/removed) } disconnectedCallback() { // browser calls this method when the element is removed from the document // (can be called many times if an element is repeatedly added/removed) } static get observedAttributes() { return [/* array of attribute names to monitor for changes */]; } attributeChangedCallback(name, oldValue, newValue) { // called when one of attributes listed above is modified } adoptedCallback() { // called when the element is moved to a new document // (happens in document. ...

浏览器任务调度

June 29, 2022
browser

requestAnimationFrame # 用于执行动画帧 既不是微任务，也不是宏任务，只是一个回调 优先级比 requestIdleCallback 高 requestAnimationFrame is a tool for us web-devs to hook in this update the rendering1 sub-process, allowing us to draw things only when the rendering will happen, but it also has the side effect of marking the web page as animated, and thus forces browser to execute the full update the rendering steps even though it might not have been needed 在渲染前，执行回调 requestIdleCallback # 注册低优先级的任务 ...

渲染

June 29, 2022
browser

Process Model # 浏览器的多进程模型 进程： Browser Process Controls “chrome” part of the application including address bar, bookmarks, back and forward buttons. Also handles the invisible, privileged parts of a web browser such as network requests and file access. 浏览器 ui 部分，地址栏，书签等；网络请求，文件访问等 Renderer Process 每个 tab 一个 renderer process，控制当前显示的 tab 内的一切 在沙盒中执行，避免安全隐患 GPU Process 处理 GPU 绘制人物 Plugin Process 控制当前页面使用的所有插件，例如 flash Utility Process ...

history

June 29, 2022
browser

API # class History { readonly length readonly state // 当跳转时，允许浏览器自动设置默认滚动恢复的行为 scrollRestoration: 'auto'|'manual' back() {} forward() {} go() {} /** * @param {object} state object 新 entry 的 state 对象，可被序列化，序列化后不超过 640 k * @param {string} title 文档标题，有兼容性问题，可直接设置为空字符串 * @param {string} 新的 entry url，可为相对值，必需跟当前 url 同源，否则会抛异常 * e.g. history.pushState({foo: 'foo'}, 'title', '?page=1') */ pushState() {} replaceState() {} } pushState 后当前页面并不会立马跳转至新的 url，仅当用户交互或 history 的 go/back/forward 方法调用时，页面才会跳转 ...

Cookie

June 22, 2022
network, browser

什么是 cookie # 浏览器管理的一小段特殊字符串, http 协议的一部分，在 RFC 6265 里有说明 设置 Cookie # 服务端通过 http Set-Cookie 响应头 js 通过 document.cookie 设置（非 httpOnly 的） document.cookie # accessor (getter/setter), 访问器属性 写的操作非全量覆盖，仅修改对应的字段，写的时候需要 encodeURIComponent ，(name, value 都要) 读的操作不展示 domain , path 等信息 xhr 跨域 1 # 跨域的 xhr 请求只有带上 withCredentials:true 时，xhr 响应才能写 cookie ，否则会被忽略 fetch 跨域 # 参数带上 credentials: include Cookie 参数 # 例如: document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT; domain=. ...

在浏览器地址栏输入 url 会发生什么

May 28, 2022
browser

浏览器通过 DNS 查询域名对应的 ip 地址 # 检查浏览器 cache 检查操作系统 cache 检查路由 cache 检查 isp cache 如果前面四步都没找到，ISP 的 DNS 服务器会向其他 DNS 服务器请求该域名对应的 ip 地址 浏览器跟该 ip 地址的 server 建立 tcp 连接 # 3 次握手 浏览器向该 ip 地址的 server 发起 http 请求 # server 处理请求并返回 http 响应 # 1**，information 2**，ok 3**, 重定向 4**，客户端错误 5**，服务器错误 渲染 # 构建 dom 树 # js 的加载会阻塞 dom 树的构建, css, images 不会。css 会阻塞页面渲染 ...