随笔分类 - Javascript
摘要：有时候我们需要在用户离开页面的时候，做一些上报来记录用户行为或者埋点，又或者是发送到服务器的ajax请求。那如何保证请求能够正确的送达就是一个很关键的点。下面我们就来介绍下应该如何操作： 首先，要做事件监听 浏览器有两个事件可以用来监听页面关闭，beforeunload和unload。 before
阅读全文
摘要：很久以前，addEventListener() 的参数约定是这样的： addEventListener(type, listener, useCapture) 后来，最后一个参数，也就是控制监听器是在捕获阶段执行还是在冒泡阶段执行的 useCapture 参数，变成了可选参数（传 true 的情况太
阅读全文
摘要：前言 在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。 在高性能渲染十万条数据(时间分片)一文中，提到了可以使用时间分片的
阅读全文
摘要：通常在Web开发中，常使用的地理定位方式有IP地址、GPS、WIFI、CDMA/GSM。 在新增的H5 WEB API中支持使用Geolocation对象获取当前的位置信息。 Navigator.geolocation只读属性返回一个Geolocation对象，通过这个对象可以访问到设备的位置信息。
阅读全文
摘要：最近在阅读框架源码的时候发现了这个API，于是经过一番学习之后，觉得这个API在开发过程中可以极大提高性能。优秀的攻城狮对性能不是都追求的嘛。如果是你优秀的话，那就继续阅读下去吧！（本人知识拙劣，有误请指出哈） 文章目录 API介绍 浏览器兼容性 用法 例子 总结 API介绍 当我们需要知道一个元素
阅读全文
摘要：MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。 构造函数 MutationObserver()创建并返回一个新的 MutationObserver 它会在指定的DOM发生变
阅读全文
摘要：今天这篇文章和大家聊一聊如何做到只请求资源的一部分，这里需要用到几个http头——range、if-range、content-range、accept-range。 Range头信息介绍 Range主要用来设置获取数据的范围，格式如下： Range: <unit>=<range-start>-<r
阅读全文
摘要：前言 这段时间面试官都挺忙的，频频出现在博客文章标题，虽然我不是特别想蹭热度，但是实在想不到好的标题了-。-，蹭蹭就蹭蹭 :) 事实上我在面试的时候确实被问到了这个问题，而且是一道在线 coding 的编程题，当时虽然思路正确，可惜最终也并不算完全答对 结束后花了一段时间整理了下思路，那么究竟该如何
阅读全文
摘要：划重点： sessionStorage不能跨tab页 设置过期时间在原有的原生api基础上封装，存在key的过期数据 众所周知，前端三大缓存，cookie，sessionStorage，localStorage，cookie空间太小，一旦大了，会消耗流量，只适合存一些登录会话信息，而sessionS
阅读全文
摘要：前言 本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。 之前发的CSS技巧大部分都是依照本文的套路来写的 有人问我为什么我能想出这么多的动画？笔者阅番百部，对常用的动画技巧了如指掌，同样那些酷炫的网站只要细心观察，也会给笔者带来很多设计上的灵感。 一言以蔽之：只有多欣赏动画，才能写
阅读全文
摘要：一、关于HTML5语音Web Speech API HTML5中和Web Speech相关的API实际上有两类，一类是“语音识别(Speech Recognition)”，另外一个就是“语音合成(Speech Synthesis)”，这两个名词听上去很高大上，实际上指的分别是“语音转文字”，和“文字
阅读全文
摘要：转自https://juejin.im/post/5df789066fb9a0161f30580c 现如今，前端开发的同学已经离不开 npm 这个包管理工具，其优秀的包版本管理机制承载了整个繁荣发展的NodeJS社区，理解其内部机制非常有利于加深我们对模块开发的理解、各项前端工程化的配置以加快我们排
阅读全文
摘要：概念 IntersectionObserver接口(从属于Intersection Observer API)为开发者提供了一种可以异步监听目标元素与其祖先或视窗(viewport)交叉状态的手段。祖先元素与视窗(viewport)被称为根(root)。 这是MDN上给的官方概念，不用去管它，我粘出
阅读全文
摘要：通过这个工具的实现，大家可以理解到打包工具的原理到底是什么。 实现 因为涉及到 ES6 转 ES5，所以我们首先需要安装一些 Babel 相关的工具 yarn add babylon babel-traverse babel-core babel-preset-env 接下来我们将这些工具引入文件中
阅读全文
摘要：开篇 很多人都或多或少使用过 webpack，但是很少有人能够系统的学习 webpack 配置，遇到错误的时候就会一脸懵，不知道从哪查起？性能优化时也不知道能做什么，网上的优化教程是不是符合自己的项目？等一系列问题！本文从最基础配置一步步到一个完善的大型项目的过程。让你对 webpack 再也不会畏
阅读全文
摘要：前言 作为一个对UI和动画敏感的切图仔，在日常开发之余，也会关注一些贼好看的图表库和插件。 接下来，我将给大家介绍几款web/python/vue/react里漂亮得不行的开源库/实现。 1. 手绘风图表库：roughViz.js 基于D3(v5), roughjs, 和handy。 1.1 衡量方
阅读全文
摘要：JS 语言不像 C/C++, 让程序员自己去开辟或者释放内存，而是类似Java，采用自己的一套垃圾回收算法进行自动的内存管理。作为一名资深的前端工程师，对于JS内存回收的机制是需要非常清楚, 以便于在极端的环境下能够分析出系统性能的瓶颈，另一方面，学习这其中的机制，也对我们深入理解JS的闭包特性、以
阅读全文
摘要：以这段文字为例子。。 <p><b>法国国营铁路公司(SNCF)20日承认,</b>新订购的2000列火车因车体过宽，<strong>无法开进国内许多火车站的站台，从而不得不花大笔资金改造站台。</strong>法国国营铁路公司发言人克里斯托夫·皮耶诺埃尔告诉法国新闻电台：“我们发现问题晚了点。<b>
阅读全文
摘要：window.getSelection()，返回一个Selection对象，表示用户选择的文本范围或光标的当前位置。 selection对象先来看下面两个selection结果：selection对象一： selection对象二： 很奇怪，为什么同样选中一段文字，为什么selection对象的属性
阅读全文
摘要：前置知识 好了，交代完了背景，让我们先补充一些基础知识吧，不懂的请务必不要跳过！ contenteditable 属性 假如我们给一个标签加上 contenteditable="true" 的属性，就像这样： <div contenteditable="true"></div> 那么在这个 div
阅读全文
浙公网安备 33010602011771号