HTML标签常用标签介绍 a 标签属性href / target / download / rel=noopener 1<a href="" target="" download="" rel=""></a> 作用跳转外部页面跳转内部锚点跳转到邮箱或电话等

CSS 定位布局和定位的区别：布局是屏幕平面上的，定位是垂直于屏幕的 123/* 浮动的元素不会压住下面标准流的内容*//* 绝对定位和固定定位会完全压住盒子内的内容 *//* 浮动最初是为了做文字环绕效果的 */ DIV的分层：Z轴视角从上到下分别为内联元素 > 浮动元素 > 块级子元素 > border > background内联元素与浮动等内联元素的覆盖是具有层

CSS 动画定义由许多静止的画面帧组成以一定的速度连续播放而产生的动画效果 概念帧：每个静止的画面都叫做帧播放速度：每秒24帧（电影）。每秒60帧（游戏） 浏览器渲染过程步骤根据 HTML 构建 HTML 树 （DOM）根据 CSS 构建 CSS 树 （CSSOM）将两棵树合并成一颗渲染树 （render tree）Layout 布局 （文档流、盒模型、计算大小和位置）Paint 绘制 （把边框颜

HTTP 缓存

WWW浅析URL 统一资源定位符协议 + 域名或 IP +端口号 + 路径 + 查询字符串 + 锚点Internet Protocal 网络协议如何定位一台设备**只要在互联网中，就至少有一个独特的 IP ** 如何获取外网 IP从网络运营商处租用带宽只要路由器连上运营商的服务器，那么路由器就会有一个外网IP，比如14.48.44.209 就是一个外网IP，这就你在互联网中的地址如果重启路由器，

Web WorkerWeb Worker 是 HTML5 中的概念，它有两种类型，一种是专用线程 （ Dedicated Web Worker ），另一种是共享线程 （ Shared Web Worker ） 用途Web Worker 主要用于将一些耗时的数据处理操作从主线程剥离，从而使主线程专注于页面的渲染与逻辑交互比如 懒加载，文本分析，流媒体数据处理，canvas 图形绘制，图像处理 注意有

Fetch 功能优势 Service Worker 环境里也能用，相比 xhr 只能运行在渲染进程内 同源请求也可以自定义不带 cookie，某些服务不需要 cookie 场景下能少些流量 可自定义重定向场景，xhr 只能 follow 自由度更高的 cache 配置 可自定义 referrer

service worker类似浏览器与服务器之间的代理，基于 web worker 创建离线体验，可以拦截全站的请求，并做出反应类似副作用函数，对请求进行拦截判断，是否使用缓存等操作，可以访问 cache 和 indexDB，支持推送，可以由开发者自己控制管理缓存的内容和版本，前提需要浏览器支持

浏览器渲染过程 请求服务器得到 html 文件，将字节转换为字符，再将字符 Token 化 （符号/标签），之后把 token 转化为节点对象，之后把这些节点对象连接在一起形成 DOM 树 遇到 link 标签向服务器发送请求得到 CSS 文件,后面步骤类似第一步，最终结合会 CSSOM 树 匹配 DOM 和 CSSOM 的节点结合成 render 树，render 树存储的是页面上

浏览器输入 URL 会发生什么步骤 用户输入 敲下回车，浏览器处理输入信息（不确定是关键字还是 url），开始导航，并且和网络进程通信 在本地检查是否有缓存资源，有则返回给浏览器，没有则开始网络请求流程 首先会进行 DNS 解析，获取到服务器的 IP 地址后，随后跟服务器进行一个 TCP 连接，这个时候浏览器就会构建请求行、请求头、cookie 数据，然后把这些数据发送给服务器，服务器收到请求后就