张坤的博客

介绍Vue、React 等前端框架的核心特性就是数据绑定和组件复用。而现在浏览器已经实现了自己的 Web Components API，允许创建可重用的定制元素，并且在 web 应用中使用它们。 接口和 CSS 属性window.customElements返回 CustomElementRegistry 对象的引用，用来注册和查询已注册自定义元素。 customElements.define(name, constructor, options);没有返回值。 name，自定义元素名，自定义元素的名称必须包含连词线，用以区别原生的 HTML 元素。 constructor，自定义元素构造器。 options 可选，控制元素如何定义。目前有一个选项支持： extends 指定继承的已创建的元素。被用于创建自定义元素。 定义在自定义元素的类定义中的生命周期回调函数 connectedCallback：当自定义元素第一次被连接到文档 DOM 时被调用。 disconnectedCallback：当自定义元素与文档 DOM 断开连接时被调用。 adoptedCallback：当自定义 ...

介绍alert、confirm、prompt 对话框不能自定义样式和复杂的内容，所以在开发的过程中，我们一般根据自己自己的需求造轮子或者使用第三方的，现在 HTML 5.2 推出了一个新的原生模态对话框元素 <dialog>。 <dialog> 可以通过 showModal 方法显示和 ::backdrop 伪元素自定义遮罩层（mask）样式。遮罩层是用户触发弹出框后，形成的一个对话框与页面主体的分割图层，它的存在可以给用户一个更明显的视觉差效果，同时也避免在对话框显示时与应用程序的其余部分进行交互。 <dialog> 默认定义了基本的用户代理提供的样式，如自动边距、粗边框样式等，也可以使用 CSS 自定义。 属性和方法HTMLDialogElement.openBoolean，设置或返回对话框是否显示。 HTMLElement.hiddenBoolean，设置或返回元素是否隐藏。 HTMLDialogElement.returnValueDOMString，设置或返回对话框的返回值。 HTMLDialogElement.close([returnV ...

介绍 HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。 HTML5 拥有新的语义、图形以及多媒体元素。 HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。 HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。 迁移 典型的 HTML4 典型的 HTML5 <div id="header"> <header> <div id="menu"> <nav> <div id="content"> <section> <div id="post"> <article> <div id="footer"> <footer> 非语义元素：<div> 和 <span> - 无法提供关于其内容的信息。 语义元素：<form> ...

介绍Cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。也是一个 HTTP 请求标头，其中含有先前由服务器通过 Set-Cookie 响应标头发送或通过 JavaScript 的 document.cookie 方法设置，然后存储到本地的 Cookie。 Set-Cookie 是一个 HTTP 响应标头，被用来由服务器端向浏览器发送 cookie，浏览器可在后续的请求中将其发送回服务器。服务器要发送多个 cookie，则应该在同一响应中发送多个 Set-Cookie 标头。 可以通过在浏览器的隐私设置里面设置为禁用 cookie，来阻止接收发送和本地设置。 Cookie 主要用于以下三个方面： 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息） 个性化设置（如用户自定义设置、主题等） 浏览器行为跟踪（如跟踪分析用户行为等） 形式一系列的名称/值对，形式为 name=value; name2=value2; name3=value3。名称/值对之间用分号和空格（’; ‘） ...

介绍NTFS 支持四种类型的链接：硬链接、符号链接、连接点链接、卷安装点。Windows NT 3.1 及后续版本支持 NTFS 硬链接；Windows 2000 开始支持连接点链接；Windows Vista 开始，符号链接在 NTFS 中可用。 mklinkmklink 是 Windows 下用于创建链接的 cmd 内置命令，存在于 Windows Vista 及以后版本的 Windows 操作系统中。 命令格式 1mklink [[/d] | [/h] | [/j]] <link> <target> 如果不指定 [/D] | [/H] | [/J] 参数，默认为创建文件符号链接。 参数 说明 /d 创建目录符号链接。 /h 创建硬链接而不是符号链接。 /j 创建目录连接点。 <link> 指定要创建的符号链接的名称。 <target> 指定新符号链接引用的路径 (相对或绝对) 。 /? 在命令提示符下显示帮助。 使用 mklin ...

介绍构建渲染树的任何改变都可能导致重绘或回流，例如： 添加、删除、更新 DOM 节点。 使用 display: none（回流和重绘）或 visibility: hidden（仅重绘，因为没有几何形状发生变化）隐藏 DOM 节点。 DOM 节点的移动和动画。 添加样式表或调整样式属性。 用户操作，例如调整窗口大小、更改字体大小或滚动页面。 以前我们可以使用节点的 cloneNode() 方法，在克隆的节点上进行操作，然后再用克隆的节点替换原始节点来优化性能，而现在我们可以使用 DocumentFragment。 DocumentFragment（文档片段），与 document 一样，没有父节点，存储由节点（Node）组成的文档结构。但它不是主 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会对性能产生影响。 因为文档片段存在于内存中，并不在 DOM 树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来 更好的性能。 使用文档片段接口没有特定属性和方法，都继承自其父接口 Node。 最常用的方法是使用 Doc ...

介绍Request Payload 和 Form Data 是浏览器传输给接口的两种格式，这两种方式浏览器是通过 Content-Type 来进行区分的，如果是 application/x-www-form-urlencoded，则为 Form Data 方式，如果是 application/json 或 multipart/form-data，则为 Request Payload 的方式。 开发者工具网络面板Chrome 96 之前，Request Payload 和 Form Data 信息信息出现在报头边栏里。 比如如下使用 ajax 方式的提交 post 请求得到的响应标头（默认：content-type:text/plain;charset=UTF-8）： content-type:multipart/form-data 提交 post 请求得到的响应标头： content-type:application/x-www-form-urlencoded 提交 post 请求得到的响应标头： Chrome 96 开始，当您想查看网络请求中的 Request Payload ...

介绍同源策略是一个重要的安全策略，允许一个网页可以访问具有相同来源（有相同的 URI、主机名和端口号）的另一个网页的数据，但限制与另一个源的资源进行交互，默认阻止跨域获取资源。 CORSCORS（Cross-Origin Resource Sharing，跨域资源共享）是一种基于 HTTP 头的机制，通过新增一组 HTTP 头，来决定网页如何处理跨域请求。即 CORS 给了 web 服务器这样的权限：服务器可以选择是否允许跨域请求访问到它的资源。2006 年 5 月提交了第一个 W3C 工作草案。2009 年 3 月，该草案更名为“跨域资源共享”，并于 2014 年 1 月被接受为 W3C 推荐。 请求标头包括： Access-Control-Request-Headers 用于发起一个预请求，告知服务器正式请求会使用那些 HTTP 头。 Access-Control-Request-Method 用于发起一个预请求，告知服务器正式请求会使用哪一种 HTTP 请求方法。 Origin 指示获取资源的请求是从什么域发起的。 响应标头包括： Access-Control-Allow- ...

介绍easing-function 描述数值变化率的数学函数，可用于 transition-timing-function 属性和 animation-timing-function 属性。这使得可以在动画持续时间内改变动画的速度，还可在颜色渐变中的两种颜色之间进行插值。 语法1234567891011121314/* linear function */linear;/* cubic-bezier functions */cubic-bezier(x1, y1, x2, y2);ease;ease-in;ease-out;ease-in-out;/* step functions */steps(4, end);step-start;step-end; linear：从头到尾以恒定速率进行，相当于 cubic-bezier(0.0, 0.0, 1.0, 1.0)。 cubic-bezier() 函数：定义贝塞尔曲线，由四个点组成。由于这些曲线是连续的，它们通常用于平滑插值的开始和结束，因此有时称为 easing 函数。纵坐标 y1 和 y2 如果超出 [0, 1] 的范围，将产生弹 ...

介绍Web Animations API 可以把 CSS3 实现的 animation 动画由 JS 代码实现。它通过组合两个模型来实现：时序模型（CSS transitions）和动画模型（CSS animations）。 接口 document.getAnimations() 返回当前对文档中的元素有效的 Animation 对象的数组。 Element.getAnimations() 返回正在或即将影响当前元素的 Animation 对象的数组。 Element.animate(keyframes, options) 用于在元素上创建和播放动画，返回创建的 Animation 对象实例。 keyframes 可以为任何css 动画属性 属性名称使用驼峰命名法指定，例如 background-color 变成 backgroundColor，background-position-x 变成 backgroundPositionX。也可以使用简写属性，例如 margin。 两个特殊的 css 属性： float, 必须写成 cssFloat ，因为 float 是 JavaScrip ...