闲来无事，研究一下SSR，主要原因在于上周一位后端同学在一次组内技术分享的时候说，对前后端分离、服务端渲染特别感兴趣，在他分享了后端微服务之后，专门点名邀请我下周分享服务端渲染，然后我还没同意，领导就内定让我下周分享了（其实就是下周愿意下周分享，我是那个替死鬼）。 解析HTML…

会场是每年双十一的主角之一，会场的用户体验自然也是每年最关注的点。在日趋复杂的业务需求下，如何保障我们的用户体验不劣化甚至能更优化是永恒的命题。 今年（2020）我们在不改变现有架构，不改变业务的前提下，在会场上使用了 SSR 技术，将秒开率提高到了新的高度（82.6%）；也观…

window 的 onload 事件对于前端童鞋来说肯定是熟的不能再熟了，相信大家在刚入门时，见的最多的可能就是 load 事件了。load 事件接触多了，大家就会接触到它的闺蜜 DOMContentLoaded 事件，网上有很多介绍这两个事件的文章，对它们的解释无外乎以下两种…

前端页面性能对用户留存、用户直观体验有着重要影响，当页面加载时间超过 2 秒后，加载时间每增加一秒，就会有大量的用户流失，所以做好页面性能优化，无疑对网站来说是一个非常重要的步骤。 那如何才能知道一个页面的性能情况呢？知道了页面性能情况后又如何进行优化呢？一个页面的性能指标非常…

现在许多app都嵌入了H5页面, 然而WebView加载速度慢这个问题却一直影响着用户的体验, 所以本文就如何提高H5页面的加载速度展开讨论。 首先我们需要知道为什么WebView的加载速度那么慢。H5页面的渲染速度其实主要取决于两个 如果js文件较多、解析比较复杂, 就会导致…

鉴于H5的优势，客户端的很多业务都由H5来实现，Webview成了App中H5业务的主要载体。 实践中，大部分App的H5业务将由WKWebview承载。 页面打开时间慢：打开一个 H5 页面需要做一系列处理，会有一段白屏时间，体验糟糕。 响应流畅度较差：由于 WebKit 的…

可以看出其静态资源中，不乏体积几百k~几m不等，而这些静态资源均是首次打开页面时需要下载的，并且在web应用有更新时，这些静态资源文件均会发生变化，也需要重新下载。 导致：首次打开·线上h5资源更新·网络条件差的时候，或者本地页面缓存失效的时候。 这使得移动端网页体验像一块巨石…

在 H5 + Native 的混合开发模式中，让人诟病最多的恐怕就是加载 H5 页面过程中的白屏问题了。下面这张图描述了从 WebView 初始化到 H5 页面最终渲染的整个过程。 针对 WebView 初始化：该过程大致需耗费 70~700ms。当客户端刚启动时，可以先提前初…