在移动端中，如果我们使用了一个固定定位的遮罩层，且其下方的dom结构的宽度|高度超出屏幕的宽度|高度，那么即使遮罩层弹出后铺满了整个屏幕，其下方的dom结构依然可以滚动，这就是大家所说的“滚动穿透”。
一般来说产品是按以下方式进行迭代的，我认为循环的起点应该是「收集用户反馈」，我们对页面的优化依据和目标一个重要来源就是用户的反馈，因此说网页优化我们先从网页监控开始聊起。
一般来说，我们使用 height:100vh 进行全屏布局，这是一种很方便的响应式方法。
在多形态业务场景下，如何保障多端体验的一致性，是前端技术领域一个比较受关注的方向。美团外卖前端技术团队基于 Flutter Web 探索跨端（App\PC\H5）的解决方案，真正实现“Write Once & Run AnyWhere”。本文系该团队的实践经验总结，希望能对大家有所帮助或者启发。
2、标准模式：通过元素反映这一变化（除了Safari，Safari仍然基于跟踪滚动位置)。
插件 parallel.js: 前后端通用的一个并行库 zepto: 用于现代浏览器的兼容 jQuery 的库 totoro: 稳定的跨浏览器测试工具 TheaterJS: 一个用于模拟人输入状态的 JS 库 stellar.js: 前端用于实现异步滚动效果的库，现已不再维护 skrollr: 另一款实现一步滚动的开源库，使用人数众多，可实现各种狂拽酷炫掉渣天的前端效果，看真相 Framework7: 前端框架，是开发人员可以基于 web 技术构建 IOS7 程序 regulex: 用于生成 正则表达式 的
第一步： 安装 cnpm install vue-seamless-scroll -s 第二步： 在main.js中引入 / 无缝滚动插件 import scroll from 'vue-seamless-scroll' Vue.use(scroll) //or you can set componentName default componentName is vue-seamless-scroll Vue.use(scroll,{componentName: 'scroll-seamless'}) 第三
它是小程序开发工具内置的一个可视化监控工具，能够在 OS 级别上实时记录系统资源的使用情况。
平时在页面开发过程中，常会感觉有几个地方不太便利，例如： （1）浏览器中打开的标签页太多，调试的页面是其中的一个，感觉被淹没了，比如查看完其他网页资料，然后编辑代码，再找调试页面时就比较麻烦，得从众多标签页中寻找 （2）开发中有时需要清除浏览器缓存，但这可能影响已经打开的其他网站 （3）每次修改完代码后，需求手动刷新页面查看效果 后来我就使用单独的浏览器打开调试页面，这样可以使用 ctrl+tab 快捷键快速打开，并且清除缓存也不影响其他网页，然后使用 browsersync 来自动刷新 正好前阶段发现一个
上图是performance.timing监测到的特定于用户的计时器，通过这些属性的组合搭配，可以获取到特定的时间数据。
随着信息时代的发展变迁，荧幕里呈现的智慧城市慢慢出现了在现实生活中，很大程度上便利了日常的管理和维护。在智慧城市的大背景下，智慧交通监管可视化系统是其重要的组成部分，通过一条条道路监控的串联，引申出一座智慧城市的管控，而在众多数据的维护中，实时数据、设备状态以及视频监控是极为重要的。其中视频监控一直是作为主体的部分，而在互联网和物联网齐头并进的形式下，“中国天网”应运而生，这其实是一项城市监控系统，但它不是个仅一台摄像头的设备，而是足足有1.7亿个监控摄像头，而在未来三年内，还将再安装4亿个摄像头。交通作为城市发展的动脉，与人们下日常息息相关，而在这一系列的监管作用下，成为了一个“公安治安视频监控系统”，关乎人们日常的安全治安管理。
相比用户停留时间短、用完即走的 Web 页面，桌面 QQ 用户在一次登录后，可能会挂机一周以上，这段期间，如果没有严格控制好 QQ 内存占用，那么结果可能是用户交互响应变慢、甚至 Crash。在系统监控工具里，高内存占用也会被直观地反映出来，带来不好的口碑。Mac QQ 灰度期间，也听到了一些用户关于内存占用偏高的声音。既然不能置若罔闻，那么必须得痛下决心系统地来一波内存占用分析与优化。在这个过程中，团队前前后后挖出来了不少优化项，最终，可以让桌面 QQ 在内存占用上达到一个相对较低且稳定的状态。本文内容是探索桌面 QQ 内存优化上的一个阶段性小结，肯定还有更多内存优化 trick，欢迎大佬们提点。
新版桌面 QQ 自内测以来受到许多热心网友和行业人士，以及鹅厂小伙伴的关注，非常感谢大家在内测过程中提的各种有建设性的建议和反馈。其中，也有一小部分有开发背景的用户对我们采用 Electron 框架表达担心：高内存占用、超大安装包、启动缓慢等。究其原因还是担心新版本 QQ 资源占用大、体验变差，针对用户的担心，我们在内存上进行了专项优化，也取得了一些阶段性的进展，在此做一个小结。
PornHub的FE，分享了P站前端一些实践，英文比较晦涩难懂，故翻译整理了一下，很多同学对前端技术不是很熟悉，故加入了简单解释，希望对大家理解相关技术有帮助。
QQ 作为国民级应用，从互联网兴起就一直陪伴着大家，是很多用户刚接触互联网就开始使用的应用。而 QQ 桌面版最近一次技术架构升级还是在移动互联网兴起之前，在多年迭代过程中，QQ 桌面版也积累了不少技术债务，随着业务的发展和技术的进步，当前的架构已经无法很好支撑对 QQ 的发展了。在 2022 年初，我们下定决心对 QQ 进行全面的技术架构升级，对于这样一个国民级应用的重构，挑战无疑是巨大的。
本质是监控文件修改，实时刷新浏览器，需要安装livereload插件和node.js插件，全局刷新
随着互联网的发展，越来越多的业务不仅仅由单一节点或是单一语言就可承载，而是趋向多语言分布式协同开发，例如接入层由 Node.js 完成，逻辑以及数据层由 C++/GO/Python 实现，并由此组成大
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 历任研发工程师，
web前端 —— 移动端知识的一些总结 个人在移动端的一些总结归纳，有新的知识点会一直更新 一.css部分 1.meta标签 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/> 移动端加上这个标签才是真正的自适应，不加的话，假如你把一个980px宽度(手机端常规是980)的PC网页 放在手机上显示，倒也能正常显示不出现滚动条，不过是移动设备对页面 做了缩小优化，所以字体等都相应
在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：
导语 |近日，云+社区开发者大会（苏州站）圆满落幕。本次开发者邀请了腾讯内部及业内行业大咖就物联网、小程序、微服务等当前互联网领域的热点技术的落地实践问题进行了深度探讨。本文是同程艺龙资深架构师牛提罚老师，关于小程序性能监控系统全方位的实践分享。
Vue 被一个健康的插件和包的生态系统所加强，使开发变得可靠、快速和简单。由于Vue 是一个国际开发者社区所选择的框架，所以有一个不断增长的插件和包库，你可以在项目中使用。本文列举了用于Vue 2和Vue 3的 15个 流行的 Vue 插件。
现在用户上网大多使用移动设备或者笔记本电脑。对这两者来说，电池寿命都很重要。在这篇文章里，我们将讨论影响电池寿命的因素，以及作为一个web开发者，我们如何让网页耗电更少，以便用户有更多时间来关注我们的内容。
图来源网络 前端插件以及部分细分网址梳理 插件 parallel.js: 前后端通用的一个并行库 zepto: 用于现代浏览器的兼容 jQuery 的库 totoro: 稳定的跨浏览器测试工具 TheaterJS: 一个用于模拟人输入状态的 JS 库 stellar.js: 前端用于实现异步滚动效果的库，现已不再维护 skrollr: 另一款实现一步滚动的开源库，使用人数众多，可实现各种狂拽酷炫掉渣天的前端效果，看真相 Framework7: 前端框架，是开发人员可以基于 web 技术构建 IOS7 程
本文主要介绍了滚动视图组件（scroll-view）的各种常用功能，例如，垂直和水平滚动、滚动事件等，并通过例子代码来演示这些功能的使用方法。
事件流 这一概念源自于对事件触发对象的思考。例如常见的点击事件，鼠标移动事件。这些事件发生之时，往往不只是点击或者移动到某一特定元素上。 比如点击某一个按钮，而它是由上一层的父标签，或许在上一层还有父标签甚至是整个页面。因此点击一个元素可以看成是同时点击了父标签或者整个页面。那么此时事件应该怎么响应到指定标签呢？ 事件冒泡 即事件从指定元素开始传播到最外层的元素，并且该事件不仅会在指定元素上发生，还会在传播过过程中的每一个元素上发生。 <html> <body> 02
《腾讯开源微服务框架Tars新添Node.js和php语言版本》一文介绍了腾讯开源的微服务框架Tars，以及Node.js和php版本的Tars-nodejs和Tars-php。Tars支持多语言，具有高性能、易用性强、扩展性好等特点。目前，Tars已在160多个业务中投入使用，并获得了腾讯公司的置顶推荐。
selenium并不是万能的，有时候页面上操作无法实现的，这时候就需要借助JS来完成了。
从事单页相关的开发一年有余，期间无比的推崇webapp的网站模式，也整理了很多移动开发的知识点，但是现在回过头来看，webapp究竟是好还是不好真是一言难尽哟！
iSlider是一个表现出众，无任何插件依赖的手机平台javascript滑动组件。它能够处理任何元素，例如图片或者DOM元素
超喜欢本周的 GitHub 热点，如果你是个 Windows 用户，但又不得不用 Linux GUI 软件，这次微软帮你解决烦恼，WSLg 能让你用上大量 Linux GUI 软件，Just for you。当然一样让人惊喜的还有 triangula，这个用遗传算法实现了小鱼干最喜欢的几何风格设计，随便上传一张照片，即刻进行进行三角剖分，得到一张颇有设计感的三角图片。智能相片管理器 phototopism 也让人很欢喜，无需你添加任何标签，自动标识图片信息，让你方便快速找到往日记忆。
滚动条操作 浏览器滚动条并没有提供相应的操作方法。在这种情况下，就可以借助JavaScript也就是JS来控制浏览器的滚动条。 WebDriver提供了execute_script()方法来执行JavaScript代码。 js="window.scrollTo(100,450);" driver.execute_script(js) 当页面上的元素超过一屏后，想操作屏幕下方的元素，是不能直接定位到，会报元素不可见的。 这时候需要借助滚动条来拖动屏幕，使被操作的元素显示在当前的屏幕上。 滚动条是无法直接用定位工具来定位的。selenium里面也没有直接的方法去控制滚动条，这时候只能借助JS了，还好selenium提供了一个操作js的方法: execute_script()，可以直接执行js的脚本。 --scrollHeight 获取对象的滚动高度。 --scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。 --scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。 --scrollWidth 获取对象的滚动宽度。
当页面上的元素超过一屏后，想操作屏幕下方的元素，是不能直接定位到，会报元素不可见的。这时候需要借助滚动条来拖动屏幕，使被操作的元素显示在当前的屏幕上。滚动条是无法直接用定位工具来定位的。selenium 里面也没有直接的方法去控制滚动条，这时候只能借助 J 了，还好 selenium 提供了一个操作 js 的方法:execute_script()，可以直接执行 js 的脚本
很多时候，我们希望有一种方法可以避免某种CSS问题或行为的发生。我们知道，网页内容是动态的，网页上的东西可以改变，从而增加了出现CSS问题或奇怪行为的可能性。
google developers 官方文档: https://developers.google.com/web/tools/chrome-devtools/
在做web自动化时，有些情况playwright的api无法完成以及无法应对，需要通过或者借助第三方手段比如js来完成实现，比如：去改变某些元素对象的属性或者进行一些特殊的操作，本文讲解playwright怎样来调用JavaScript完成特殊操作。
QQ 作为国民级应用，从互联网兴起就一直陪伴着大家，是很多用户刚接触互联网就开始使用的应用。
这套工具集中的大部分你可能见过，也可能没见过，如果有哪个/些让你眼前一亮，那么我的分享就很值了。 这个列表包含许多种类的资源，所以这里我将它们分组整理。 Javascript 库 📷 Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库 Fullpage.js— 快速实现全屏滚动特性 Typed.js — 打字机效果 Waypoints.js — 滚动到某个元素位置时触发一个功能 Highlight.js
iScroll是一个高性能，资源占用少，无依赖，跨平台的javascript上拉加载，下拉刷新的滚动插件，目前版本v5.2.0。
3.这里可以修改scrollTop 的值，来定位右侧滚动条的位置，0是最上面，10000是最底部。
代码已上传至github github代码地址：https://github.com/Miofly/mio.git
前段时间刚给大家推荐了一个强大易用的跨平台 CSS3 动画库 Animate.css，内置了很多常用的 CSS 动画，可以一行代码让页面动起来。
TSINGSEE青犀视频目前正在研发基于车载视频监控的新功能，包括轨迹跟踪、轨迹回放等。轨迹跟踪适用于车载监控场景，基于车内的车载监控装置，可以实时记录车辆的位置、行驶轨迹等信息，并且在轨迹回放中，能对车辆的行驶路线过程进行回放，掌握车辆的历史行踪。该功能对于车辆、车队的管理具有十分重要的意义。
在做web自动化时，有些情况selenium的api无法完成，需要通过第三方手段比如js来完成实现，比如去改变某些元素对象的属性或者进行一些特殊的操作，本文将来讲解怎样来调用JavaScript完成特殊操作。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
云直播
