一般返回顶部都是直接用 JS 实现的,但是我不懂 JS ,写个 console.log 我都不会就不用说写返回顶部了。那就直接用回最原始的方法:锚点定位。 锚点定位其实很好用,但主要是太生硬了,点一下定位就瞬间冲过去了,没有任何过渡。很多人用JS来做返回顶部而不用 CSS 可能就是锚点定位的这个缺点。
学习原生js的人一定会接触到client家族、scroll家族和offset家族。其中clienHeight、scrollHeight和offsetHeight一般用来求网页内容的高度,而对应的clientWidth、scrollWidth和offsetWidth则用来求网页内容的宽度,由于width和Height属性是类似的,所以这里我只挑这三个height来讲一下。
简而言之,WebRTC就是W3C定的一个Web标准,用来做二进制数据传输用的,各浏览器只要支持WebRTC,就可以不通过插件,直接在Web端实现诸如音频、视频、文件等二进制数据的传输。方便之处在于:不需要再使用Flash、Silverlight之类的插件了。but!理想很丰满,现实往往很残酷,WebRTC从诞生之初到现在仍然还有很多地方布满了坑。
大多数设备的刷新频率是60Hz,也就说是浏览器对每一帧画面的渲染工作要在16ms内完成,超出这个时间,页面的渲染就会出现卡顿现象,影响用户体验。前端的用户体验给了前端直观的印象,因此对B/S架构的开发人员来说,熟悉浏览器的内部执行原理显得尤为重要。
遇到问题:document.getElementsByClassName(…)[0] is undefined 选择框如果是select标签的,可以直接用select专用的方法去定位点击操作。其它不是select选择框的时候,那就按正常操作步骤先点输入框,再点选项就行了。 可是有些选择框就是不听话,你会发现用selenium死活定位不到,这个时候只能用万能的js来解决了。
前段时间,我将精力专注在Web性能领域;在这个领域下有个重要的课题是如何让网页更丝滑(流畅)。
关注 JS 太久,会养成任何功能都用 JS 实现的习惯,而忘记了 HTML 与 CSS 也具备一定的功能特征。其实有些功能用 JS 实现吃力不讨好,我们要综合使用技术工具,而不是只依赖 JS。
目前web前端采用的直播技术一般分为以下几类:rtp/rtcp、rtmp、http-flv、hls。下面介绍不同协议
图片懒加载是一个很重要的前端性能优化手段。这篇文章将从懒加载的最简单场景开始介绍,逐步增加复杂度,希望能讲清楚常见的图片懒加载场景及在该场景下对应的解决办法,也希望对你有所帮助。
作者:齐修_qixiuss https://www.jianshu.com/p/a32b890c29b1
节流指的都是某个函数在一定时间间隔内只执行第一次回调。举个常见的节流案例:我们把某个表单的提交按钮——button 设成每三秒内最多执行一次 click 响应;当你首次点击后,函数会无视之后三秒的所有响应;三秒结束后,button 又恢复正常 click 响应功能,以此类推。
今天又遇到了一个非常奇葩的问题,在微信打开 H5 页面,拉到底,会抖动,右侧一半被白色的东西挡住, checkbox 多选框移位等,莫名其妙。如图:
对于大量操作 DOM 的场景,页面时常会出现卡顿现象,导致用户体验不佳。卡顿的原因是由于掉帧导致!!
传送门:https://segmentfault.com/a/1190000022994032
1、前言 2017 年 12 月,微信小程序向开发者开放了实时音视频能力,给业内带来广阔的想象空间。连麦互动视频直播技术在 2016 年直播风口中成为视频直播的标配,然而只有在原生的 APP 上才能保障良好的用户体验。 那时候,在微信小程序中无法进行实时音视频互动。微信小程序在去年 12 月宣布开放实时音视频能力,再加上去年 6 月苹果宣布即将支持 WebRTC,业内一下子千树万树梨花开,前途一片光明。 连麦互动直播技术和微信小程序以及 WebRTC 能产生怎么样的化学作用?开发者在微信小程序或者浏
衡量以用户为中心的网页性能是具有挑战性的。为了应对这一挑战,谷歌开发了一系列名为 Web Vitals 的指标。这些 Web Vitals 是衡量网页性能不同方面的信号。例如,首字节时间(TTFB)是其中之一:从浏览器的角度来看,TTFB 衡量了请求资源和响应的第一个字节开始到达之间的时间。
https://www.lodashjs.com/docs/lodash.throttle
用JS操作DOM,是比较慢的。为什么呢?首先,补充一下浏览器相关的知识。下图为浏览器结构:
一、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。
renderer与DOM元素是相对应的,但并不是一一对应,有些DOM元素没有对应的renderer,而有些DOM元素却对应了好几个renderer,对应多个renderer的情况是普遍存在的,就是为了解决一个renderer描述不清楚如何显示出来的问题,譬如有下拉列表的select元素,我们就需要三个renderer:一个用于显示区域,一个用于下拉列表框,还有一个用于按钮。
Flutter for Web官方的Github库地址:https://github.com/flutter/flutter_web ,此存储库包含面向Web 的 Flutter 分支的源代码 。Flutter团队的目标是把Web与iOS和Android一起添加到Flutter SDK中的第一层平台。此存储库中的代码提供实现(几乎)整个Flutter API的纯Web包。
大家知道。我们每天都在谈前端性能优化,每天都在背前端性能优化方案,然而,我们却不知道他背后的原理以及涉及那些知识储备。所以,我问了自己一些问题,
本文主要讲述,关于 Chrome Content Download 时间过长问题调查经过,及相关优化方案
我们在谈及一个页面性能如何时,说的是页面的加载速度快不快,页面交互是否顺畅不卡顿。
架构 整理分为两层: 应用层、核心层 绿色部分是核心部分, 是WebRTC提供的核心功能; 紫色部分是浏览器提供的JS的API层; 即 浏览器对WebRTC核心层的C++ API 做了一层封装
H5 项目是企鹅辅导的核心项目,已迭代四年多,包括了课程详情页/老师详情页/报名页/支付页面等页面,构建产物用于企鹅辅导 APP/H5(微信/QQ/浏览器),迭代过程中了也累积了一些性能问题导致页面加载、渲染速度变慢,为了提升用户体验,近期启动了 “H5 性能优化” 项目,针对页面加载速度,渲染速度做了专项优化,下面是对本次优化的总结,包括以下几部分内容:
企鹅辅导 H5 页面在长期迭代过程中,逐渐累积了一些性能问题,导致页面加载、渲染速度变慢。为了提升用户体验,近期针对页面加载速度,渲染速度做了专项优化,本文是对此次优化的实践总结。分析过程比较细致,希望能给性能分析经验欠缺的同学一些帮助。 项目背景 H5 项目是企鹅辅导的核心项目,已迭代四年多,包括了课程详情页/老师详情页/报名页/支付页面等页面,构建产物用于企鹅辅导 APP/H5(微信/QQ/浏览器),迭代过程中了也累积了一些性能问题导致页面加载、渲染速度变慢,为了提升用户体验,近期启动了 “H5 性能优
WebRTC (Web Real-Time Communications) 是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和(或)音频流或者其他任意数据的传输。WebRTC包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下,创建点对点(Peer-to-Peer)的数据分享和电话会议成为可能。
npm install之后(有时候项目会自动生成,就无需npm install了), package.json 是 记录第三方库依赖 的目录, node_modules 存放 第三方库依赖模块:
WebRTC 只是一个媒体引擎,上面有一个 JavaScript API,所以每个人都知道如何使用它(尽管浏览器实现仍然各不相同),本文对 WebRTC(网页实时通信)的相关内容进行简要介绍。
携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第11天,点击查看活动详情 >>
DOM 是表述 HTML 的内部数据结构,它会将 Web 页面和 JavaScript 脚本连接起来,并过滤一些不安全的内容。HTML 解析器 (HTMLParser) 模块负责将 HTML 字节流转换为 DOM 结构。网络进程接收到响应头后会根据响应头中的 content-type 字段来判断文件的类型,若为 text/html,则为该请求创建一个渲染进程。渲染进程准备好后,网络进程和渲染进程之间会建立一个共享数据的管道,HTML 解析器并不是等整个文档加载完成之后再解析,而是网络进程加载了多少数据,HTML 解析器便解析多少数据。
最近在node中使用?.可选链运算符, 报错了,(Obj层级深时,避免多层if判断) 查了了一下是因为node的版本号太低了(12.18.2),需要升级到14以上才能使用可选链运算符 那如果不想升级n
不同的平台(Mac、PC等)有不同的调色板,不同的浏览器也有自己的调色板。这就意味着对于一幅图,显示在Mac上的Web浏览器中的图像,与它在PC上相同浏览器中显示的效果可能差别很大。选择特定的颜色时,浏览器会尽量使用[2]本身所用的调色板中最接近的颜色。如果浏览器中没有所选的颜色,就会通过抖动或者混合自身的颜色来尝试重新产生该颜色。
https://webrtchacks.com/troubleshooting-unwitting-browser-experiments-al-brooks/
2017 年 12 月,微信小程序向开发者开放了实时音视频能力,给业内带来广阔的想象空间。连麦互动视频直播技术在 2016 年直播风口中成为视频直播的标配,然而只有在原生的 APP 上才能保障良好的用户体验。
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。 包括以下工具:
有时你可能需要终端输出许多图片,那么现在就让我们在Linux终端打开一个新窗口显示图片。
本节讲Dom和Bom模型概念讲解(节点获取,window对象)。 out.js: 写了2个输出到页面的函数。
最近在研究页面渲染及web动画的性能问题,以及拜读《CSS SECRET》(CSS揭秘)这本大作。 本文主要想谈谈页面优化之滚动优化。 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动。因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读。 滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件。简单的看看: var i = 0; window.addEv
随着互联网的持续发展,H5 页面作为与用户直接交互的表现层越来越复杂,呈现的形式也越来越丰富,从而也要求 H5 页面具有更多的花样性及动画效果。那前端实现动画效果的方式有哪些呢,大致有如下几种:
很多企业都会特别注重自己产品的体验,尤其是移动端,那移动端的体验为什么这么重要?首先体验本身就很重要,好的体验带给用户的感受是截然不同的,用户选择使用一个产品除了产品本身功能满足需求之外,还有一个更重要的原因就是产品用起来“爽”,产品整个使用流程必然是舒适自然,才能受到大众喜爱;此外,产品体验已成为市场竞争力之一,借用人人都是产品经理上面对体验的论述:
做测试这一行,总有一道绕不过去的坎就是定位bug,这其实是非常花费时间的。也许有很多人不以为然,觉得无非就是发现bug后提交bug管理系统,描述操作步骤,预期结果和实际结果哪里不一致,然后继续测试。并不是说这样做的不对,只是说这样做的不够好,看似节约了测试时间,实则对于项目的进度没有起到应有的推动作用。学会定位原因也是自我提升的一个过程
使用能快速调用移动设备的电话/短信/邮件三大通讯功能,使用<input>能快速调用移动设备的的图库/文件。 这些功能方便了页面与系统的交互,关键在于调用格式一定要准确,否则会被移动端浏览器忽略。
不知不觉在网易已有三年半,占了一半时间都在与移动端打交道,整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android和iOS各显神通,Android的系统版本和屏幕分辨率多得难以一招兼容,iOS的顽固标准和未知特性多得难以快速掌握。
大家知道HTML5播放器曾被广泛运用于视频点播,而今天我想与大家分享的是运用在直播领域的HTML5播放器。现在熊猫已不再使用FLVJS作为播放器了,所以今天与大家探讨一下直播HTML5播放器的技术难点与架构探索。
领取专属 10元无门槛券
手把手带您无忧上云