作者：matrix 被围观: 2,203 次 发布时间：2013-08-13 分类：Wordpress 兼容并蓄 | 无评论 »
在网页中合理的利用一些特效能带给人眼前一亮的感觉。今天给大家分享两款很有意思的 Js 特效插件。 输入框打字冒光特效 这款特效本博客也在使用，也有很多人问过是怎么实现的。具体的效果请看 G
jQuery UI动画方法是jQuery方法的扩展，其方法的参数比jQuery方法更多，并且提供的动画效果比jQuery方法更多，下面我先来给大家介绍一下jQueryUI的effect方法。
一般返回顶部都是直接用 JS 实现的，但是我不懂 JS ，写个 console.log 我都不会就不用说写返回顶部了。那就直接用回最原始的方法：锚点定位。 锚点定位其实很好用，但主要是太生硬了，点一下定位就瞬间冲过去了，没有任何过渡。很多人用JS来做返回顶部而不用 CSS 可能就是锚点定位的这个缺点。
学习原生js的人一定会接触到client家族、scroll家族和offset家族。其中clienHeight、scrollHeight和offsetHeight一般用来求网页内容的高度，而对应的clientWidth、scrollWidth和offsetWidth则用来求网页内容的宽度，由于width和Height属性是类似的，所以这里我只挑这三个height来讲一下。
图片懒加载是一个很重要的前端性能优化手段。这篇文章将从懒加载的最简单场景开始介绍，逐步增加复杂度，希望能讲清楚常见的图片懒加载场景及在该场景下对应的解决办法，也希望对你有所帮助。
今天又遇到了一个非常奇葩的问题，在微信打开 H5 页面，拉到底，会抖动，右侧一半被白色的东西挡住， checkbox 多选框移位等，莫名其妙。如图：
节流指的都是某个函数在一定时间间隔内只执行第一次回调。举个常见的节流案例：我们把某个表单的提交按钮——button 设成每三秒内最多执行一次 click 响应；当你首次点击后，函数会无视之后三秒的所有响应；三秒结束后，button 又恢复正常 click 响应功能，以此类推。
抖是什么？它啊，就像大炮，投一个炸弹，装一个炸弹。那个函数啊，触发一次就执行一次。
翻译 | 付腾 整理 | 凡江 已训练模型示范，可以很好的识别 拉贾·谢耳朵（这还能认错？）雷纳德和霍华德 在这篇文章里我要向你们示范一下如何用 face-recognition.js 来完成
关注 JS 太久，会养成任何功能都用 JS 实现的习惯，而忘记了 HTML 与 CSS 也具备一定的功能特征。其实有些功能用 JS 实现吃力不讨好，我们要综合使用技术工具，而不是只依赖 JS。
MediaPipe Face Mesh：不够高清，case也不够丰富，暂时看不出问题。
在写JS时，这两个函数比较常见，有时候傻傻分不清用哪个，或者说知道代码要怎么写，但要说出它究竟是节流函数还是防抖函数时一脸楞逼。今天有一个同学分享了这两个的区分，我也来回顾一下，加深一下印象，以便日后用到时心里有底。PS：百度和谷歌搜索前几个介绍都是相反介绍，本文为原创，如有雷同纯属抄袭我的。
一、HTML、CSS基础、JavaScript语法基础。 二、JavaScript语法进阶。包括：作用域和闭包、this和对象原型等。 三、ES6语法。这部分属于JS新增的语法， promise、async 等内容要尤其关注。 四、HTML5和CSS3。要熟悉其中的新特性。 五、canvas。加分项。 六、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。 七、前端框架：Vue.js和React。这两个框架至少要会一个。入门时，建议先学Vue.js，上手相对容易。但无论如何，同时掌握 Vue 和 React 才是合格的前端同学。 八、Node.js。属于加分项。 九、自动化工具：构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意，Sass 比 Less 用得多，gulp 比 grunt 用得多。 十、前端综合：HTTP协议、跨域通信、安全问题（CSRF、XSS）、浏览器渲染机制、异步和单线程、页面性能优化、防抖动（Debouncing）和节流阀（Throtting）、lazyload、前端错误监控、虚拟DOM等。 十一、编辑器相关。Sublime Text 是每个学前端的人都要用到的编辑器。另外，前端常见的IDE有两个：WebStorm 和 Visual Studio Code。WebStorm 什么都好，可就是太卡顿；VS Code就相对轻量很多。 十二、TypeScript（简称TS）。ES 是 JS 的标准，TS 是 JS 的超集。TS属于进阶内容，建议把上面的基础掌握之后，再学TS。
就是因为你的left写在了click回调函数里面。因为每点击一次就会创建一块function空间，里面left变量去定时改变style，每改变一次style.left就会导致一次回流从而再渲染一次。每次点击left初始值为1，上一次的已经为+了很多次，上上次的已经为+了非常多次。渲染的时候你就会看到一会1px一会很多px的鬼畜情况，也就是动画抖动（渲染一次抖动一次）。
1，修复http://www.discuz.net/forum-plugin-1.html在hover用户名字时，只显示一条宽线条的bug，原因是这个线条其实是个div，在common.js和ajax.js里通过xhr请求生成的。 此请求会返回一个xml，然后给libxml解析。但由于xml是gbk编码，libxml没带解码库所以失败了。另外有个点是，libxml其实不需要真正的gbk解码器，因为blink在 third_party\WebKit\Source\core\xml\parser\XMLDocumentParser.cpp的parseChunk里会传已解码好的数据，并且强制切换到utf16编码，但libxml会自己检查数据带的
传送门：https://segmentfault.com/a/1190000022994032
在如今在线会议、网络教学盛行的时代，员工和学生被要求打开摄像头，将自己、居住环境、隐私暴露在公众视野中。背景虚化、虚拟背景应用恰恰可以解决这一问题，而人像分割技术正是背后支撑这些应用的关键技术。 有读者可能疑惑，Native环境下的背景虚化、虚拟背景技术已经存在多时了，把它直接迁移到Web端能有多难呢，我们今天就从这个问题出发，展开聊聊。 与Native相比 Web端进行实时人像分割有何不同 相比于Native端的AI推理任务实现，目前Web端实现时有如下难点： 模型轻量：Native端可以在软件包
随着近几年的前端技术的高速发展，越来越多的团队使用 React、Vue 等 SPA 框架作为其主要的技术栈。以 React 应用为例，从性能角度，其最重要的指标可能就是首屏渲染所花费的时间了。那么今天，我们要给大家分享的一个把优化做到极致的故事。
本文由 IMWeb 团队成员 Jax 首发于腾讯内部KM论坛。点击阅读原文查看 IMWeb 社区更多精彩文章。 天下武功，唯 (wei) 快(fu) 不(bu) 破(po)。 随着近几年的前端技术的高速发展，越来越多的团队使用 React、Vue 等 SPA 框架作为其主要的技术栈。以 React 应用为例，从性能角度，其最重要的指标可能就是首屏渲染所花费的时间了。那么今天，我们要给大家分享的一个把优化做到极致的故事。 我们的目标是让 H5 的页面也能够拥有 Native 般的体验，如果你还在寻求什么技术
遇到问题：document.getElementsByClassName(…)[0] is undefined 选择框如果是select标签的，可以直接用select专用的方法去定位点击操作。其它不是select选择框的时候，那就按正常操作步骤先点输入框，再点选项就行了。 可是有些选择框就是不听话，你会发现用selenium死活定位不到，这个时候只能用万能的js来解决了。
作者：一半水一半冰 原文：http://www.cnblogs.com/jingh/p/6377736.html 1写在前面 最近总结下之前的工作，才恍然发现时间的流逝永远是悄无声息的，离开学校那座象牙塔已经也有大半年的时间了，生活中不再充满了茫然只有忙碌。 连续加班加点大半个月，做的活动项目终于算是告一段落了，而今天也将是考验其真正价值的时候，现在将这次开发中遇到的问题做一下总结。 2项目背景 这次的项目主要是做一次全国酒店人气排名的营销活动，主要是基于在微信中传播。 预计访问量达到亿级，并发做到2000
思路1：设置td为relative,input为absolute,然后设置input大小为td的大小。
线上某MongoDB集群存储影响公司收入流水的核心数据，本文分享该集群为何多个索引串行后台会引起集群抖动，并且部分节点出现了连接数耗光等问题。同时通过本案例，给出时延敏感业务该最优方式添加索引，做到对业务最小化影响或者无影响。
目前web前端采用的直播技术一般分为以下几类：rtp/rtcp、rtmp、http-flv、hls。下面介绍不同协议
Leon Sans 最特别的地方在于，字体是由代码构成的。有了这些代码，它可以随意变身。
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Document</title> <script type=”text/javascript” src=”jquery-1.7.1.min.js”></script> <style> body { background:#fff; } textarea {width:300px; min-height:60px; overflow:hidden; resize:none;} </style> <script> $(function(){ $.fn.autoHeight = function(){ function autoHeight(elem){ elem.style.height = ‘auto’; elem.scrollTop = 0; //防抖动 elem.style.height = elem.scrollHeight + ‘px’; } this.each(function(){ autoHeight(this); $(this).on(‘keyup propertychange’, function(){ autoHeight(this); }); }); } $(‘textarea[autoHeight]’).autoHeight(); });
杨亚洲，前滴滴出行专家工程师，现任OPPO文档数据库mongodb负责人，负责数万亿级数据量文档数据库mongodb内核研发、性能优化及运维工作，一直专注于分布式缓存、高性能服务端、数据库、中间件等相关研发。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/animate.min.css" /> <script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script> <style> html,body{ margin: 0px; min-height: 100%; wi
某基于node.js开发的业务系统向外提供了一个dubbo服务，提供向第三方缓存查询、设置多项业务数据并聚合操作结果。在QPS达到800时（两台虚拟机，每台机器4Core8G4node进程），在监控平台上出现了非常多的slow rt警告，平均接口响应达到60+ms，请求报警率达到80%+。
简而言之，WebRTC就是W3C定的一个Web标准，用来做二进制数据传输用的，各浏览器只要支持WebRTC，就可以不通过插件，直接在Web端实现诸如音频、视频、文件等二进制数据的传输。方便之处在于：不需要再使用Flash、Silverlight之类的插件了。but！理想很丰满，现实往往很残酷，WebRTC从诞生之初到现在仍然还有很多地方布满了坑。
https://www.lodashjs.com/docs/lodash.throttle
最近在node中使用?.可选链运算符， 报错了，(Obj层级深时，避免多层if判断) 查了了一下是因为node的版本号太低了（12.18.2），需要升级到14以上才能使用可选链运算符 那如果不想升级n
前段时间，我将精力专注在Web性能领域；在这个领域下有个重要的课题是如何让网页更丝滑（流畅）。
Leon Sans最特别的地方在于，字体是由代码构成的。有了这些代码，它可以随意变身。
大多数设备的刷新频率是60Hz，也就说是浏览器对每一帧画面的渲染工作要在16ms内完成,超出这个时间，页面的渲染就会出现卡顿现象，影响用户体验。前端的用户体验给了前端直观的印象，因此对B/S架构的开发人员来说，熟悉浏览器的内部执行原理显得尤为重要。
| 导语 对于开发者来说，学习OpenGL或者其他图形API都不是一件容易的事情。即使是一些对OpenGL有一些经验的开发者，往往也未必对OpenGL有完整、全面的理解。市面上的OpenGL文章往往零碎不成体系，而教材又十分庞大、晦涩难懂还穿插着各种API的介绍。因此笔者希望通过多年的图形开发经验，结合对OpenGL的理解，对OpenGL整体的知识做一个梳理，剔除掉特别复杂又较少使用的部分。遗留下来常见和易于理解的部分，同时也尽量在介绍的时候兼顾易懂性和严谨性。希望对即将或正在学习OpenGL的开发者，提
需要开发一个小镇游戏，包含建造建筑、升级建筑、建筑生产金币、收金币等功能。整体复杂度不是太高，主要是建筑的循环动画和地图上小车、风车等小元素的动画，所以考虑使用DOM+CSS3动画来实现。
衡量以用户为中心的网页性能是具有挑战性的。为了应对这一挑战，谷歌开发了一系列名为 Web Vitals 的指标。这些 Web Vitals 是衡量网页性能不同方面的信号。例如，首字节时间（TTFB）是其中之一：从浏览器的角度来看，TTFB 衡量了请求资源和响应的第一个字节开始到达之间的时间。
Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 背景说明： 窗口指的就是我们在电脑端经常使用的软件时候显示Logo，标题和操作最小化，最大化
H5 项目是企鹅辅导的核心项目，已迭代四年多，包括了课程详情页/老师详情页/报名页/支付页面等页面，构建产物用于企鹅辅导 APP/H5（微信/QQ/浏览器），迭代过程中了也累积了一些性能问题导致页面加载、渲染速度变慢，为了提升用户体验，近期启动了 “H5 性能优化” 项目，针对页面加载速度，渲染速度做了专项优化，下面是对本次优化的总结，包括以下几部分内容：
企鹅辅导 H5 页面在长期迭代过程中，逐渐累积了一些性能问题，导致页面加载、渲染速度变慢。为了提升用户体验，近期针对页面加载速度，渲染速度做了专项优化，本文是对此次优化的实践总结。分析过程比较细致，希望能给性能分析经验欠缺的同学一些帮助。 项目背景 H5 项目是企鹅辅导的核心项目，已迭代四年多，包括了课程详情页/老师详情页/报名页/支付页面等页面，构建产物用于企鹅辅导 APP/H5（微信/QQ/浏览器），迭代过程中了也累积了一些性能问题导致页面加载、渲染速度变慢，为了提升用户体验，近期启动了 “H5 性能优
大侠好，欢迎来到FPGA技术江湖，江湖偌大，相见即是缘分。大侠可以关注FPGA技术江湖，在“闯荡江湖”、"行侠仗义"栏里获取其他感兴趣的资源，或者一起煮酒言欢。
本文由 IMWeb 团队成员 JaxJiang 首发于腾讯内部 KM 论坛。点击阅读原文查看 IMWeb 社区更多精彩文章。 导语 本文阅读时间大约需要 8 分钟，主要内容如下： 1、ReactNative 在腾讯企鹅辅导中的实践 2、ReactNative 的首屏性能优化方案 3、ReactNative 轮播图、动画实践方案 4、ReactNative 不完全避坑记录 背景 随着业务需求复杂度的不断变更，原有的 Plato（类 RN 框架）已经无法满足业务的诉求，故年初之际就九死一生地开启了 Plato
作者：齐修_qixiuss https://www.jianshu.com/p/a32b890c29b1
下图显示了时钟抖动的基本概念。假定PLL生成时钟频率为100MHz，那么周期就是10ns。理想情况下，时钟上升沿将出现在0ns、10ns、20ns、30ns等时刻。然后，PLL并非是一个理想时钟源，所以，实际的时钟上升沿可能会出现在0ns、9.9ns、20.1ns、29.8ns等时刻。换言之，实际是时钟沿将出现在nT-jitter到nT+jitter的范围内（这里n为整数）。需要注意的是图中时钟边沿的不确定性对于时钟上升沿和时钟下降沿都是有效的，前者为整周期抖动，后者为半周期抖动。为方便起见，我们只讨论整周期抖动。
内容来源：2018 年 6 月 30 日，饿了么前端主管向勇在“饿了么技术沙龙・第27弹 【前端专场】”进行《h5渲染性能一瞥》演讲分享。IT 大咖说（微信id：itdakashuo）作为独家视频合作方，经主办方和讲者审阅授权发布。
偶然看到一个前端小伙伴写了篇“防抖与节流”，我就想啊，咱后端不也有些喜欢抖来抖去的嘛，我就总结一下吧。 想到几个写几个啊，如果还想看别的抖，可以在评论区留言哦，虽然评论不少，但是我每条都会去看，看到我就加。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
