京东微信购物首页性能优化实践

作者:龙朝忠

京东微信购物首页(以下简称微信首页)曾经作为微信购物一级入口(目前替换为京喜小程序)一直对性能有着极高的要求,本文将介绍微信首页的一些优化经验。

一般来说产品是按以下方式进行迭代的,我认为循环的起点应该是「收集用户反馈」,我们对页面的优化依据和目标一个重要来源就是用户的反馈,因此说网页优化我们先从网页监控开始聊起。

前端 JavaScript 错误分析实践

作者:帅哥红

前言

在平日的工作中前端 badjs 是一个比较常见的问题, badjs 除了我们自身业务 js 脚本里比较明显的报错外还有依赖其他资源的一些报错,对于自身业务 js 里出现的错误很容易进行定位并修复,但对于依赖资源的错误即常见的 script error (外部 js、接口错误)定位就没那么容易了。

前端开发的工作除了完成日常的业务特性外还有一项重要的工作就是线上页面质量的运营(其中 badjs 监控及异常分析是工作内容的重要部分),本文主要讲述 script error 采集、定位、统计以及分析的的一些方法及思路,希望对大家在分析定位问题时有一定的帮助。

负责任地编写JavaScript代码:第三部分

原文地址:https://alistapart.com/article/responsible-javascript-part-3/
原文作者:Jeremy Wagner
译者:龚亮
声明:本翻译仅做学习交流使用,转载请注明来源

针对网站上存在的 JavaScript 问题,你已经尝试了所有可能解决它的​方法。比如,尽可能地依赖 Web 平台避免使用 Babel 使用较小的框架替代方案,对应用程序代码做极致化精简。然而,速度还是不够快。当网站无法像设计师和开发人员所期望的那样发挥作用时,不可避免得让我们反思:
“我们没有做到什么?” “我们写的代码能做什么?” “我们架构的哪些部分没有达到预期?”
相当一部分性能问题源于我们自己的代码,然而把责任全部归咎于我们自己会赤裸裸地忽略一个事实:相当大一部分性能问题是由外部因素导致的。

负责任地编写JavaScript代码:第二部分

你和开发团队的成员热情游说老板同意对公司的老网站进行全面的重构,你们的请求被管理层甚至是最高管理层都听到了,他们同意了。高兴之余,你和团队开始与设计、IA 等团队一起工作。没过多久,你们就写出了新代码。

重构工作一开始非常简单,就是到处安装 npm,这其实就是在快速安装生产依赖项,就像一个大学生在做桶支架,而不关心第二天早上的情况一样。

然后,你就启动了。

与大多数豪饮的后果不同,痛苦并不是第二天早上就开始的。但是……几个月后,产品所有者和中层管理人员开始感到恶心和头痛,他们想知道为什么产品推出以来,转化率和收入都下降了。然后事情会恶化到极点,CTO 周末从度假小屋回来,质问为什么网站加载速度如此之慢——如果它真的加载过。

重构时每个人都很开心,重构后没有人快乐了。欢迎来到你的第一个 “JavaScript 宿醉”。

负责任地编写JavaScript代码:第一部分

原文地址:https://alistapart.com/article/responsible-javascript-part-1/
原文作者:Jeremy Wagner
译者:刘辉
声明:本翻译仅做学习交流使用,转载请注明来源

从统计数据上看,JavaScript是性能的关键。以现在的趋势,中等大小的页面很快就会至少发送 400 KB 的 JavaScript,而这仅仅是传输时的大小,并且还是压缩后的。

不幸的是,虽然减少资源传输时间是整个性能的重要组成部分,但是压缩并不会影响浏览器处理整个脚本所需的时间。如果服务器发送了 400 KB 的压缩 JavaScript,则解压缩后浏览器需要处理的实际大小超过 1 MB。如何应对这些繁重的工作负载,取决于设备本身。 关于各种设备如何处理大批量JavaScript的文章很多,但事实是,在不同的设备之间,即使是微不足道的处理时间也会有相差很大差距。

老板的手机收到一个红包,为什么红包没居中?

本文作者@千古壹号。

前言

老板的手机收到一个红包,为什么红包没居中?

如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多。

你也许能顺手写出好几种实现方法。但大部分人的写法不够规范,经不起千锤百炼。换句话说:这些人也就面试的时候夸夸其谈,但真的上战场的时候,他们不敢这么写,也不知道怎么写最靠谱。

这篇文章中,我们来列出几种常见的写法,最终你会明白,哪种写法是最优雅的。

当然,我还会拿出实际应用中的真实场景来举例,让你感受一下标准垂直居中的魅力

Interection Observer如何观察变化

原文地址:https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/
原文作者:Travis Almand
翻译:刘辉

有很多精彩的文章探讨了如何使用Intersection Observer API,包括Phil Hawksworth,Preethi和Mateusz Rybczonek等。 我这篇文章将讲一些不一样的东西。 我在今年早些时候有幸向达拉斯VueJS聚会介绍了VueJS过渡组件,我在CSS-Tricks的第一篇文章就是以此为基础的。 在演讲的问答环节中,有人问我基于滚动事件触发过渡怎么样 - 我说当然可以,但是一些听众建议我了解一下Intersection Observer

这让我开始思考。我对Intersection Observer有基本的了解,并且能够用其完成简单的示例。 我是否知道它的工作原理而不仅仅是使用它?它到底为我们开发人员提供了什么? 作为一个资深开发者,我如何向新手甚至不知道它存在的开发者解释它的工作原理?

深度揭秘Promise注册微任务和执行过程

作者:深山蚂蚁

本文主要内容如下

  • 五段代码深入剖析 Promise 的注册微任务和代码执行过程
  • 分析 Promise/A+ 与 webkit( chrome 和 safari 内核) 的 Promise 的实现差异
  • 巩固一下,出道题

Promise 大伙太熟悉了,不过这里不讲大伙都知道的表面简单知识,而是一起来深入剖析 Promise 的注册微任务和执行的完整过程。能正确的使用 Promise 且能做到知其然知其所以然~

我们通常学习 Promise 都是基于 Promises/A+ 的实现。但是我不得不告诉你,本文还将分析该 js 实现和 webkit 的 Promise 的实现差异。具体到代码运行上的差异。

本文整体思路采取 代码例子 + 剖析讲解 的方式来解读,做到人人能懂,人人能理解的目的。

毫不夸张,如果全部读懂本文,那么 Promise 的注册和执行过程都将所向披靡,深入你的骨髓,你就是 Promise 大神

你应该知道的折叠屏收集适配

作者:龙朝忠

随着三星Galaxy Fold和华为Mate X的发布,前端同学将面临一个新的任务:折叠屏的适。折叠屏虽距离普及可能还有很长一段路,大多数公司还未将折叠屏列入适配的范围,但是提前研究下折叠屏的适配还是极好的。

折叠屏手机概况

华为Mate X

华为mate x

V8引擎和JavaScript优化建议

V8 是谷歌用于编译 JavaScript 的引擎,Firefox 同样也有一个,叫 SpiderMonkey,它和 V8 有一些不同,但总体颇为相似。我们将在本篇文章中讨论 V8。

V8 引擎的一些基础点:

  • 用 C++ 语言实现,使用在 Chrome 浏览器和 Node.js 中(以及最新版的 Microsoft Edge)
  • 遵循 ECMA-262 标准
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×