摘要：
距离写第一篇博客, 已经过去了2个月零5天. 这段时间, 我写了313篇随笔, 而最近几天, 是我第一次萌生了退意. 也不是说写博客不好, 而是说, 脑里的想法总是源源不断的冒出来, 试图找到更好的学习方法. 这会导致之前坚持的东西被动摇, 或是说, 因为时间不够而被搁置, 久而久之, 之前的习惯也 阅读全文
2019年11月1日
2019年10月27日
2019年10月24日
摘要：
Ipv4的地址是0.0.0.0 到 255.255.255.255, 匹配这个字段需要判断三种情况: 1. 如果第一位是0或1, 则第二位和第三位可以是0-9的任意数值: 2. 如果第一位是2, 第二位是0-4, 那第三位可以是0-9的任意数值: 3. 如果第一位是2, 第二位是5, 那第三位只能是 阅读全文
2019年10月23日
摘要：
function test(a, b){ if (arguments.length add.length) { console.log("形参和实参个数相等"); } else { console.log("形参和实参个数不等"); } } test(1); // "形参和实参个数不等" 阅读全文
2019年10月22日
摘要：
目前主流的操作系统有三个: Windows / MacOS / Linux. 想要用JavaScript判断其所在的操作系统可以通过: navigator.platform 实现; 返回值一般有下面三种: 1. Windows: "Win32" 2. MacOS: "MacIntel" 3. Lin 阅读全文
摘要：
首先, 我们可以获取浏览器安装的所有在插件: navigator.plugins 它会返回一个类似数组的对象, 包含所有已安装插件的具体信息. 然后我们可以通过正则去判断这些插件里是否有flash: 阅读全文
摘要：
可以通过检测navigator.userAgent字段中是否有"mobi"字段来检测是PC浏览器还是手机浏览器: 阅读全文
摘要：
需要使用iframeElement.contentWindow; 阅读全文
摘要：
如果脚本网址与网页网址不在同一个域(比如使用了 CDN), 那如果这个脚本执行报错了, 就会报:Script error. 由于同源策略, 浏览器禁止向外部脚本泄漏信息, 因此不会提供完整的报错信息, 而是报一个 “Script error.”，行号为0，其他信息都没有. 一种解决方法是: 在脚本所 阅读全文
摘要：
使用window.onload属性可以监听完档载入完成的load事件. 阅读全文
摘要：
方法1: 使用setTimeout(); 方法2: 使用window.requestAnimationFrame(); 两者区别: setTimeout()需要手动设置延迟时间, 而requestAnimationFrame()则是会推迟到浏览器下一次重流时执行. 因此, 前者比较通用, 后者主要是 阅读全文
摘要：
可以在网页onload时存一个当前时间的时间戳, 后面需要用到时再用当前时间戳相减得到, 但还有更好的办法: performance.now() 会返回一个高精度的时间戳, 用于表示当前网页的加载时间. 阅读全文
摘要：
就是按住鼠标左键以后拖动选中的文本, 可以通过window.getSelection()方法获取; 阅读全文
摘要：
使用window.print()可以调出打印界面, 功能和Ctrl + p 效果是一样的. 但手机浏览器没有打印功能, 所以可以加一个判断条件, 先判断window.print()方法是否存在, 若true, 则打印: 阅读全文
2019年10月21日
摘要：
取余用: % 取整用: parseInt() 或 Math.floor(); 阅读全文
摘要：
元素节点的滚动有三种方法: 1. Element.scrollTop, 表示滚动到距离顶部多少像素 2. Element.scrollLeft, 表示滚动到距离左边多少像素 3. Element.scrollIntoView() 表示滚动到和页面的可视区域, 即视口, 和锚点定位类似. 阅读全文
摘要：
有三个方法和页面滚动相关: 1. window.scrollTo() 函参是两个数值, 单位为px, 表示从网页左上角为零点的x轴和y轴滚动距离, 下面代码表示将页面滚动至顶部: 此外, 这个方法还可以像下面这样使用: 2. window.scroll() 是 window.scrollTo() 的 阅读全文
2019年10月20日
摘要：
一般来说是无法移动的, 只有使用window.open()创建的网页窗口才可以移动, 并且它所在的 Tab 页是当前窗口里面唯一的, 这时才能移动这个窗口. 移动的方法有两种: 1. window.moveTo(), 接收两个整数类型的参数, 表示移动的x和y轴坐标, 以屏幕左上角为xy零点: 2. 阅读全文
2019年10月19日
摘要：
1. window.open() 可以打开一个网页窗口, 参数设置方法很多, 这里就不演示了. 2. window.close() 可以关闭一个网页窗口, 一般是用来关闭使用window.open()打开的网页窗口. 3. window.stop() 可以中止当前页面加载, 会停止加载图像、视频等正 阅读全文
摘要：
浏览器默认的对话框有三种: 1. window.alert(), 一段话+一个确定按钮 2. window.prompt(), 一段话 + 一个输入框 + 一个确定按钮 + 一个取消按钮 3. window.confirm(), 一段话 + 一个确定按钮 + 一个取消按钮 阅读全文
摘要：
即: https:// 为加密环境, http:// 为非加密环境. 需要使用window.isSecureContext; 如果是https, 则返回true, 反之返回false; 阅读全文
摘要：
第一组: window.screenX 和 window.screenY, 只读, 返回浏览器窗口左上角与屏幕左上角的水平距离和垂直距离(单位像素); 第二组: window.innerHeight 和 window.innerWidth, 只读, 返回视口的宽高. 第三组: window.oute 阅读全文
摘要：
所谓设备像素比率, 指的是一个CSS像素点大小与一个物理像素点大小的比值, 这个比值越大, 表示屏幕呈现的内容越高清. 可以通过window.devicePixelRatio来获取. 阅读全文
摘要：
注意, 上面的代码需要在框架窗口中执行; 阅读全文
摘要：
需要在框架窗口中使用: window.top 阅读全文
摘要：
注意, 这里的window.frameElement只在frame或iframe中才有效, 如果是在window中直接使用, 则返回null 阅读全文
摘要：
需要使用window.length, 或者window.frames.length; 如果页面中不包含frame和iframe元素, 则返回0; 阅读全文
摘要：
1. 使用window.self 2. 使用window.window 3. 使用window.globalThis 4. 在全局环境直接使用this 5. 使用window.frames 6. 使用window.top 7. 在没有框架窗口的页面中可以使用window.parent; 阅读全文
摘要：
方法1. 在子窗口手动将window.opener设置为null 方法2. 给 a 元素 添加 rel = "noopener" 属性, 可以防止新打开的窗口获取父窗口的全局属性和方法 阅读全文
摘要：
使用 window.open(window.opener.origin); window.opener;属性表示父窗口的相关信息, 是从子窗口获取父窗口信息的一种方法. 如果一个窗口没有父窗口, 那window.opener会返回null. 下面代码可以从子窗口获取父窗口设置的window.name 阅读全文
摘要：
使用window.closed; 属性可以检测当前窗口是否关闭, 由于代码是运行在这个窗口中的, 因此只要能运行, 那就说明是没有关闭的. 因此这个属性多用于检测window.open()所创建的窗口是否关闭; 阅读全文
摘要：
window.name表示当前窗口的名字, 而非网页的名字, 网页的名字需要使用: document.title; window.name一般是空的字符串, 他的作用其实是配合配合超链接和表单的target来使用的, 也就是跳转时将当前窗口的信息带过去. 只要这个窗口不关闭, 那从这个窗口打开的其他 阅读全文
2019年10月18日
摘要：
下面是一些相关概念: 1. 重流: reflow, 重绘: repaint 2. 重流必定导致重绘, 重绘不一定重流 3. 布局改变会发生重流, 元素颜色等改变只会发生重绘 下面是通过减少重流/重绘次数而优化页面性能的一些手段: 1. 减少js中的dom操作, 若必须, 则尽量将读取dom和写入do 阅读全文
摘要：
浏览器内核可以分为两部分: 1. 渲染引擎 2. JS引擎 渲染引擎的作用是将html代码和css代码解析为用户看到的网页. JS引擎的作用是读取网页中的js代码并执行它. 下面是常见的渲染引擎和JS引擎: 浏览器名称 渲染引擎 JS引擎 Firefox Gecko SpiderMonkey Saf 阅读全文
摘要：
所谓"脚本的动态加载", 指的是的在执行js代码时, 动态地加载并执行其他的js脚本. 因此我们需要在js中动态地创建<script>标签, 并引入脚本文件, 如下: 注意: 通过这种方式动态加载的脚本是不会阻塞页面渲染的, 但执行顺序无法保证, 那个脚本先下载完成就会先执行哪个脚本. 如果需要按顺 阅读全文
摘要：
如果script标签是引用的外部js文件, 那就会有一个下载js文件这一过程, 为了不因为这个下载过程而阻塞页面解析与渲染, 我们需要一种机制来解决这一问题, 方法之一就是使用 defer和async属性. 方法1. 使用 defer属性 defer属性的作用是延迟脚本的执行, 只有等到DOM生成之 阅读全文
摘要：
有这样一类问题, 如下所示, 就是在dom结构没有生成时就在js代码中调用了, 此时就会报错: 上图所示的代码表明, 如果js代码在页面DOM没有解析出来时, document无法获取body元素, 这样就会造成报错. 解决方法有下面两种: 1. 将操作dom的代码放到body标签底部: 2. 使用 阅读全文
摘要：
我们可以把网页的加载过程理解为: 下载与解析. 这两个过程是同时进行的, 也就是说, .html文件还没下载完, 解析已经开始了. 大致的加载流程如下: 1. 浏览器边下载html文件, 边解析其内容. 2. 解析过程中发现有script标签时, 会暂停dom和css解析, 转而交给js引擎去处理. 阅读全文
2019年10月17日
摘要：
有四种方法: 方法1: 在<script>标签内直接写代码 方法2: 在使用<script>标签的src属性引入外部js文件 方法3: 通过事件属性 方法4: 使用URL协议 阅读全文
2019年10月16日
摘要：
1. 向上取整使用: Math.ceil() 2. 向下取整使用: Math.floor() 3. 四舍五入取整使用: Math.round() 4. 保留n位小数使用: Number().toFixed(n) 5. 生成区间随机数使用Math.random(); 阅读全文
