当我们优化性能时，我们在优化什么？首先，它需要在性能上出类拔萃，否则毁了金玉良言，页面美不胜收。导致首屏长时间无法加载，难免让用户来得意气风发，失而复得。幸运的是，前端性能优化有很多有据可查的理论和方法，其中LightHouse无疑是最权威的。LightHouse是一种开源自动化工具，作为Chrome浏览器扩展程序运行，并提供一套完整的网站评分标准，我们可以根据这些标准对网站进行基准测试以进行优化。如何打开灯塔？LightHouse可以在Chrome浏览器开发者工具中找到。打开“开发者工具”，请选择：“TopMenu→View→Developer→DeveloperTools”或使用快捷键：Mac系统“?+?+I”Win系统“F12+Ctrl+Shift”+I"。然后点击GenerateReport按钮：LightHouse评分一般有四大指标，分别是：性能、可访问性、最佳实践和SEO。性能指标（Performance）性能指标分为六个小指标：LargestContentfulPaint[缩写为LCP：maximumcontentrendering]FCP最大内容渲染时间标记了渲染最大文本或图片的时间。)和TTI(interactivetime)。TTI可能被主线程阻塞，不能及时响应用户。大于50ms的任务称为长任务，??当任何长任务发生时，主线程被称为阻塞状态。由于兄弟wser不会打断正在进行的长任务，如果用户在执行长任务的同时与页面交互，浏览器必须等到长任务完成后才响应。TBT计算为FCP和TTI之间所有长任务时间的总和。FirstContentfulPaint【简称FCP：首次内容渲染】FCP衡量的是从页面加载的内容到页面任何部分到屏幕的渲染。SpeedIndex【简称SI：SpeedIndex】SI速度指数表示网页内容可见的填充速度。Lighthouse首先抓取页面加载的视频，然后比较帧间的视觉效果变化（通过计算结构相似度指数SSMI进行比较）。TimetoInteractive【简称TTI：交互时间】交互时间是指网页提供完整的交互功能所需要的时间。TTI测量从页面开始加载到页面的主要辅助资源完成加载并且足够快以响应用户输入的时间。CumulativeLayoutShift[简称CLS：cumulativelayoutshift]CLScumulativelayoutshift旨在测量可见元素在视口内的移动。CLS值越小越好。提高这些性能指标的性能优化手段有哪些？首先需要优化的是页面的“资源”。这里的资源指的是页面加载的所有元素，包括但不限于：js文件、css文件、图片、视频等。对于js文件，首先要做的就是拆分业务。不同页面只加载对应需要的文件，单个页面只加载一个js文件，减少Http请求次数。多余的文件需要合并压缩，但其实这里有一个基本的问题，就是如果js文件本身就很大，再高的压缩率也是杯水车薪.比如正常情况下Jquery官方压缩版已经高达80kb左右，很难有这样的体积。压缩了优化空间，所以不如直接放弃Jquery，换成其他功能上可替换的库，比如zepto。后者的体积只有26kb，是前者的四分之一。然后进行压缩合并操作，首先安装：npminstalluglify-js-g以本站为例，业务中使用的js库有zepto.min.js、my.js、lazyload.min.js、wordcloud2.min.jsiconfont.js，合并压缩这五个js文件：uglifyjszepto.min.jsmy.jslazyload.min.jswordcloud2.min.jsiconfont.js-o./1-min.js最后得到一个1-min.js文件，体积为59kb。当然，这是业务级的压缩。也可以修改服务器执行gzip压缩：location~.*.(jpg|gif|png|bmp|js|css)${gzipon;gzip_http_version1.1;gzip_comp_level3；gzip_types文本/普通应用程序/json应用程序/x-javascript应用程序/css应用程序/xml应用程序/xml+rss文本/javascript应用程序/x-httpd-php图像/jpeg图像/gif图像/png图像/x-ms-bmp；}在加载方式上，尽量使用预加载：同时对于一些站外js比如Ads，或者一些js特效，我们可以对其进行延迟加载操作，即在首屏加载完成后，再加载这些逻辑：=document.createElement('scrip');script.async=true;script.type='文本/javascript';script.src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';varcreateScript=setTimeout(function(){document.getElementsByTagName('HEAD').item(0).appendChild(script);WordCloud(canvas,options);},7000);script.onreadystatechange=script.onload=function(e){if(!done&&(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){(adsbygoogle=window.adsbygoogle||[]).push({});}};})();以上逻辑是在首屏完成7秒后加载谷歌广告和标签云特效。css文件的处理原理与js文件类似。目的是拆分，缩小体积，压缩：cssMinifier(['./bootstrap.min.css','../js/kindeditor/plugins/code/prettify_dark.css','./style.css'],'./tidy_min.css');优化后，生成的tidy\_min.css文件大小为17kb。对于图像文件，不仅是第一张图像，所有图像都应该使用新的图像格式Webp来减小其尺寸。具体操作方法请前往：石火电光追风追日|次时代图片压缩格式WebP前端优化项目级实践（Python3PIL+Nginx）。具体图片，如Logo，使用svg格式图片，请移步：Logo小变化，意境大不同，SVG矢量动画格式网站Logo图片制作及实践教程（Python3）同时，所有图片必须声明width和height属性，以及使用lazyload.js组件延迟屏幕外图像的加载。使用viewport标签加快移动端加载速度：辅助功能（Accessibility）辅助功能检查所有用户是否可以有效地访问内容和浏览网站。可达性各指标项的测试结果为通过或不通过，这与性能指标项的计算方法不同。当页面只是部分通过某个指标时，该页面不会对该指标进行评分。例如，如果页面上的某些元素具有屏幕阅读器友好的名称，而其他元素则没有，则该页面的屏幕阅读器友好名称指标得分为0。总的来说，无障碍的优化其实就是站点标签的优化，比如页面元素是否有title标签，title元素是否降序排列，是否声明页面语言类型，元素是否有alt标签等。值得一提的是，页面的对比度也是可访问性得分的重要组成部分。如果背景色是白色，那么前景色最好选择对比度高的颜色，比如黑色。最佳实践（BestPractice）BestPractice检测一些能够提高网页代码健康度的最佳实践，分数的得分由相关指标的加权平均计算得出。我们可以将最佳实践指标理解为站点安全的指标。大多数情况下，需要保证协议为HTTPS，同时需要开启CSP网页安全策略，防止XSS攻击。CSP的本质是白名单系统。开发者明确告诉客户端哪些外部资源可以加载执行，相当于提供了一个白名单。它的实现和执行全部由浏览器完成，开发者只需要提供配置即可。CSP大大增强了网页的安全性。即使攻击者发现了漏洞，他们也无法注入脚本，除非他们也获得了白名单中受信任主机的控制权。开启方式：SearchEngineOptimization(SEO)搜索引擎优化检测搜索引擎对网页内容的理解程度，分数由相关指标的加权平均计算得出。说白了就是站点页面是否适合被搜索引擎蜘蛛抓取和索引。以本站为例，搜索引擎需要的标签如下：当我们优化性能时，我们在优化什么（LightHouse优化实践）-刘越包含页面title,description,author,pageuniqueidentifier等元素，当我们完成了以上指标的优化后，我们就可以坐下来欣赏万重禁烟花了：它是：东风夜方花千树，更吹，繁星点点结语前端的性能分析和优化方法，无论是传统性能还是s感官性能，可以根据LightHouse来确定。在这个过程中，可以选择一定的指标，虽然本站优化LightHouse的实践我取得了一定的成绩，但是任重而道远，我会上下搜索。原文转载自《刘越的科技博客》https://v3u.cn/a_id_214
