如何提高前端性能和响应速度以下多为前端工程角度的优化建议。如果需要了解语法优化，可以参考：如何提高页面加载速度编写高效的JavaScriptWeb前端性能优化进阶-完结一、原生css动画代替js动画原生css动画效率比js高很多js动画，所以尽量使用原生的css动画。可以参考：You-Dont-Need-JavaScriptcssanimationcss@keyframescsstransformcsstransition2。Nativejs替换第三方库是因为第三方库必然会增加打包文件的体积，有很多我们不需要的代码和性能损失。所以在可能的情况下尽量使用原生的jsAPI，而不是第三方库的API，比如jquery、lodash、underscore、moment等。可以参考：You-Dont-Need-jQueryYou-Dont-Need-Lodash-UnderscoreYou-Dont-Need-Momentjs3。使用第三方库时，请使用子模块而不是整个包。一些第三方库会比较大。如果提供单个模块使用，尽量使用子模块而不是使用整个包，比如lodash、jquery-ui等。以lodash为例：//不推荐import_from'lodash';_。forEach();_.defaults();//建议从'lodash/forEach'导入forEach；从'lodash/defaults'导入默认值；forEach();defaults();4.用高效的API替换低效的API。如果同一功能有多个选项，您应该尝试使用高效的解决方案。例如：使用document.getElementById、document.getElementsByClassName、document.getElementsByTagName代替document.querySelector、document.querySelectorAll使用el.innerHTML代替document.createElement、el.appendChild5。扁平化结构，避免无用的嵌套，避免无用的闭包，无用的Block作用域，尽量扁平化代码结构。例如：//低效的实现consturlParams=(()=>{constparams={};if(location.search){location.search.slice(1).split('&').forEach(item=>{const[key,value='']=item.split('=');urlParams[key]=value;});}returnparams;})();//consturlParams={}的更高效实现;if(location.search){location.search.slice(1).split('&').forEach(item=>{const[key,value='']=item.split('=');urlParams[key]=value;});}6.使用es6模块化现在js模块化主要是基于commonjs和es6模块化规范，但是开发的时候建议使用es6模块化规范，因为es6模块化可以使用Tree的功能摇晃。该函数可以在构建工具打包代码时对代码进行分析。只有真正用到的代码才会被打包，没有用到的代码不会被打包。//one.jsexportconstsmile={};exportconstcry=[];//two.jsimport{smile}from'./one';exportdefaultsmile;上面的代码以two.js作为打包的入口，那么在one.js中只会打包exportconstsmile={}，exportconstcry=[]不会。关于TreeShaking，可以参考：tree-shakingwebpackhowtousetree-shakingelegantly(shakingtreeoptimization)7.Merge,compress,split代码合并和压缩是前端的必修课，如果你用webpack打包，webpack会自动帮我们搞定，一般不用关心。另外，在某些情况下，需要对代码进行拆分，因为webpack会将代码打包成一个文件，当文件很大时，需要拆分成多个小文件。通常建议最大捆绑文件大小不应超过350k。对于webpack，可以使用DllPlugin或SplitChunksPlugin进行文件拆分。8、按需加载对于很多应用，尤其是SPA应用，有些资源不需要在首屏加载，而是在需要的时候才加载。这是按需加载。按需加载可以减少首屏加载文件的大小，从而提高响应速度。//about.jsexport默认渲染；//main.jsdocument.getElementById('about').addEventListener('click',e=>{import('./about').then(({default:render})=>{//渲染页面render();});},!1);在上面的代码中，只有当#about元素被点击时，about.js文件才会被加载。可以参考：proposal-dynamic-importwebpackdynamic-imports9。Rollup前端性能的优化不仅是从语法、http协议、工程结构方向，构建工具也是可以优化的方向。对于前端开发者来说，webpack基本上就是用来打包项目的，但是webpack在给我们带来强大功能的同时，也有一些副作用，就是会产生很多冗余代码（如果你查看过webpackbundle文件，它会被发现）。如果你的项目不需要处理静态资源（比如图片），不需要按需加载，追求前端高性能，可以试试rollup。例如：sourcecode#directory|--src/|--index.js|--prefix.js|--suffix.js#prefix.jsconstprefix='prefix';导出默认str=>`${prefix}|${str}`;#suffix.jsconstsuffix='suffix';exportdefaultstr=>`${str}|${suffix}`;#index.jsimportprefixfrom'./prefix';importsuffixfrom'./后缀';导出默认str=>后缀（前缀（str））;rollup打包代码：'usestrict';constprefix='prefix';varprefix$1=str=>`${prefix}|${str}`;const后缀='后缀';var后缀$1=str=>`${str}|${suffix}`;varindex=str=>suffix$1(prefix$1(str));module.exports=index;webpack打包后的代码：module.exports=/******/(function(modules){//webpackBootstrap/******//******/中间有100行代码被省略/******//******/]);可以参考：rollupwebpack之外的另一个选择：rollup10。prepack的前端性能优化还有一个方向，就是预编译脚本。即，原本在运行时解析的代码，被工具预执行，只留下结果。prepack就是这样一个工具。它的思路大致是这样的：预先计算出不依赖于外部环境的逻辑，将计算结果替换成相应的源代码，然后将这段逻辑从源代码中移除。源代码(()=>{constsecondsOfOneDay=24*60*60;window.getSecondsOfDays=days=>days*secondsOfOneDay;})();编译代码(function(){var_$0=this;var_1=days=>{returndays*86400;};_$0.getSecondsOfDays=_1;}).call(this);可以参考：prepackjs性能优化工具：prepack11。前端css选择器不要嵌套太深，CSS对性能的影响相对较小，所以这里只是最常见也是最有效的建议之一：选择器不要嵌套太深。一般建议选择器级别在2级以内，最多不超过3级。//下面是less，scss，css语法//不好。one{.two{.three{.four{}}}}//不推荐。one{.two{.three{}}}//很好。one.two{}.one{}关注更多博文，查看https://github.com/senntyou/blogs作者：沈育之(@senntyou)版权声明：免费转载-非商业-非衍生-保留署名（知识共享3.0许可）
