前言，最近利用碎片时间拜读了一下尼古拉斯的另一巨作《高性能JavaScript》，今天写的文章从“老生常谈”的页面重绘和重排入手，去探究这两个概念在页面性能提升上的作用。 有经验的大佬对这个概念一定不会陌生，“浏览器输入URL发生了什么”。估计大家已经烂熟于心了，从计算机网络到…

划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了 要实现上图的效果看似很简单，实则暗藏玄机，本文总结了一下CSS实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下，我将

之前面试今日头条的时候，今日头条面试官问我，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？所以，接下来我就来对css加载对DOM树的解析和渲染做一个测试。 假设结果: 在bootstrap.css还没加载完之前，下面的内容不会被解析渲染，那么我…

不久之前Firefox和Safari浏览器已经开始支持类似Photoshop的混合模式，但是在Chrome和Opera浏览器中需要添加前缀。举个栗子： 现在，你甚至可以在边框中使用渐变。 具体的例子可以看这里，或者看这里使用的是background-clip和backgroun…

1. 视口 viewport viewport 解释为中文就是‘视口’的意思，也就是浏览器中用于显示网页的区域。在 PC 端，其大小也就是浏览器可视区域的大小，所以我们也不会太关注此概念；而在移动端，绝大多数情况下 viewport 都大于浏览器可视区，保证 PC 页面在移动浏…

white-space、word-break、word-wrap（overflow-wrap）估计是css里最基本却又容易让人迷惑的三个属性了，估计很多人都有把它们搞混或用错的经历。必须系统整理一下，今天我们就把这三个属性彻底搞清楚！ 可以看到，nbsp;和</br>可以正常发…

就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascrip…

随着移动端市场的份额越大，需求就越多样化。我们今天讨论的是移动端的滚动穿透问题。上面这段调侃的话可以看出需求中弹窗浮层还是挺常见的，那这个和滚动穿透有什么联系呢？ 接下就说下我对滚动穿透问题解决方案探索的过程，希望对大家有点启发。 接到这个需求觉得没有难度，很快就提测了，然后就…

实际项目开发时候需要实现圆环加载及数字滚动的效果,接下来分享下自己的实现思路和做法。 vue本身就是根据数据来驱动view层的显示,实现数字的滚动本质就是设置一个延迟函数改变数据的同时，view层的显示也会随着改变达到渐变的效果。 逻辑部分抽离出来放在 countup.js文件…