前端优化

Posted 2020-08-12 52NewBlog-正能量

　　近几年，移动端站点和app、手游井喷式的发展，大大出乎了当初从业者的预料，2010年前后中国还处于3G网时代，各种3G宣传铺天盖地，如果你稍稍回忆一下，那个时候中国几乎没有像样的移动站点；大约在12年左右，也就是iphone4s诞生的时代，在中国高级智能设备开始被普遍使用，4G的覆盖范围也越来越大，各种app、移动站点、html5活动页面也逐渐火爆起来；随着行业的发展，对从业者及技术支持的要求也越来越高；对于前端，前端资源和页面优化是常见要求，对比移动端，移动端对前端优化的要求更高，可以说要达到极致，虽然现在基本都有使用WIFI了，但一些地方还是要靠4G甚至3G、2G，极致的优化能争取更多的pv和更多的可能，如果你去观察一些大厂的项目和一些比较有名的站点，也会发现他们的优化是做的非常专业非常好的；而我今天跟大家聊的就是关于前端优化的内容；

 　　话不多说，来看看有哪些选项；

　　1.引用资源部分优化：

　　·合并引用的css、javascript，并使用压缩模式，这个很好理解吧；

　　·合并页面引用的小图标，也就是合成一张图片，引用背景图片定位，俗称雪碧图；

　　·使用按需加载，scroll加载的处理方式；

　　·服务器GZIP处理资源，这一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来，一般对纯文本内容可压缩到原大小的40%，好吧，后面这一句是科普；

　　·异步加载资源，和document构建不相冲突，defer、async的设置；

　　·减少http请求，全局使用，缓存一切可缓存的资源文件；

　　·外联式引用资源，主要是为了页面缓存考虑；

　　·资源文件放在同一个服务器，避免调用第三方资源，万一挂了那(常见的是各种不靠谱的CDN，泪目中)；

　　·dns-prefetch，把这个放这里不知道合适不合适，这个应该算是http请求方面的优化，不知道什么是dns-prefetch是什么的自行谷歌之，俗名叫dns预获取，主要作用是减少请求次数和提前对dns预获取(废话)，什么意思那，简单的说你的站点域名是x.com，而你网站上一些的图片等资源是放在img.x.com上，每次请求会涉及到dns解析问题，对于性能要求极致的站点这个处理就必不可少，在head中加入<link rel="dns-prefetch" href="//img.x.com">就能达到上述的效果，需要注意，虽然dns-prefetch能够加快网页解析速度，但是也不能随便滥用，因为多页面重复DNS预解析会增加重复DNS查询的次数；

 

　　2.css&javascript内容优化：

　　·css引用写在头部，javascript引用写在底部、使用异步加载，避免渲染等待；

　　·避免在页面标签中写样式；

　　·不过度引用字体，字体大小的问题；

　　·值为0的时候不用单位；

　　·使用标准的浏览器前缀，或者使用类似scss中的@include的写法，定义详细再引用；

　　·不滥用页面浮动；

　　·避免复杂dom 循环操作；

　　·id的工作效率比class高，但我个人不喜欢写很多id(dom多了不爽)，看情况操作；

　　·使用事件代理代替绑定事件；

 

　　3.Dom渲染优化：

　　·使用简洁的html标签结构，避免复杂嵌套；

　　·使用css3书写动画，减少jsdom操作；

　　·适当使用svg、canvas；

　　·避免最下级元素书写页面class

 

　　4.图片优化：

　　插一句，web图片优化应该是优化中的重头戏，内容型、展示型的站点图片规模很大，也许1%的优化作用就可以和其他的优化方式相媲美；

　　·使用css、svg、fonticon代替图片；

　　·压缩图片，重中之重，就图片本身格式而言，png8大于gif，常用png和jpg，而压缩方面有各种工具，比如gulp(个人多次实测压缩比率达20%左右，这个也可能和图片多少、格式有关系)、TinyPNG(熊猫站，性能比较高的，不便的是国外的，上传下载太麻烦了，使用它们给的开发者接口，个人实测跟gulp差不多，比不上网站上的压缩，所以意义不大，而且限制次数，土豪冲会员也许给的接口性能会优越也说不定哈)还有其他各种网络压缩工具不一一说了，这些是针对前端使用的图片的，其实一般站点的图片处理会有服务器上专门的配置服务做这些事情的，比如用户上传一张1MB的用户头像，服务器会处理成两张，一张小图供头像图标引用，一张原尺寸的，但体积都会小很多，供站点引用。

　　·使用webp图片，不知道webp是啥的自行google之，是未来天网前身的美帝google公司(放我出去，我要装13，每次提天网，都叹息百毒一点都不争气......)开创的一种图片格式，性能我只能说我服，不便的是不是所有浏览器都支持这种高科技...(IE：好像听到背后有人说我帅)，要做两种可能性的预设准备，实际操作起来也是增加很多工作量的，所以是个可参考项，其实主要还是看公司团队的人力资源分配和leader的推行决心(说的好像其他不是这样似得)；

　　·避免使用DataUrl，也即俗称的base64引用，这种方式没有使用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长，恩，要是没有直观印象，看下图，这货就长这样：

 

还是别看了，会瞎眼的，并且这里图片内容是没完全显示的；

 

　　以上描述序列部分排名先后，相辅而成；

　　注意移动端和pc端的优化是没有界限的，移动端适用的优化规则在pc端同样适用；

　　THKS FOR WATCH。