前端性能优化的常用手段 - 网站源码_资源分享

后端操控性强化是很关键，不努力学习是不是高阶到20K+的薪资啊？！

从最开始的CSS放在<head>里头、js放在</body>前面、采用希伯尼安斯图等，到前面的动态天然资源填充、分拆和采用iconfont替代调色板，再到前段时间课堂教学的gzip填充、增设HTTP Header内存表头…

gzip填充、增设ETag等，早已在《高操控性中文网站工程建设手册》那两本中看完，但我始终认为这都是后端爸爸妈妈干得事，就没有是不是留心过。直至前段时间，对其间端分立的认知愈来愈充份，对整座工程项目的布署愈来愈明晰，对工程项目里头的天然资源允诺愈来愈知道，才回首意识到：其间端分立了，这他妈是后端他们反正啊！！！

从下列两个各方面而言讹传他们课堂教学过的强化方式：

➤ 应用程序图形网页的操作过程

简而言之强化，第二个要弄知道的是：强化什么、从这儿强化。后端做出的网页是在应用程序里头呈现出的，那应用程序是是不是图形这个网页的呢？碰到CSS、js动态天然资源，应用程序是是不是处置的？具体内容的操作过程这儿无须约勒，网路上天然资源一堆，我他们以后也写过一则，《中文网站操控性强化—CRP》，称得上Google文件格式的译者版吧。

认知了应用程序图形网页的操作过程，也就知道了：CSS为何要放在<head>里头、js放在</body>前面，和js的触发器读取（async、defer）等强化。

➤ 增加HTTP允诺

CSS/JS 分拆装箱

调色板等用iconfont替代：做为一般而言DOM结点采用，可以增设大小不一、色调等，十分便捷。对个人提议后端来维护这个字体包，每次有新增的图标，让设计师给我们对应的svg文件即可，后端他们去https://icomoon.io/这个中文网站，导入原来的selection.json文件，增量生成新的css，无比方便。以后，我始终以为iconfont只能是单色的呢，其实也可以是多色的，svg里头多一些path而已，设计师会搞定的。生成字体后，后端正常引用即可（引用的时候，多色字体会多一些标签）

采用base64格式的图片：有些小图片，可能色彩比较复杂，这个时候再用iconfont就有点不合适了，此时可以将其转化为base64格式（不能内存），直接嵌在src中，比如webpack的url-loader增设limit参数即可

采用希伯尼安斯图：增设背景图尺寸大小不一，感觉很麻烦，而且希伯尼安斯图的维护也不是不是便捷，好像采用率愈来愈低了，都被iconfont取代了

➤ 增加动态天然资源的体积

填充动态天然资源：分拆装箱的js、css文件体积一般会比较大，一些图片也会比较大，这个时候必须要填充处置。其间端分立工程项目，不论是gulp还是webpack，都有相应的工具包。针对个别图片，有时候也可以单独拿出处置，我对个人经常采用这个中文网站https://tinypng.com/ 在线填充

编写高效率的CSS：涉及到代码层面的强化比较多也比较细，不同水平的技术人员写出的肯定不一样，这儿不做进一步的分析。但是为何要把CSS拿出而言讹传呢？因为现在工程项目里头基本上都在采用CSS预处置器，Less、SaaS、Stylus等等，这导致了某些初级后端的滥用：嵌套5、6层，甚者能达到7、8层，吓死对个人！嵌套这么深，影响应用程序查找选择器的速度不说，这也一定程度上产出了很多冗余的字节，这个要改、要提醒，一般提议嵌套3层即可。关于编写高效率的CSS，推荐一则文章，《Writing efficient CSS selectors》

服务端开启gzip填充：大招，前段时间刚知晓，真是太牛逼了，一般的css、js文件能填充60、70%，当然，这个比率可以设定的。其间端分立，如果后端布署用node、express作服务器的话，采用中间件compression即可开启gzip填充：

// server.jsvar express = require(express);var compress = require(compression);var app = express(); app.use(compress());

对于一般的SPA工程项目，如果node服务器的作用比较简单，比如只是做个接口转发之类的，很多人更倾向用Nginx作服务器，Nginx在转发接口、填充、内存等功能上更胜一筹。不过，大部分后端对Nginx应该陌生一些，为了课堂教学技术，用熟悉的node即可，真正的工程项目布署，有专业的实施人员来搞。