前端不哭！最新优化性能经验分享来啦 | 技术头条
作者 | Dimitris Kiriakakis
译者 | 风车云马
编辑 | Jane
出品 | Python大本营（id：pythonnews）
【导语】Angular、React、VueJS 是现在一些主流的 JS 框架，那它们在构建网站或前端程序时，是如何保证性能，减少大家诟病的？今天这篇文章，就为大家介绍一些工具或技术技巧，来帮助前端工程师保证开发性能与效率，毕竟快过节了，要赶紧把研发和优化都做到位，少加班！
（图片来源：作者 Dimitris Kiriakakis 的原文）
如果网站页面超过 3 秒还未加载出来，会是什么结果？你会失去近 50% 的访客！也许这个数字让你有些意想不到。长时间加载对应用程序的转化率会产生负面影响，而减少页面的加载时间可以显著提升用户体验、提高效率、优化搜索等，最终保证产品的成功率。
想保证构建的网站或前端程序的性能，可以从哪些方面思考呢？接下来，我们就先谈如何衡量，再谈如何优化。
一、如何衡量性能？
首先，我们必须要有一些衡量性能的指标。在衡量前端应用程序的性能时，有两个工具推荐给大家：
（1） 谷歌浏览器 Lighthouse
（2） Speedcurve
这两款工具都可以跟踪主要的性能 KPI（如页面响应速度指数 Pagespeed Index，页面变为可交互的时间 TTI，首次对用户显示内容的时间 FCP等)。其中 Lighthouse 包含在 Chrome 开发工具里，通过分析网站/应用程序提供一些非常有用的提示，从而告诉开发人员如何提升相应的指标。使用 Speedcurve，可以在任何时间监测所有这些 KPI 及其性能。
Chrome 的 Lighthouse 提示信息
衡量产品前端性能之后，下一步就要优化我们的网站，使其发挥最大作用。
二、如何优化？
（一）优化图像
任何一个网站，图像都是至关重要的部分。平均而言，图像类数据占 Web页面加载数据的 60%以上，因此，图像的优化也是最重要的一环，其实也是最容易实现的。为什么这么说？可以从哪几方面入手？
1、调整图像大小
如何调整图像大小使其符合布局要求。最重要的一点是：检查图像的分辨率是否合适。此外，确保图像响应与布局响应相同。这方面可以推荐给大家一个很棒的工具——响应图像生成器（Responsive Image Breakpoints Generator），它可以生成不同版本的图像，可以根据你的需要或习惯，以及可使用的 HTML5 代码。这些代码还可以在任何前端应用程序或网站中使用。
如果对gulp感兴趣，可以使用 gulp-responsive 插件自动执行此过程。
响应式布局需要响应式图像
2、确保延迟加载
延迟加载可以通俗理解为不需要立即加载图像，但可以在之后需要的时候加载显示。这个概念，结合一下使用经验就容易理解了。无论使用哪个框架，都可以使用延迟加载图像的插件，如 VueJS 中的 v-lazy-image，当然开发者们也可以自己构建，不过需要检测元素进入或退出的时间。
3、图像传输：使用 CDN 进行
上面主要是从网站加载图像的大小和数量两个维度采取优化措施的，之后要考虑哪些问题呢？举一个例子，如果你想让你的网站在全球范围都是可用的，可以怎么做？这里向大家介绍 CDN 方法——内容分发网络来实现。
CDN 在其全球分布的服务器网络上缓存映像。它是如何帮助优化的？举个例子，你在欧洲，一个澳大利亚的用户向网站发送一个图像的请求，CDN 会从另一个，离这位澳大利亚用户更近的站点发送图像，而不是从欧洲的服务器上检索并发送图像，这就减少了加载图像所需的往返时间。
（二）CSS, JS 和 HTML
几乎所有框架都提供了优化代码的方法，如代码拆分、摇树优化、压缩等，除了代码，还能优化什么？
1.优化 HTML 文档
HTML（几乎）是所有 Web 应用程序的基础。在 HTML 文档中引用资源时，有下面两点建议想与大家分享！
（1）将 CSS 引用放在 HTML 头文件的顶部，确保渐进呈现。
（2）将 JavaScript 属性放在 HTML 主体的底部，并选择异步脚本加载。这可以防止任何<script> 标记阻塞 HTML 的呈现过程。
2.确保只加载需要的东西
延迟加载组件和模块
Angular、React 和 VueJS 都提供延迟加载，所以开发者只需根据自己的需要正确地分割代码，并在真正需要的时候加载所需模块。例如，一个电子商务网站，应该确保用户在主页时，购物车页面（模块）或支付页面（模块）没有被加载。
3.压缩和缓存
前端开发中需要的所有资源，比如图像或代码，是否都压缩，采取争取的缓存方式了？为什么要讲这一点？文件压缩可以让程序变得更轻，减少请求往返所需要的时间，最常用的文件压缩方法之一是 Gzip，一种用于压缩代码块、文档、图像和音频文件的好方法。
Brotli 是另一种文件压缩算法，并且越来越受欢迎。这个开源算法现在由谷歌和其他组织的软件工程师在定期更新维护。和现有方法相比，它能以更好的比率压缩文件。
此外，还可以通过修改它们的配置文件，如在 nginx 上启用 brotli 或在 Apache 上启用 brotli，在 nginx、Apache 或其他正在使用的服务器上选择喜欢的压缩方法。
谈到缓存，最常用的缓存技术是利用浏览器缓存，Lighthouse 也推荐使用这个方法，同样可以通过修改服务器的配置文件来启用（启用浏览器缓存）。
总结
通过分享上面几个经验，总结为一个核心问题就是：前端问题，性能是一个重要的问题，需要前端工程师们认真地思考与对待。
最后，也希望这篇文章能帮助前端工程师，正在前往前端开发路上的小伙伴们一些帮助，在 Review 的时候，别忘了确保前端的性能。
原文链接：
https://medium.freecodecamp.org/how-to-boost-your-front-end-applications-performance-72ce872b08c
（本文为Python大本营原创文章，转载请微信联系1092722531）
代码就是力量，长三角的开发者联合起来！
加入「长三角开发者联盟」将获得以下权益
长三角地区明星企业内推岗位
CSDN独家技术与行业报告
CSDN线下活动优先参与权
CSDN线上分享活动优先参与权
扫码添加联盟小助手，回复关键词“长三角2”，加入「长三角开发者联盟」。
推荐阅读：
打开阿兹海默之门：华裔张复伦利用RNN成功解码脑电波，合成语音 | Nature
Python程序员Debug利器，和Print说再见 | 技术头条
前端程序员别哭，优化性能的经验分享给你
如何使用Python玩转PDF各种骚操作？
人工智能先驱 Nils Nilsson 去世，吴恩达、Yann LeCun 悼念！
关于谷歌云，你应该知道的一切！ | 技术头条
养生 996 的崛起：马云竟给他最痛恨的「兔子」站台？
澳洲生活7年, 前阿里程序员谈我们的区块链差距究竟在哪？
她说：为啥程序员都特想要机械键盘？这答案我服！
点击阅读原文，了解「CTA核心技术及应用峰会」。
相关文章：
【FFmpeg】如何通过字符串到对应的封装器，以flv为例
1、简述 使用avformat_alloc_output_context2创建封装器上下文AVFormatContext时，只需将封装器的名字传递给形参format_name，就可以获取对应的封装器。这篇博客就是追寻avformat_alloc_output_context2的调用关系，探明原因。 函数原型如下： int avformat_alloc_output_co…
坚持使用Override 注解（36）
2019独角兽企业重金招聘Python工程师标准>>> 1、覆盖超类时千万小心，一不小心就变成重载了 2、现代的IDE 会在覆盖父类方法而没有使用Override 时给出一个警告 在具体类中不必标注你确信覆盖了的抽象方法声明的方法（虽然这样做没什么不好&…
sql语句动态创建连接服务器
--建立连接服务器 EXEC sp_addlinkedserver --要创建的链接服务器名称 DMZLINK,--产品名称 MS,--OLE DB 字符 SQLOLEDB,--数据源 192.168.0.68 EXEC sp_addlinkedsrvlogin DMZLINK, false, NULL, --远程服务器的登陆用户名 sa, --远程服务器的登陆密码 sa go 转载于:h…
【FFmpeg】FFmpeg中操作目录、文件的接口
1、简述 在学习FFmpeg源码中的例子时，发现FFmpeg封装了操作目录和文件的接口。这篇博客把这些接口罗列出来，作为笔记简单记录下。 2、接口列表 打开目录，准备读取目录信息 int avio_open_dir(AVIODirContext **s, const char *url, AVDictionary **options); 参数说明： u…
Scrapy爬取IT之家
创建项目 scrapy startproject ithome 创建CrawSpider scrapy genspider -t crawl IT ithome.com items.py 1 import scrapy 2 3 4 class IthomeItem(scrapy.Item): 5 # define the fields for your item here like: 6 # name scrapy.Field() 7 title scrapy.F…
高效读CV论文法则：先在GitHub上立Flag！| 资源
整理 | 琥珀出品 | AI科技大本营（id：rgznai100）今天介绍一份在 GitHub 上发现的最新干货资源——计算机视觉论文笔记，该项目是由一位名叫 ahong007007 的网友贡献的。该项目上线仅 20 天，尚未获得太多人的关注…
JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
代码简介： 以前见过这种效果，但是是基于FLASH技术，现在是纯用JS实现的，代码有点多，不过效果还不错，实际上它也是一个图片滚动，只不过它完全是用鼠标点击控制的，也就是说鼠标不点击的…
【FFmpeg】自定义回调函数处理AVIOContext中的数据
1、简述 AVIOContext是FFmpeg管理输入输出数据的结构体，它的成员变量有指向数据的指针、大小以及处理数据的回调函数指针等等。如果使用avio_open或avio_open2来创建，它会根据指定的url协议，将协议处理数据的回调函数指针赋值给AVIOContext的相应成员变量。 我们也可以自己…
ZooKeeper系列(4)：ZooKeeper的配置文件详解
ZooKeeper系列文章：https://www.cnblogs.com/f-ck-need-u/p/7576137.html#zk zkServer.sh读取的默认配置文件是$ZOOKEEPER_HOME/conf/zoo.cfg。如果要用其它配置文件。如下传递配置文件参数： zkServer.sh start your_config zkServer.sh stop your_co…
明星企业内推+BAT面经，长三角的开发者联合起来！
“为什么公司宁愿花20K招新人，也不愿给老员工加到20K？”这个热门的微博话题戳起了很多人的痛处，但根据 CSDN &《程序员》杂志发布的「中国软件开发者薪资调查报告」，有32.98%的开发者在过去曾换过工作，其中有72.5%…
《一江春水向东流》之随笔
这篇文章，更像是为后任正非时代的华为，进行的定调。开篇任总提到小时候的教育和意识养成的个人英雄主义，这种性格让自己四十岁之前遭遇坎坷。四十不惑之后，领悟了团结就是力量的政治内涵，开始妥协、包容。全篇浓墨重彩…
程序员拯救乐坛？OpenAI用“逆天”GPT2.0搞了个AI音乐生成器
作者 | 琥珀出品 | AI科技大本营（id：rgznai100）基于深度神经网络进行语音合成、音乐风格迁移，正成为不少致力于“让人人成为音乐家”的研究人员所追求的事情。像此前我们报道的微软小冰作词又作曲，AI帮清华博士写说唱歌…
centos7 JDK1.8
安装之前先检查一下系统有没有自带open-jdk rpm -qa |grep java rpm -qa |grep jdk 卸载找出的已安装Java相关rpm文件：rpm -e --nodeps 重新输入rpm -qa |grep java ，卸载完成 下载jdk1.8 for linux的安装包 jdk-8u11-linux-x64.tar.gz，下载…
【FFmpeg】详解FFmpeg解封装、解码流程
目录 1、获取媒体信息头2、获取媒体流信息3、准备解码器3.1 获取视频、音频、字幕流在解封装上下文 AVFormatContext 的流列表 AVStream **streams 中的索引3.2 使用已经获取的流信息创建对应的解码器及其上下文，以视频解码器为例3.3 初始化解码器上下文4、准备用于保存解码前…
Win2008远程多用户登陆的配置方法
核心提示：在使用Windows 2008远程登录功能时，如果需要进行多用户登录，可以采用以下配置方法 在使用Windows 2008远程登录功能时，如果需要进行多用户登录，可以采用以下配置方法： 首先要启用远程桌面这一功能…
策略梯度搜索：不使用搜索树的在线规划和专家迭代 | 技术头条
作者 | Thomas Anthony、Robert Nishihara、Philipp Moritz、Tim Salimans、John Schulman译者 | 李倩编辑 | Rachel、Jane出品 | AI科技大本营（ID：rgznai100）蒙特卡罗树搜索（MCTS）算法执行基于模拟的搜索以改进在线策…
【FFmpeg】解码时refcounted_frames标志的使用
1、refcounted_frames说明 在接口 avcodec_decode_video2 的注释中，有关于 refcounted_frames 的详细说明： （1）当 AVCodecContext.refcounted_frames 被设置为1，该 AVFrame 被引用计数，返回的引用属于调用者。当不再需要 AVFrame 时，调用者必须使用 av_frame_unref() 来…
python-selenum3 第五天定位——不常用定位与css定位详
使用tag来定位tag定位的是标签，不常用例如：百度的输入框标签是input最终会报错，因为百度首页input标签太多了 driver webdriver.Firefox(executable_path"d:\\geckodriver") driver.get("https://www.baidu.com")driver…
nagios监控三部曲之——为什么nagios不能发送报警邮件(2)
最近我写了关于naigos监控的安装与配置的技术文档，公司运维按照我的文档部署naigos，发现不能发送报警邮件，经过我的检查，发现问题如下： 1、hosts里的配置 [rootnagios ~]# cat /etc/hosts # Do not remove the follow…
小样，加张图你就不认识我了？“补丁”模型骗你没商量！| 技术头条
作者 | Simen Thys, Wiebe Van Ranst(共同一作)译者 | 刘畅编辑 | Rachel、Jane出品 | AI科技大本营（id：agznai100）【导语】本文介绍了一个可以生成欺骗性补丁的系统模型，通过将该补丁放置在固定位置，人们能够使自己在…
【经验】如何查看gcc、g++不加-std时的默认版本
一、测试gcc 1、测试代码:c.c #include <stdio.h>int main(void) { #ifdef __STDC_VERSION__printf("__STDC_VERSION__ %ld \n", __STDC_VERSION__); #endif #ifdef __STRICT_ANSI__printf("__STRICT_ANSI__ %d \n", __STRICT_ANSI__); #endifre…
发布开源框架到CocoaPods入坑指南
个人原文博客地址: 发布开源框架到CocoaPods入坑指南在开发过程中一定会用到一些第三方框架, 只要安装了CocoaPods, 然后通过pod install命令, 就可以集成框架到项目中了可是如果想要把自己的框架或者组件也开源出去, 让别人也可以使用, 那该如何入手 ?对于CocoaPods还不是很了…
linux下打印机共享及监控
操作系统:centos6.0 主要软件：cups，samba，ghostpostscript 打印机：richo 3025 主要功能：通过samba将打印机共享给局域网用户，并实现对打印内容的监控 主要有三大步：本机安装打印机，通…
【H.264】x264命令详解：x264 --fullhelp
1、简述 宏区块： macroblock：。是一种图像压缩的术语。 宏区块是运动预测的基本单位，一张完整的图像（frame）通常会被切割成几个宏区块。h.264 的宏区块大小是可变的，常用 16x16 pixels。 帧类型 “帧”基础知识： 影片可以看作是由一张张连续的图片组成的，每幅图片就…
东大漆桂林、清华李涓子、复旦肖仰华等大牛确认出席CTA峰会！5月一起打卡杭州...
5月26日-27日，由中国IT社区CSDN与数字经济人才发展中心联合主办的第一届CTA核心技术及应用峰会将在杭州国际博览中心召开。首届CTA核心技术及应用峰会将聚焦人工智能，邀请技术领航者，与开发者共同探讨机器学习和知识图谱的前沿研究及应用。20…
【Oracle Database】数据库用户管理
创建用户 SQL> create user soe identified by soe default tablespace soe temporary tablespace temp; User created.查询用户的默认表空间 SQL> set line 200 SQL> col username for a30 SQL> col account_status for a20 SQL> select username,account_stat…
MySQL两主多从，且故障转移配置
一、角色划分1、MySQL数据库规划主机名 IP地址 角色 mysql_server_idweiliaodb1 192.168.1.233 master1 1weiliaodb2 192.168.1.234 master2 2weiliaodb3 192.168.1.235 slave1 3monitor 192.168.1.240 mmm_mon -2、虚拟IP规划IP地址 角色192.168.1.10 writer192.168.1.20 read…
Go开发者路线图2019，请收下这份指南
整理 | Rachel责编 | 阿司匹林出品 | AI科技大本营（ID: rgznai100）Go是Google开发的一种静态、强类型、编译型、并发型，并具有垃圾回收功能的类C编程语言。2009以开源项目的形式发布，2012年发布1.0稳定版本，距今已经十…
【Ubuntu】在Ubuntu中设置永久的DNS
1、问题描述 ping不通域名，比如“ping www.baidu.com”时，报错“ping: unknown host www.baidu.com”。这是因为ubuntu默认情况下没有设置DNS。 在ubuntu上设置DNS的方法，修改“/etc/resolv.conf”，添加“nameserver 8.8.8.8”&a…
实习期间问题总结
主要针对实习期间，接触的部分问题进行总结，后续会不间断的补充，作为实习期间的回顾。 1，git ,github和gitlab的关系 git 是一个版本控制工具，github是一个用git做版本控制的项目托管平台，他是一个网站&…