自JavaScript诞生以来，前端技术发展非常迅速。移动端白屏优化是前端界面体验的一个重要优化方向，Web 前端诞生了 SSR 、CSR、预渲染等技术。在美团支付的前端技术体系里，通过预渲染提升网页首帧优化，从而优化了白屏问题，提升用户体验，并形成了最佳实践。 通过对比，同构…

一篇文章演示如何监测项目的性能问题，一步一步来解决发现的web性能问题。使用工具Lighthouse和performance

本系列持续更新中，Github 地址请查阅这里。 这是 JavaScript 工作原理的第二章。 本章将会深入谷歌 V8 引擎的内部结构。我们也会为如何书写更好的 JavaScript 代码提供几条小技巧－SessionStack 开发小组在构建产品的时候所遵循的最佳实践。 一…

个人专栏 ES6 深入浅出已上线，深入ES6 ，通过案例学习掌握 ES6 中新特性一些使用技巧及原理，持续更新中，←点击可订阅。 为了保证的可读性，本文采用意译而非直译。 图像是web上提供的最基本的内容类型之一。他们说一张图片胜过千言万语。但是如果你不小心的话，图片大小有时高…

在项目开发中，会有一些事件高频触发的场景，为了优化此类场景，我们通常会使用两种方案 - 节流：事件高频触发中，每 n 秒执行一次。 - 防抖：事件高频触发后，间隔 n 秒执行一次。

前端性能优化可以分为三个level：静态资源优化、接口访问优化、页面渲染速度优化，在操控门槛上依次递增，优化效果上越发没有这么明显，所以很多小团队只会做到了第一个level追求极致的前端性能体验，提升自己的level，come on ~ 目录 一、静态资源优化 二、接口访问优化…

当浏览器截获到一个页面请求后，将会按照顺序做如下图所示的4件事。 首先会将所有需要加载的资源进行分类。 然后根据浏览器相关的安全策略，来决定资源的加载权限。 接着对各个资源的加载优先级进行计算和排序。 最后一步，根据加载优先级顺序来加载资源。 chrome浏览器会将资源分为14…

通常用户打开网页时,整个网页的内容将被下载并且呈现在一个页面中，虽然允许浏览器缓存页面，但是不能保证用户查看所有下载的的内容,例如一个照片墙应用,可能用户仅仅查看第一个图片之后离开，结果就是白白浪费了内存和带宽。因此我们需要当用户需要访问页面的一部分时才去加载内容，而不是一看是…

一个页面在呈现给用户之前需要经过静态资源加载、后端接口请求和渲染这三个过程，我们要做的就是在各个过程中防御可能出现的异常情况，保持流畅的用户体验，同时还要应对来自外部的攻击。 在页面内容呈现给用户之前，会一直保持loading动画的效果，避免因网络原因造成用户体验的中断。 静态…