内容来源：2018 年 6 月 30 日，饿了么前端主管向勇在“饿了么技术沙龙・第27弹 【前端专场】”进行《h5渲染性能一瞥》演讲分享。IT 大咖说（微信id：itdakashuo）作为独家视频合作方，经主办方和讲者审阅授权发布。 前端性能按照类型来分主要分为加载性能和渲染性…

最近在阅读《高效前端：Web高效编程与优化实践》这本书，书中介绍了前端高效编程的优化实践和前端基础。本文将结合个人的理解介绍部分高效编程的例子。 表单中原生的radio/checkbox的样式各个浏览器都不太一致。要想统一样式，一种做法是自己div/span去画，然后去监听单击…

图片懒加载是一种网页优化技术。图片作为一种网络资源，在被请求时也与普通静态资源一样，将占用网络资源，而一次性将整个页面的所有图片加载完，将大大增加页面的首屏加载时间。为了解决这种问题，通过前后端配合，使图片仅在浏览器当前视窗内出现时才加载该图片，达到减少首屏图片请求数的技术就被称

这篇文章通过 FCC 上海线下和成都微信的分享，整理成文字稿顺便凑一下更新，考虑到吃瓜读者们不知道都了解到啥程度，以及我科普作者的身份（自己定的），我决定从入门到放弃的介绍一下，大致涉及： 什么是 CDN 为什么我们要用 CDN 访问原理 架构 应用与踩坑 现实世界的 CDN …

想一想，如果你希望你的网站在一秒钟之内呈现用户想看的关键信息，有哪些可行的手段？Minify，压缩，雪碧图等等。 Google的Web性能工程师 Ilya Grigorik 会告诉你，你只需要理解浏览器的关键渲染路径。

前言 本文整理自：developers.google.cn 及 高性能JavaScript，再加上了一些个人对其中提到的知识点的理解与补充。前端性能优化涉及很多方面，本文仅针对高性能渲染进行分析。

重排是指元素的位置或尺寸发生了变化，浏览器需要重新计算渲染树，而新的渲染树建立后，浏览器会重新绘制受影响的元素。 去参加面试总会被问到一个问题，那就是“向浏览器输入一行url会发生什么？”，这个问题的答案除了要回答网络方面的知识还牵扯到浏览器渲染页面问题。当我们的浏览器接收到从…

在前端性能数据的获取方法上，现在业内大多使用手动埋点的方式，即在代码中，人工判断首屏完成的位置，并在该处添加首屏记录的代码，类似：firstscreen.report() 这样。 基于上面的分析，我们近期尝试了一些方案，试图将首屏时间计算自动化，节省人力、并提高准确性。 我们将…

几个星期前，我们开始了深入了解JavaScript及实际是如何运作的系列文章，我们认为通过了解JavaScript的构建模块以及它们如何共同发挥作用，您将能够编写更好的代码和应用程序。 本系列的第一篇文章重点介绍了引擎，运行时和调用堆栈的概述。第二篇文章将深入探讨谷歌V8 Ja…