#浏览器

性能优化一直以来都是前端工程领域中的一个重要部分。很多资料表明,网站应用的加载速度、交互流畅度等性能优化对于提高用户留存、转化率等都有积极影响。可以理解为,提升你的网站性能,就是提升你的业务数据,甚至是业务收入。

虽然大家对性能优化都有自己的思路,不过大多是分散在某几个点,较难形成一个完整的体系。业界也有很多优质的资料,但是性能优化作为一个系统性工程,大家想要系统性地去学习并不容易。所以在这次的「性能优化之旅」会通过与 Web 应用的访问流程相结合,帮助大家 全面理解与掌握 前端的性能优化。

如果准备好了,咱们就可以出发了 🔜

阅读更多>>

今天带大家一起来看看下,如何实现“划词高亮”功能。

笔者前段时间为线上业务实现了一个与内容结构非耦合的文本高亮在线笔记功能。非耦合是指不需要为高亮功能建立特殊的页面 DOM 结构,而高亮功能对业务近乎透明。该功能核心部分具有较强的通用性与移植性,故拿出来和大家分享交流一下。

阅读更多>>

在浏览器中,我们可以同时打开多个 Tab 页,每个 Tab 页可以粗略理解为一个“独立”的运行环境,即使是全局对象也不会在多个 Tab 间共享。然而有些时候,我们希望能在这些“独立”的 Tab 页面之间同步页面的数据、信息或状态。这就是我们所说的前端跨页面通信。

阅读更多>>

前端如何实现广播式通信呢?Broadcast Channel 就是一个好方法。它会创建一个所有同源页面都可以共享的(广播)频道,因此其中某一个页面发送的消息可以被其他页面监听到。

阅读更多>>

TL;DR

  • 可以考虑基于HTTP Cache来定义打包维度,将Cache周期相同的script尽量打包在一起,最大限度利用Cache;
  • 合并零散的小脚本,避免触发浏览器并发请求限制后,资源请求串行,TTFB叠加等待时间;
  • 注意打包后的资源依赖与资源引入顺序。

阅读更多>>

前段时间碰到一个需求:在表单中有一个字段叫金额,用户希望点击该输入框后(focus),能够自动为其金额数字后加上“万元”两个字。虽然这个需求可以通过其他的设计方式规避(例如在文本框后加入“万元”等),但是,既然碰到了问题,肯定还是希望能够研究一下技术解决方式。

对这个需求进行抽象,其实需要完成的任务就是:通过js来控制输入框内光标的位置。要完成这个任务,需要介绍一个input元素的方法: HTMLInputElement.setSelectionRange()

阅读更多>>

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×