![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
玲珑骰子安红豆
文章平均质量分 95
YITA90
屋漏偏逢连夜雨
展开
-
如何将你的项目迁移成 TypeScript
我们都曾遇到过,一个 JavaScript 开发的项目,发现了一个 bug, 调试了半天,发现问题原因是 undefined is not a function。我个人很喜欢 JavaScript,但随着项目功能的增多,代码会越来越多,某些问题会一次又一次地出现。 为了避免 undefined is not a function 类似 bug,我们可以为类型加定义。TypeScript就是来帮助我...翻译 2020-01-16 10:22:50 · 1199 阅读 · 0 评论 -
服务器计时 - 如何查看 iPlayer 的性能
对于用户来说,了解 BBC iPlayer 网站的加载时长,一直是一个巨大的挑战。幸运的是,浏览器目前有一系列功能可以帮我们弄清楚这件事。开发者工具在分析和监控浏览器性能方面特别有效,但是缺乏足够的方法来显示在从服务器接收响应之前花费的时间, 这就给了“服务器计时”挽救这一问题有了用武之地。这项功能已经开发了一段时间了,官方的 W3C 版本应用在 Chrome 65上,该版本于上周3月6日发布。...翻译 2019-09-30 11:14:16 · 290 阅读 · 0 评论 -
分析一个React应用程序的性能
如何使用 React DevTools 和 React 的 Profile 来正确分析生产应用程序。The React DevTools是一款非常棒的软件,而且可以作为 Chrome 和 Firefox 的浏览器扩展,便于在随时随地链接 React 应用。React DevTools 最酷的功能之一就是它的分析功能。profiler 包括很多东西,本文不一一列举,但是会教你如何开始使用 Re...翻译 2019-09-30 11:11:28 · 542 阅读 · 0 评论 -
什么是 TTFB, 为什么 TTFB 很重要
原文地址:https://csswizardry.com/2019/08/time-to-first-byte-what-it-is-and-why-it-matters/目录什么是TTFB神秘的TTFB我现在正在做一个客户项目,因为他们是一个电子商务网站,所以有很多方面的性能都需要关注:加载时间是一个重要的开始。开始渲染是用户快速查看信息的关键。(提示:这就是全部...翻译 2019-09-12 10:46:01 · 6046 阅读 · 0 评论 -
教你玩转数组 reduce
reduce 是数组迭代器里的瑞士军刀。 它强大到您可以使用它去构建大多数其他数组迭代器方法,例如.map()、.filter() 及 .flatmap ()。在这篇文章中,我们将带你用它来做一些更有趣的事情。 阅读前,我们需要您对数组迭代器方法有一定的了解。Reduce是迄今为止发现的最通用的功能之一Eric Elliott使用 reduce 做加法乘法还可以,可一旦要超出现有基础示例...翻译 2019-05-30 15:37:45 · 368 阅读 · 0 评论 -
Netflix Web 性能案例研究
对于网页性能来说,没有完美的解决方案。简单的静态页面可以通过精简 Javascript 代码,进行服务端渲染来提高效率。复杂页面可以通过引用库,来提高。Netflix 是最受欢迎的视频流服务之一。自2016年在全球化以来,公司发现许多新用户不仅使用移动设备进行注册,而且还使用不太理想的设备进行登录。通过改进用于 Netflix.com 注册流程,使用预请求 JavaScript 的技术,开发人...翻译 2019-05-27 17:01:35 · 422 阅读 · 0 评论 -
一个用于解决 React 常见问题的 Checklist
原文地址:https://logrocket-blog.ghost.io/death-by-a-thousand-cuts-a-checklist-for-eliminating-common-react-performance-issues/这是一份非常实用的,一步步解决 React 性能问题的清单。你想不想让你的 React 应用程序运行更快?想不想有一份清单来检查常见的 React...翻译 2018-11-09 15:01:18 · 518 阅读 · 0 评论 -
使用 CSS Grid 实现表单布局的优势
表单布局和设计一直是网页设计和开发中令人头疼的一部分。 尝试过写 <select> 标签的样式,或者在所有浏览器中都居中一个 label 的人感触肯定更深。原文链接:https://www.sitepoint.com/css-grid-web-form-layout/在2016年,我写了一篇文章标题为 "Make Forms Fun with Flexbox",文中指出了如何使...翻译 2018-10-11 10:21:54 · 1615 阅读 · 0 评论 -
【译】页面生命周期API
现代浏览器有时在系统资源受限时,会出现页面卡死或完全丢弃页面的情况。 在未来,浏览器希望让用户可以消耗更少的资源和内存,更加积极主动地做这件事。页面生命周期 API,运行在 Chrome 68 中,提供了生命周期的钩子,你可以在不影响用户体验的情况下,安全的去处理浏览器响应。 接下来我们就详细的了解一下这个 API,看看你是否会在应用中尝试使用这些特性。 原文链接:https:...翻译 2018-09-07 16:49:18 · 689 阅读 · 0 评论 -
ECMAScript 2016, 2017, 2018 新特性之必读篇
原文链接地址:https://medium.freecodecamp.org/here-are-examples-of-everything-new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70eJavaScript (ECMAScript). 版本的频繁更新,让我们很难去跟进又新增了哪些新特性。就不要说,找一些实用的代码示例。但在这篇文...翻译 2018-04-16 11:30:49 · 4877 阅读 · 0 评论 -
使用设备检测(Device detection)的 JS 服务端渲染(SSR)
原文链接:https://mobiforge.com/design-development/javascript-server-side-rendering-with-device-detection服务器端渲染有何优势?自从由 JavaScript 框架负责页面渲染后,就出现了在生成页面之前,需要下载和执行一大堆 JavaScript 来获取资源的问题。在移动设备处于弱网情况下的时候,或者老旧的翻译 2017-05-24 13:49:30 · 2552 阅读 · 0 评论 -
Base64 编码和性能,第 2 部分
原文链接: https://csswizardry.com/2017/02/base64-encoding-and-performance-part-2/这是这篇文章的第 2 部分。阅读第 1 部分。阅读这篇文章之前我会默认你已经阅读过第一部分。如果没有,我建议你先去阅读一下第一部分。在样式表中插入 Base64 编码的内容资源(主要是图片)引起争议之后,我决定收集一些数据。 我做了一个简单的测翻译 2017-05-03 20:37:40 · 1045 阅读 · 0 评论 -
Base64 编码和性能,第 1 部分
原文链接:https://csswizardry.com/2017/02/base64-encoding-and-performance/作者:Harry Roberts 来源:CSS Wizardry本文一共分为两篇。阅读第 2 部分。几年前我们只是单纯的考虑,“减少请求数量”,使页面加载速度更快。虽然这是一个合理化的建议,但实际上,我们还可以通过合理的分配资源的请求数,来达到我们的目的。Ba翻译 2017-03-10 15:42:09 · 547 阅读 · 0 评论 -
元素查询:未来的响应式设计
原文链接:https://webdesign.tutsplus.com/tutorials/element-queries-the-future-of-responsive-web-design–cms-26945媒体查询是现代网页设计的重要组成部分,但他并不总是完美的。在这篇文章中,我们将看看许多人一直在争论的关于响应网页设计的未来 “元素查询” 的理念 。前言Ethan关于响应式设计 的文章的翻译 2016-12-09 09:08:43 · 663 阅读 · 0 评论 -
如何使用CSS栅格布局创建一个简单页面布局
如何创建一个简单的布局与CSS网格布局如果你从未涉猎过印刷设计,你可能就不知道网格布局的思想起源。网格是用来定位一个页面上的设计元素的精确测量工具。这种想法经常被用来在网页上进行内容组织和统一,提升用户的视觉体验。网页设计刚起步的时候,设计和布局都是是相当简单的, 包含头部,侧边栏,内容区域和页脚。现在,随着网络的演变,网页的布局也变得更加复杂,我们也有了更多的网页设计师来摆平他们。我们经常需要大量翻译 2016-10-08 15:37:25 · 6877 阅读 · 0 评论 -
如何使用 PostCSS 在样式表中处理图片
原文链接: https://css-tricks.com/images-in-postcss本文摘自guest网Aleks Hudochenkov。Aleks 在这里给我们展示了POSTCSS在前端开发中,所擅长的领域。 也就是,越少的去用CSS。你即将看到各种与处理图像的PostCSS插件。最后,我敢肯定你能够想像POSTCSS在CSS中的重要性。我们平时也一直在用CSS处理图片。但我们甚至可能翻译 2016-06-02 09:59:53 · 7910 阅读 · 1 评论 -
CSS传送门
你不一定必须使用javascript才能在浏览器端构建惊心动魄的3D效果的项目。在这篇文章中,我将介绍一种纯CSS实现的复杂的动画效果。传送门在线演示地址,Github源码地址原始视频视频展示了3D动画场景的构建,美化及动画效果。这篇文章我们将使用CSS3重绘这个传送门视频。重点介绍人物从一个门穿到另一个门的过程。下面是原始视频:这个视频在第一次发布的时候,就深深的印在了我的脑海中。传送门(创始人翻译 2016-06-03 09:53:41 · 5757 阅读 · 0 评论 -
从今天起开始使用 CSS 属性 calc()
原文地址:Getting Started With CSS calc()四年前,看了CSS3 Click Chart这篇文章之后,我第一次发现了calc() ,我当然非常高兴能够看到,基本的数学运算-加法,减法,乘法和除法-能够在CSS中应用。大部分人可能会觉着预处理就可以实现逻辑运算。但是预处理器只能同单位的运算,如角度单位,时间单位,频率单位,分辨率单元和固定长度单位。而calc()可以实现混翻译 2016-06-03 09:55:01 · 12241 阅读 · 0 评论 -
CSS3的nth-child选择器
原文链接:https://grack.com/blog/2015/01/09/abusing-css3-selectors/如果你对这篇文章感兴趣,可以了解更多的有关 CSS4 的知识来提升自己。CSS3的:nth-child 和 :nth-last-child 选择器的神奇之处,不仅仅是可以替代 :first-child 和 :last-child 选择器,它还可以匹配更为复杂的子元素,比如翻译 2016-06-03 09:54:17 · 1994 阅读 · 0 评论