blog
blog copied to clipboard
verymuch
积累沉淀
使用`for...in`遍历对象时，会遍历原型链上的可枚举属性，这可能会导致一些意想不到的问题。所以你一定收到过这样的建议，使用数组的`forEach`来代替`for...in`循环。 ## 一、常规试错 在使用`for...in`的时候，在适当的时机终止循环是很常用的功能。那么问题来了，当我们有此需求时，我们可能会像下面这么做。 或许我们会尝试如下代码： ``` [1, 2, 3, 4, 5].forEach(function(v) { console.log(v); //期望只输出1,2 if (v === 2) return false; }); ``` 但是，运行之后你会发现，其实`return false`并没有起作用。 然后又尝试了下面这个方法： ``` [1, 2, 3, 4,...
## 前言 相信大家应该都遇到过下面这个问题：“**HTML源码中行内元素之间的空白显示在了屏幕上**”。可能大家都有自己的小技巧来消除这些意料之外的空白。但是方法有很多，有时候不能满足于一种方法，不同的方法适合于不同的场景。就像我之前一直用的方法，今天总结了之后才发现还有更好的方法。废话不多说，接下来我给大家总结一下消除行内元素HTML源码空白的小技巧。 下文中以一个`div`中的两个`span`标签为例。我们将两个`div`内的两个`span`设为`display:inline-block;width:50%;`，会发现两个`span`元素并没有在同一行，这就是**源码中的空白导致的**。 示例图与代码如下：  HTML： ```html 左侧行内元素 右侧行内元素 ``` CSS： ```css .Resolve { width: 90%; border: 1px solid #dd4b39; color: white; } .Resolve span { display:inline-block; width: 50%;...
## 前言 众所周知，在Web开发中，缓存很重要、很有用。但同时其也很复杂。 本文将从以下5个方面全面地介绍下缓存相关的内容。 1. 缓存的判断策略 2. 必知必会的缓存基础 3. 各类缓存的优缺点 4. 缓存的最佳实践 5. 小试牛刀，看看你掌握了没有？ ## 一、缓存的判断策略 浏览器对于所请求资源的缓存处理有一套完整的机制，主要包含以下三个策略：**存储策略、过期策略、协商策略**。 其中，**存储策略发生在收到请求响应后，用于决定是否缓存相应资源；过期策略发生在请求前，用于判断缓存是否过期；协商策略发生在请求中，用于判断缓存资源是否更新。** 浏览器在应用缓存策略时，具体的判断流程如下：  上图中的缓存判断流程是浏览器在应用缓存时完整的判断流程。但是在浏览器中访问资源的方式不同也会导致判断流程的不同。**判断流程会根据不同方式跳过一些流程。** 浏览器下访问资源的方式主要有以下7种： 1. (新标签)地址栏回车 2. 链接跳转 3. 前进、后退 4. 从收藏栏打开链接...
# CSS性能优化的8个技巧 > 本文作者：[高峰](http://verymuch.site/)，360奇舞团前端工程师，W3C性能工作组成员，同时参与WOT工作组的学习。 我们都知道对于网站来说，性能至关重要，CSS作为页面渲染和内容展现的重要环节，影响着用户对整个网站的第一体验。因此，与其相关的性能优化是不容忽视的。 对于性能优化我们常常在项目完成时才去考虑，经常被推迟到项目的末期，甚至到暴露出严重的性能问题时才进行性能优化，相信大多数人对此深有体会。 笔者认为，为了更多地避免这一情况，首先要重视起性能优化相关的工作，将其贯穿到整个产品设计与开发中。其次，就是了解性能相关的内容，在项目开发过程中，自然而然地进行性能优化。最后，也是最最重要的，那就是从现在开始实施优化。 推荐大家阅读下奇舞周刊之前推的[《嗨，送你一张Web性能优化地图》](https://mp.weixin.qq.com/s/C2Zx3KPNPkgj-aHnOY43Iw)1这篇文章，能够帮助大家对性能优化需要做的事以及需要考虑的问题形成一个整体的概念。 本文将会详细介绍CSS性能优化相关的技巧，笔者将它们分为**实践型**和**建议型**两类，共8个小技巧。实践型技巧能够快速地应用在项目中，能够很好地提升性能，也是笔者经常使用的，建议大家尽快在项目中实践。建议型技巧中，有的可能对性能影响并不显著，有的平时大家也并不会那么用，所以笔者不会着重讲述，读者们可以根据自身情况了解一下即可。 在正式开始之前，需要大家对于[浏览器的工作原理](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)2有些一定的了解，需要的小伙伴可以先简单了解下。 下面我们开始介绍**实践型的4个优化技巧**，先从首屏关键CSS开始。 ## 1. 内联首屏关键CSS（Critical CSS） 性能优化中有一个重要的指标——**首次有效绘制**（First Meaningful Paint，简称FMP）即指页面的首要内容（primary content）出现在屏幕上的时间。这一指标影响用户看到页面前所需等待的时间，而**内联首屏关键CSS（即Critical CSS，可以称之为首屏关键CSS）**能减少这一时间。 大家应该都习惯于通过link标签引用外部CSS文件。但需要知道的是，将CSS直接内联到HTML文档中能使CSS更快速地下载。而使用外部CSS文件时，需要在HTML文档下载完成后才知道所要引用的CSS文件，然后才下载它们。所以说，**内联CSS能够使浏览器开始页面渲染的时间提前**，因为在HTML下载完成之后就能渲染了。 既然内联CSS能够使页面渲染的开始时间提前，那么是否可以内联所有的CSS呢？答案显然是否定的，这种方式并不适用于内联较大的CSS文件。因为[初始拥塞窗口](https://tylercipriani.com/blog/2016/09/25/the-14kb-in-the-tcp-initial-window/)3存在限制（TCP相关概念，通常是 14.6kB，压缩后大小），如果内联CSS后的文件超出了这一限制，系统就需要在服务器和浏览器之间进行更多次的往返，这样并不能提前页面渲染时间。因此，我们应当**只将渲染首屏内容所需的关键CSS内联到HTML中**。 既然已经知道内联首屏关键CSS能够优化性能了，那下一步就是如何确定首屏关键CSS了。显然，我们不需要手动确定哪些内容是首屏关键CSS。Github上有一个项目[Critical CSS](https://github.com/filamentgroup/criticalCSS)4，可以将属于首屏的关键样式提取出来，大家可以看一下该项目，结合自己的构建工具进行使用。当然为了保证正确，大家最好再亲自确认下提取出的内容是否有缺失。 不过内联CSS有一个缺点，内联之后的CSS不会进行缓存，每次都会重新下载。不过如上所说，如果我们将内联后的文件大小控制在了14.6kb以内，这似乎并不是什么大问题。 如上，我们已经介绍了为什么要内联关键CSS以及如何内联，那么剩下的CSS我们怎么处理好呢？建议使用外部CSS引入剩余CSS，这样能够启用缓存，除此之外还可以异步加载它们。 ## 2. 异步加载CSS...