学习原生js的人一定会接触到client家族、scroll家族和offset家族。其中clienHeight、scrollHeight和offsetHeight一般用来求网页内容的高度,而对应的clientWidth、scrollWidth和offsetWidth则用来求网页内容的宽度,由于width和Height属性是类似的,所以这里我只挑这三个height来讲一下。
一般返回顶部都是直接用 JS 实现的,但是我不懂 JS ,写个 console.log 我都不会就不用说写返回顶部了。那就直接用回最原始的方法:锚点定位。 锚点定位其实很好用,但主要是太生硬了,点一下定位就瞬间冲过去了,没有任何过渡。很多人用JS来做返回顶部而不用 CSS 可能就是锚点定位的这个缺点。
关注 JS 太久,会养成任何功能都用 JS 实现的习惯,而忘记了 HTML 与 CSS 也具备一定的功能特征。其实有些功能用 JS 实现吃力不讨好,我们要综合使用技术工具,而不是只依赖 JS。
作者:一半水一半冰 原文:http://www.cnblogs.com/jingh/p/6377736.html 1写在前面 最近总结下之前的工作,才恍然发现时间的流逝永远是悄无声息的,离开学校那座象牙塔已经也有大半年的时间了,生活中不再充满了茫然只有忙碌。 连续加班加点大半个月,做的活动项目终于算是告一段落了,而今天也将是考验其真正价值的时候,现在将这次开发中遇到的问题做一下总结。 2项目背景 这次的项目主要是做一次全国酒店人气排名的营销活动,主要是基于在微信中传播。 预计访问量达到亿级,并发做到2000
图片懒加载是一个很重要的前端性能优化手段。这篇文章将从懒加载的最简单场景开始介绍,逐步增加复杂度,希望能讲清楚常见的图片懒加载场景及在该场景下对应的解决办法,也希望对你有所帮助。
https://www.lodashjs.com/docs/lodash.throttle
节流指的都是某个函数在一定时间间隔内只执行第一次回调。举个常见的节流案例:我们把某个表单的提交按钮——button 设成每三秒内最多执行一次 click 响应;当你首次点击后,函数会无视之后三秒的所有响应;三秒结束后,button 又恢复正常 click 响应功能,以此类推。
这个动画还是挺有意思的,但是小编第一个反应这要是哪一天某位ui姐姐或产品姐姐给小编提了这样子的需求,那小编岂不是当场要自闭?我本着自己的好奇心,实现了一个简易版的老虎机:
当我们浏览页面篇幅较大,浏览过半的时候想回到导航位置,只能通过往回滚动或通过”回到顶部”重新滚动到导航位置,这样的操作显得繁琐与不便。于是便有了吸顶式导航的交互方式,吸顶条导航最大的好处是将最常用或者设计者最愿意让用户看到的内容、功能经常保持在用户面前,为用户提供了极大的便利与交互体验。 本文主要内容 1、吸顶导航是什么 2、吸顶导航的实现方法 3、小结 1、吸顶条导航是什么 如图: 吸顶导航栏的初始位置一般是靠近在页面的顶部位置,但是又存在一定距离,通常这块区域放置最为醒目或者重要元素的地方,如
吸顶元素的初始位置一般靠近页面顶部,但与顶部有一定距离,这块区域放的是最醒目的元素,比如Banner图。页面向下滚动超过吸顶元素初始位置时,把吸顶元素固定在顶部
我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。我当时很纳闷为何一个滚动吸顶会有 bug,后来我查看代码才发现直接用的是 offsetTop 这个属性,而且并没有做兼容性处理。
说什么真理无穷,进一寸有一寸的欢喜。大家好,我是石桥码农,今天继续为大家分享微信小程序实践相关的技术内容。
position:sticky定义, eg:CSS中position属性介绍(新增sticky)
EasyDSS平台支持视频直播和点播,视频直播方面最多可分为十六屏进行实时直播,视频点播方面则有视频点播广场自由点播。大家知道近期我们将EasyDSS替换了新的内核,因此在性能上,相较以前的版本性能会有一定幅度的提升,目前我们正在对新内核的EasyDSS做前端编译和测试。
携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第11天,点击查看活动详情 >>
本文偏技术,可能较枯燥,阅读完大概需要 15分钟 微信小程序转眼上线将近一年了,提供了接近原生App的使用体验,加上一年来不断释放新的能力,获得的关注越来越多。笔者参与到了小程序产品相关的研发工作,感觉对于结构较为复杂的小程序,性能问题还是蛮突出的。 性能优化是一个长久的课题,今天总结了一些在研发过程中的优化策略,有代码层面的,也有一些方案策略层面的,其中一些优化方法也适用于app和web,有些则只适用于小程序。今日抛砖引玉,与各位分享小程序性能优化的36计。 瞒天过海 用户对小程序速度的第一感知就
为什么要写这个文章呢?其实发现很多同学对一些很简单又有效的 debug 手段都不太了解,找 bug 的方式都不是很高效,导致最终 bug 找不到或者走了很多弯路。
在移动端如果使用局部滚动,意思就是我们的滚动在一个固定宽高的div内触发,将该div设置成overflow:scroll/auto;来形成div内部的滚动,这时我们监听div的onscroll发现触发的时机区分android和ios两种情况,具体可以看下面表格:
在onReady方法中,查询section-header节点并拿到该节点此时距离当前顶部的距离
最近在node中使用?.可选链运算符, 报错了,(Obj层级深时,避免多层if判断) 查了了一下是因为node的版本号太低了(12.18.2),需要升级到14以上才能使用可选链运算符 那如果不想升级n
最近在研究页面渲染及web动画的性能问题,以及拜读《CSS SECRET》(CSS揭秘)这本大作。 本文主要想谈谈页面优化之滚动优化。 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动。因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读。 滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件。简单的看看: var i = 0; window.addEv
在跨端开发中,离不开一些吸顶的交互场景,可以参考淘宝或是京东类电商 app 中一些 tab ,在整个容器滑动的过程中,吸顶效果非常的连贯和丝滑的,当然这些 tab 可能是用 native 开发的,但是跨端应用也能实现很不错的吸顶效果,那么今天我们就来研究一下跨端开发是如何实现吸顶的。
由于互联网的飞速发展,传统安防摄像头的视频监控直播与互联网直播相结合是大势所趋。传统安防的直播大多在一个局域网内,在播放的客户端上也是有所限制,一般都需要OCX Web插件进行直播。
在写JS时,这两个函数比较常见,有时候傻傻分不清用哪个,或者说知道代码要怎么写,但要说出它究竟是节流函数还是防抖函数时一脸楞逼。今天有一个同学分享了这两个的区分,我也来回顾一下,加深一下印象,以便日后用到时心里有底。PS:百度和谷歌搜索前几个介绍都是相反介绍,本文为原创,如有雷同纯属抄袭我的。
抖是什么?它啊,就像大炮,投一个炸弹,装一个炸弹。那个函数啊,触发一次就执行一次。
内容来源:2018 年 6 月 30 日,饿了么前端主管向勇在“饿了么技术沙龙・第27弹 【前端专场】”进行《h5渲染性能一瞥》演讲分享。IT 大咖说(微信id:itdakashuo)作为独家视频合作方,经主办方和讲者审阅授权发布。
在 H5 中,我们通常会使用 REM 和 VW 这两种单位来实现页面的响应式布局。这两种单位可以让页面元素的大小随着根元素(对于 REM)或视口宽度(对于 VW)的大小变化而变化,从而适应不同尺寸的屏幕。
对输入事件处理函数去抖动,存储事件对象的值,然后在requestAnimationFrame 回调函数中修改样式属性
使用能快速调用移动设备的电话/短信/邮件三大通讯功能,使用<input>能快速调用移动设备的的图库/文件。 这些功能方便了页面与系统的交互,关键在于调用格式一定要准确,否则会被移动端浏览器忽略。
经常会遇到这样的情况,当页面展示内容过长时,想点导航切换栏目,就得把滚动条拉回到顶上,这样操作总不太人性化,能不能让导航超出显示范围外时自动贴在屏幕最顶上呢?答案肯定是能的。如果不太明白,把滚动条拉到下面点,看下我博客是效果就明白了。
本文由 IMWeb 团队成员 JaxJiang 首发于腾讯内部 KM 论坛。点击阅读原文查看 IMWeb 社区更多精彩文章。 导语 本文阅读时间大约需要 8 分钟,主要内容如下: 1、ReactNative 在腾讯企鹅辅导中的实践 2、ReactNative 的首屏性能优化方案 3、ReactNative 轮播图、动画实践方案 4、ReactNative 不完全避坑记录 背景 随着业务需求复杂度的不断变更,原有的 Plato(类 RN 框架)已经无法满足业务的诉求,故年初之际就九死一生地开启了 Plato
最近在业务中实际使用 content-visibility 进了一些渲染性能的优化。
b.输入框事件:验证手机号或者邮箱,用户输入时不断触发键盘事件,应该等用户结束输入之后,以最后一次输入为准
不知不觉在网易已有三年半,占了一半时间都在与移动端打交道,整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android和iOS各显神通,Android的系统版本和屏幕分辨率多得难以一招兼容,iOS的顽固标准和未知特性多得难以快速掌握。
浏览网页时经常会发现弹框出现后,滚动鼠标时,蒙版下面的页面还是可以滚动的,其实这些滚动都是没必要的,因为弹框的原意就是要聚焦用户的注意力。
具体场景就是一个配置界面, ScrollViewer 中包含一个StackPanel 然后纵向堆叠,以滚动的方式查看,然后包含多个 TextBlock 、 TextBox 以及DataGrid ,期间遇到了两个问题:
浏览器在接收到服务端返回的 HTML 之后,需要把这段数据渲染成用户看到的页面,在开始渲染第一个元素之前可能还需要经过很多步骤。这个过程会适用于整个页面,包括当前不可见的内容。
作者:louiszhai,腾讯增值服务项目管理员工 背景 为了满足日益复杂的小程序活动需求,腾讯增值服务项目组开发了一款Ulink活动小程序,该小程序以游戏社交圈为依托,提供游戏玩家基本的社交功能,如发帖、评论、点赞、分享等。 为了支持这些功能,进行了一系列的性能优化改进。Ulink活动小程序共有5个tab,分别提供关注人的feeds信息、所有用户的精品分享,图文发布入口、消息及个人页,如下所示。 开发过程中折腾了各种各样的挑战和难题。其中以性能问题最为棘手,主要有体现在以下几个方面: 小程序首次访问
海涛,携程前端开发工程师,负责机票主流程预订、React Native技术栈相关开发工作。
有时你可能需要终端输出许多图片,那么现在就让我们在Linux终端打开一个新窗口显示图片。
作者:matrix 被围观: 2,203 次 发布时间:2013-08-13 分类:Wordpress 兼容并蓄 | 无评论 »
采用域名分片技术,将资源放到不同的域名下。接触同一个域名最多处理6个TCP链接问题。
material-dropdown-select组件结合了material-select和material-button-down的API。
今天在开发一个移动端的 H5 页面时,遇到了 iOS 上键盘收起时界面无法归位的问题。下面详细描述下问题和症状:
写到最后总结得差不多了,后续如果我想起还有哪些类库工具遗漏的,会继续在这篇文章上补全,同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔,喜欢的点个赞或收个藏,保证你在开发时用得上。
原理:为传入的 obj 添加临时方法,然后去调用这个临时方法,这样子,这个方法的this就会指向调用它的对象了,最后还需要把临时方法删除掉。
记录工作和学习中的一些可能会被面试问到的JS内部实现基础,由于笔者水平有限,提供出的答案不一定准确,但是原理尽可能会讲清楚,以后会进行逐步添加。 bind实现 bind实现其实是内部调用apply或者call来实现对象的this绑定,具体实现可以参考如下: var o = { a: 1, b: 2, print: function() { console.log(this.a); console.log(arguments); } }; va
这两个 CSS 属性,主要针对 长列表渲染。有长列表渲染需求的同学,可一定不能错过咯~
领取专属 10元无门槛券
手把手带您无忧上云