console.log

• 最基本最常用，可以用在javascript代码的任何地方，在浏览器的控制台查看打印信息
• console.log支持占位符形式的语法，在复杂输出时，保证模板和数据分离
  • | 字符串 | %s |
    | 整数 | %d或%i |
    | 浮点数 | %f |
    | 对象 | %o或%O |
    | CSS样式 | %c |
  • 打印样式可以用于显示图片，通过background-image方式引入
  • console.log还可以用于打印字符画,eg：https://www.zhihu.com/signin?next=%2F，可以使用字符画在线生成工具，将生成的字符粘贴到console.log()即可。在线工具：mg2txt （http://www.degraeve.com/img2txt.php）
  • console.log打印对象时，若为普通object对象，%o与%O无区别。如果为DOM节点，使用 %o 打印的是DOM节点的内容，包含其子节点。而%O打印的是该DOM节点的对象属性
  • 

console.warn

• 用于在控制台输出警告信息。它的用法和console.log是完全一样的，只是显示的样式不太一样，信息最前面加一个黄色三角，表示警告
• 

Document

静态布局

最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅

• 优点：不存在浏览器兼容性。布局简单
• 缺点：不会随着屏幕大小而变化

流式布局（百分比布局）

随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整
常见的类型：

// 去重 var array = []; for (var i = 0; i < 10000; i++) { array.push(Math.floor(Math.random() * (100 - 1)) + 1); } console.log(array); // // 1 // function uniq1(array){ // var start = new Date()...

前言

数组是大家常用的数据结果，数组中我们常常需要对数组的元素进行去重和排序，以下是关于数组的去重排序的一些介绍。

去重

简单去重

• 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中。
• 

前言

Xpath 是一种用在 XML 文档中定位元素的语言，同样也支持 HTML 元素的解析。这篇文章主要是关于HTML部分的内容，从这个名字可以看出来，Xpath是关于路径的，Xpath是通过路径查找元素。

HTML中的Xpath

HTML是一种树形结构，HTML 是根节点，所有的其他元素节点都是从根节点发出的。其他的元素都是这棵树上的节点Node，每个节点还可能有属性和文本。
而路径就是指某个节点到另一个节点的路线。

Document 开启画中画 const video = document.querySelector('video'); const pipButton = document.getElementById('pip-button'); pipButton.disabled = true;...

关于画中画（Picture-in-Picture）的介绍及简单实现

前言

大家应该都看过下面这种一个小窗悬浮在页面上的效果，这种效果叫做画中画。画中画（Picture-in-Picture，PiP）是一种现代浏览器支持的功能，允许用户将视频或其他媒体元素从网页中分离出来，以一个小窗口的形式浮动在屏幕的任意位置。比较常见的就是视频网站，一个小窗口悬浮在页面最上层，用户可以在浏览其他内容的同时继续观看视频，极大地提升了多任务处理的便利性。本文将重点介绍视频画中画的实现方法。

画中画原理

画中画的实现原理基于浏览器的 Picture-in-Picture API，主要包括以下几个步骤：

前言

弹幕，作为一种极具互动性的视觉表达方式，已经成为视频平台（如 Bilibili、爱奇艺、腾讯视频等）的标配。它不仅提升了用户参与感，也在一定程度上丰富了视频内容的表达维度。
下面我们将介绍弹幕的基本实现原理并结合 Bilibili 的弹幕思路，构建一个可用的弹幕系统。

弹幕的本质与核心原理

弹幕的本质，是在播放视频过程中，将用户生成的文本内容（弹幕）实时渲染在视频层上方，进一步包括横向滚动、同步展示、支持样式自定义与交互控制等。

核心要素包括：

前言

相信大家应该都很熟悉 Chrome DevTools了，我们平时在开发中经常会用Devtools提供的丰富的功能和工具，帮助我们诊断和调试网页应用程序。本文将分享一些 Chrome DevTools 的调试技巧，在开发中提高效率。

模拟接口响应和网页内容

通过本地覆盖可以模拟接口返回值和响应头，无需 mock 数据工具，无需等待后端支持，快速复现在一些数据下的 BUG 等。在 DevTools 可以直接修改你想要的 Fetch/XHR 接口数据，还可以修改响应头，解决跨域等问题，不仅可以覆盖 Fetch/XHR，JS、CSS 等资源也可以。

下面是在 Network 面板快速模拟远程资源的内容和响应头的步骤：