性能是每个前端工程师都应该关注的话题，通用的优化手段已有许多文章和实践，就不再赘述，本篇以百度App个人主页为例，聊聊针对业务特点进行的一些性能优化实践。 适用于：传统意义的优化手段能用的都用了：打包拆包，缩减体积和 HTTP 请求数、CDN和按需加载等，但性能方面仍不太理想。…

对于一个纯前端页面来说，通过ajax获取页面数据是很常见的操作。对于React来说网上曾有过很多关于在componentWillMount和componentDidMount哪个里请求好。官方的推荐是后者： 不过这里我们讨论的是哪里请求最"快"。虽然这个问题不是本文讨论的目的，…

移动互联网时代,用户对于网页的打开速度要求越来越高。百度用户体验部研究表明,页面放弃率和页面的打开时间关系如下图 所示。 根据百度用户体验部的研究结果来看,普通用户期望且能够接受的页面加载时间在 3 秒以内。若页面的加载时间过慢,用户就会失去耐心而选择离开。 首屏作为直面用户的…

由DOM或者布局的变动而触发。 如你改变了一个div的位置，或者是改变了这个div的width, height, position 或者布局类的样式。 通过一次完整的web请求和渲染过程以及如何优化网页，我们可以知道页面渲染的时候，会忽略掉display: none这一类的不占…

在 2020 年的互联网流量中，移动端和桌面端各占半壁江山。Google 在索引页面时，会根据网站的移动版本来确定网站排名。相当多的年轻用户甚至不再使用桌面设备。 上述三个事实说明了为什么现在针对移动端访问来优化网站比以往任何时候都重要。更重要的是：移动用户更挑剔，而且潜意识里…

面试中我们经常会遇到 前端性能如何优化缓存方面的知识,对于我们而言,我们常常是束手无策。 下面来详细介绍缓存及如何利用这方面的知识. 看到一个形象的比喻，来比喻CDN。 10年前，还没有火车票代售点一说，12306.cn更是无从说起。那时候火车票还只能在火车站的售票大厅购买，而…

相比于对小图进行iamge sprite，在模块化开发模式下，当前更主流的方案是将小图转化为DataURLs。 什么是Data URLs? Data URLs是一种以data:为前缀的协议（scheme）。通过这个协议，内容创作者可以向文档中嵌入小文件。所以，Data URLs…

显然，性能是相对功能而言的，也就是在实现功能的基础上进一步考量这个实现的优劣。web前端应用的功能是提供一个界面供用户来浏览和交互，故web前端性能优化就是指如何使得用户更快地看到页面和更快地与之交互的话题。当然，业内有些观点把性能跟用户体验混为一谈，这是见仁见智的事了。但是，…