摘要：减少请求合并打包小图标等用代替作为单个节点使用，可以设置大小颜色等，非常便利。前后端分离项目，不论是还是，都有相应的工具包。不过，大部分前端对应该陌生一些，为了实践技术，用熟悉的即可，真正的项目部署，有专业的实施人员来搞使用缓存
减少HTTP请求
CSS/JS 合并打包
小图标等用iconfont代替：作为单个DOM节点使用，可以设置大小、颜色等，非常便利。个人建议前端来维护这个字体包，每次有新增的图标，让设计师给我们对应的svg文件即可，前端自己去 icomoon.io/ 这个网站，导入原来的selection.json文件，增量生成新的css，无比方便。之前，我一直以为iconfont只能是单色的呢，其实也可以是多色的，svg里面多一些path而已，设计师会搞定的。生成字体后，前端正常引用即可（引用的时候，多色字体会多一些标签）
使用base64格式的图片：有些小图片，可能色彩比较复杂，这个时候再用iconfont就有点不合适了，此时可以将其转化为base64格式（不能缓存），直接嵌在src中，比如webpack的url-loader设置limit参数即可
减少静态资源的体积
压缩静态资源：合并打包的js、css文件体积一般会比较大，一些图片也会比较大，这个时候必须要压缩处理。前后端分离项目，不论是gulp还是webpack，都有相应的工具包。针对个别图片，有时候也可以多带带拿出来处理，我个人经常使用这个网站 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.js
var express = require("express");
var compress = require("compression");
var app = express();
app.use(compress());复制代码
对于一般的SPA项目，如果node服务器的作用比较简单，比如只是做个接口转发之类的，很多人更倾向用Nginx作服务器，Nginx在转发接口、压缩、缓存等功能上更胜一筹。不过，大部分前端对Nginx应该陌生一些，为了实践技术，用熟悉的node即可，真正的项目部署，有专业的实施人员来搞
使用缓存
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114983.html
摘要：所以实现小图标时雪碧图跟图标字体会在一个网站共存，自定义图标字体为什么比较耗时，且太复杂图标无法实现请往下看开发流程就了解了。参考资料细谈浅谈图标字体向下兼容优雅降级技术绘制小图标技巧雪碧图图标字体矢量小图标设计本文对应源码源码地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前写了一篇关于雪碧图的博文，...
摘要：在所有的网站优化话题中，资源文件的压缩都是占很大比重的。像百度图片中的友情链接所使用的图片就是作为呈现的，并使用进行合并。可以减少请求，还可以配合离线存储做性能优化。创作自已的字体图标很费时间，重构人员后期维护的成本偏高。 前言 第一篇文章，小弟先做一番自我介绍^ω^姓名不说，年龄21岁，湖北武汉一所二本大学2016届本科毕业生，大四前的暑假起对web前端产生兴趣并有半年实习经验。ng...
摘要：在所有的网站优化话题中，资源文件的压缩都是占很大比重的。像百度图片中的友情链接所使用的图片就是作为呈现的，并使用进行合并。可以减少请求，还可以配合离线存储做性能优化。创作自已的字体图标很费时间，重构人员后期维护的成本偏高。 前言 第一篇文章，小弟先做一番自我介绍^ω^姓名不说，年龄21岁，湖北武汉一所二本大学2016届本科毕业生，大四前的暑假起对web前端产生兴趣并有半年实习经验。ng...
摘要：对于广大的前端开发人员来说，网站构建本是家常便饭其中也不得不涉及到性能优化的问题。将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量按需加载会导致大量重绘，影响渲染性能。对于广大的前端开发人员来说，网站构建本是家常便饭；其中也不得不涉及到性能优化的问题。之前也有接触过，今天总结一下这方面的技巧，下面是我的一下认知，欢迎探讨： Nu...
摘要：性能优化是前端开发必不可少的一环，而图片优化又是性能优化中必不可少的一环，但不知道有多少开发者在网页的开发过程中会注意图片的使用，图片使用不当可能会导致网页加载卡顿网页加载速度慢等问题，这篇文章将会将我以往对图片的处理做个总结。 性能优化是前端开发必不可少的一环，而图片优化又是性能优化中必不可少的一环，但不知道有多少开发者在网页的开发过程中会注意图片的使用，图片使用不当可能会导致网页加...
阅读 3664·2023-01-11 11:02
阅读 4206·2023-01-11 11:02
阅读 3004·2023-01-11 11:02
阅读 5144·2023-01-11 11:02
阅读 4699·2023-01-11 11:02
阅读 5483·2023-01-11 11:02
阅读 5234·2023-01-11 11:02
阅读 3857·2023-01-11 11:02
