![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 64
xiao_shutong
这个作者很懒,什么都没留下…
展开
-
定时任务高效触发
开发中我们经常会遇到一些需要定时来解决的业务场景。比如,有这样一个需求:“如果连续30s没有请求包(例如登录,消息,keepalive包),服务端就要将这个用户的状态置为离线”。轮询处理将所有任务都添加到某集合中,定时轮询扫描,如果达到条件则进行相关处理;let map = new Map();function doAction(uid) { map.set(uid,转载 2017-06-04 21:17:37 · 719 阅读 · 0 评论 -
Web 的现状 :网页性能提升指南
技术人员经常会发现自己处于特权状态。随着最新的高端笔记本电脑、手机和快速有线互联网连接 ,很容易让我们忘记 ,这些并不是每个人都有的条件 (实际上 ,真的很少 )。 如果我们从特权和缺乏同情的角度来构建网络平台 ,那么将导致排他性的糟糕体验。 考虑到设计和开发的性能 ,我们怎样才能做得更好 ? 1. 优化所有资源理解浏览器如何分析和处理资源 ,是显著提高性能的最强大但未充分利用...翻译 2018-05-11 12:03:00 · 722 阅读 · 0 评论 -
事件委托、函数节流及函数防抖
概念函数防抖(debounce) 当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间如果一个事件被频繁触发多次,并且触发的时间间隔过短,则防抖函数可以使得对应的事件处理函数只执行一次函数节流(throttle) 预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期如果一个事件被频繁触发多次,节...原创 2018-05-11 13:28:54 · 498 阅读 · 0 评论 -
前端常用代码片段
一、预加载图像如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像。$.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('<img>').attr('src', arguments[i]); }}...原创 2018-05-23 20:13:20 · 193 阅读 · 0 评论 -
原生js实现路由跳转
var regexps = [ /[\-{}\[\]+?.,\\\^$|#\s]/g, /\((.*?)\)/g, /(\(\?)?:\w+/g, /\*\w+/g, ]function extractRoute (route) { var matchs = [] route = route.replace(regexps[0], '\\$&') .r...原创 2018-06-12 16:01:06 · 5046 阅读 · 0 评论 -
移动端几个问题解决方案
解决页面使用 overflow: scroll 在 iOS 上滑动卡顿的问题? 首先你可能会给页面的 html 和 body 增加了 height: 100%, 然后就可能造成 IOS 上页面滑动的卡顿问题。解决方案是:(1) 看是否能把 body 和 html 的 height: 100% 去除掉。(2) 在滚动的容器中增加:-webkit-overflow-scr...转载 2018-06-12 17:46:07 · 395 阅读 · 0 评论 -
性能优化之 ---- 图片
图片太多或者太大将导致页面加载完成缓慢:图片太多导致向服务器请求的次数太多,图片太大导致每次请求的时间过长。以下是几种优化方案: 1、将图片服务与应用服务分离:对于服务器来说,图片始终是最消耗系统资源的,如果将图片服务和应用服务放在同一服务器的话,应用服务器很容易会因为图片的高I/O负载而崩溃,所以当网站存在大量的图片读写操作时,建议使用图片服务器.(注:图片服务器是专门为图...原创 2018-06-08 18:53:59 · 596 阅读 · 0 评论 -
dom更新监听之 --- Mutation Observer API
1. 概述2. MutationObserver 构造函数3. MutationObserver 的实例方法3.1 observe()3.2 disconnect(),takeRecords()4. MutationRecord 对象5. 应用示例5.1 子元素的变动5.2 属性的变动5.3 取代 DOMContentLoaded 事件6. 参考链接...原创 2018-06-26 11:36:59 · 1345 阅读 · 0 评论 -
Event Loop 事件循环机制
PART 1:规范为什么要有Event Loop?因为Javascript设计之初就是一门单线程语言,因此为了实现主线程的不阻塞,Event Loop 这样的方案应运而生。 小测试(1)先来看一段代码,打印结果会是?console.log(1)setTimeout(() =&amp;amp;amp;gt; { console.log(2)}, 0)Promise.resolve()...转载 2018-06-27 11:45:18 · 379 阅读 · 0 评论 -
Web技术应用规范(草案)
第一章 总则第一条 目的前端开发是一系列工具和流程的集合,本规范旨在提升前端代码的质量,对前端开发进行全方位指导,统一编码规范、提高可读性、降低维护成本,以实现高效、可持续的工作流。第二条 范围本标准适用于所有的Web应用及App开发。第二章 开发规范第三条 一般规范应用在HTML、CSS、JavaScript等的通用规则。3.1 通用规范3...原创 2018-08-27 11:41:33 · 1380 阅读 · 2 评论 -
常用 Git 命令清单
我们每天使用 Git ,但是很多命令记不住。 一般来说,日常使用只要记住下图6个命令,就可以了。但是熟练使用,恐怕要记住60~100个命令。 下面是我整理的常用 Git 命令清单,清单是供大家查缺补漏的,大家可以预览下以下清单,看自己有哪些是不太熟悉或者不知道的,然后针对性的了解其用法。熟练了这些命令可以大大提高效率。几个专用名词的译名如下。 - Workspace:工作区...转载 2018-05-11 10:44:58 · 254 阅读 · 0 评论 -
ES6 小知识
定义变量/常量ES6 中新增加了 let 和 const 两个命令,let 用于定义变量,const 用于定义常量。两个命令与原有的 var 命令所不同的地方在于,let, const 都是块级作用域,其有效范围仅在代码块中,实例如下:// es5if(1==1){ var b='foo';}console.log(b); //foo// es6if(1==1...原创 2018-04-24 19:36:01 · 124 阅读 · 0 评论 -
从移动端click到摇一摇
正文从这开始~以前听到前辈们说移动端尽量不要使用click,click会比较迟钝,能用touchstart还是用touchstart。但是用touchstart会有一个问题,用户在滑动页面的时候要是不小心碰到了相关元素也会触发touchstart,所以两者都有缺点。那怎么办呢?首先为什么移动端的click会迟钝呢?从谷歌的开发者文档《300ms tap delay, gone aw转载 2017-07-25 09:02:26 · 452 阅读 · 0 评论 -
input输入框内容变化实时监听
js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydown或者keyup事件一样,只能够检测通过键盘输入导致内容的变化, 下面就通过代码实例做一下简单介绍。一.相关知识准备:1.onchange事件:此事件会在元素内容发生改变,且失去焦点的时候触发。浏览器支持度较好。2.onpropertychange...原创 2017-08-13 16:25:58 · 67013 阅读 · 0 评论 -
JQuery中serialize() 序列化
JQuery中serialize() 序列化在jQuery中,当我们使用ajax时,常常需要拼装input数据以键值对(Key/Value)的形式发送到服务器,用JQuery的serialize方法可以轻松的完成这个工作,使用这个方法可以将表单序列化为键值对(key1=value1&key2=value2…)后提交。下面介绍JQuery中serialize()的用法转载 2017-08-13 16:18:33 · 875 阅读 · 0 评论 -
反序列化自动填写表单
反序列化自动填写表单form表单结构<form id="fs"> <div class="field"> <label>name</label> <input type="text" name="name"> </div> <div class="field"> <label>name</label> <input type="text" name="ag原创 2017-08-13 16:46:22 · 584 阅读 · 0 评论 -
高阶函数:Filter、Map和Reduce
前言高阶函数可以帮助你增强你的JavaScript,让你的代码更具有声明性。简单来说,就是简单,简练,可读。知道什么时候和怎样使用高阶函数是至关重要的。它们可以让你的代码更容易理解和具有更好的可维护性。它们也可以让你很轻松的进行函数间的组合。在本文中,我将介绍JavaScript中三个最常用的高阶函数:.filter(),.map(),.reduce翻译 2017-09-12 09:51:25 · 509 阅读 · 0 评论 -
H5 截屏 (canvas2html / dom-to-image)
场景描述:移动端调用 iscroll 插件的长页面实现完整截屏问题:dom-to-image 插件出现 input 的单选框和复选框选中项截屏生成的图片无值。解决方案:修改的方法:function copyUserInput() { if (original instanceof HTMLTextAreaElement) clone.innerHTML = orig原创 2017-10-27 14:21:05 · 2657 阅读 · 0 评论 -
cli 搭建Vue 环境
npm初始化 $ npm initwebpack配置 主要需要配置babel,把es6预处理为es5,配置文件如下:const path = require('path');module.exports = { entry: './app/main.js', output: { path: path.resolve(__dirname, 'dist'),原创 2017-11-15 16:55:55 · 218 阅读 · 0 评论 -
vue 双向数据绑定功能实现
本文将仿写一个 vue 双向数据绑定的实例。原理 vue 的双向数据绑定原理,主要是通过Object对象的 defineProperty属性,重写data 的set和get函数实现。本文将简要实现v-model, v-bind, v-click三个 命令。原理如图:实现页面结构如下:<div id="app"> <form> <input type="...原创 2018-04-19 16:48:40 · 319 阅读 · 0 评论 -
JS 中可以提升幸福度的小技巧
JS 中可以提升幸福度的小技巧1. 类型强制转换1.1 string强制转换为数字1.2 object强制转化为string1.3 使用Boolean过滤数组中的所有假值1.4 双位运算符 ~~1.5 短路运算符1.6 取整 |01.7 判断奇偶数 &12. 函数2.1 函数默认值2.2 强制参数2.3 隐式返回值2.4 惰性载入函数2.5 一次性函数3. 代码复用3.1 Object [...转载 2019-07-03 11:03:36 · 224 阅读 · 0 评论