1. 为什么用 webp? 同样的质量下，更小的体积，更快的加载速度。 缩短的加载时间远远大于解码所需要的时间。 2. webp兼容问题 webp的兼容性不是很乐观，尤其在ios safari上一片红。 这里我们在客户端用js检测是否支持WebP，支持请求webp图片，不支持保…

性能优化需要从哪几个方面入手？我们要先了解浏览器打开网页的过程。 下面我们分别对这几个阶段进行优化。 DNS全称Domain Name System。它是互联网的“通讯录”，它记录域名与实际ip地址的关系，域名是为了方面人类记忆。每次我们方位一个网站，都要通过各级的DNS服务器…

本文核心分为两部分，第一部分讲述普通浏览器中能干的事情，第二部分则讲述在自建容器的背景下更能干的事情。 文章内容会比较粗略，如果你对具体实现感兴趣，欢迎在 这 留言。 通常情况下，一个 html bundle 里面一般会有 script 等标签去加载其他的资源。浏览器在加载完 …

最近在做一个基于mobile app的漫画的项目，面向印尼市场。 上线后，基本测试没有问题，打开也挺顺畅。但是google analytics却反馈加载平均19s！ OMG～～于是开展了一系列的探索。。 首先说说技术栈，用的是create-react-app,redux,rea…

搞技术的都知道，TCP 的三次握手和四次挥手的过程。在这里，为了不那么无聊枯燥，笔者想用通俗的文字来描述一下 TCP 的三次握手，作为开头。 很久很久以前，有两个球球，一个叫 ‘小青蛙’，一个叫‘小乌龟’，分住在山的两段。这两个球球都有 一张嘴巴 和 两只耳朵，但都看不见。有一…

还有些回流会带来更多的性能损耗，比如你把页面顶部的一个div设置了动画或者拉大了，导致页面下面其他部分都下去了。 因为渲染树的回流和重绘比较损耗，浏览器目标在于减小负面影响。一个策略就是根本不做这件事情，至少现在不做。浏览器把你写的更改放在一个队列里然后批量执行。用这种方法将会…

现在项目中列表页都会做成分页的形式，但是仍然存在一些场景：后端返回所有数据（可能成千上万条），前端渲染。下面提供几种解决思路。 通过console.timeEnd('loopTime')获取代码执行时间。 在上图中我们发现log很快打印，且只有几百毫秒；但是左上角却一直在loa…