前端常见的优化问题

                                                                                                                                  (一)Sprites(背景精灵图/雪碧图)

                                                                                                                                  1-将多张零星图片或者图标都包含到一张大图里面,这样就只需要加载这个一个图片,而不是很多个图片了,这样就减少了很多http的请求

                                                                                                                                  2-利用CSS的background-imagebackground- repeatbackground-position的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置;

                                                                                                                                  (二)base64

                                                                                                                                  1-将小图片 它的阈值不大于8192KB的转换成base64格式的字符串;

                                                                                                                                  2-通俗点讲:将资源原本二进制形式转成以64个字符基本单位,所组成的一串字符串。
                                                                                                                                  比如一张图片转成base64编码后就像这样,图片直接以base64形式嵌入文件中;

                                                                                                                                  3-解决方案:webpack中的url-loader可以完成这个工作,可以对限制大小的图片进行base64的转换,非常方便。

                                                                                                                                  4-优点:

                                                                                                                                  • base64的图片会随着html或者css一起下载到浏览器,减少了请求.
                                                                                                                                  • 可避免跨域问题

                                                                                                                                  5-使用场景:

                                                                                                                                  • 应用于小的图片几k的,太大的图片会转换后的大小太大,得不偿失。
                                                                                                                                  • 用于一些css sprites不利处理的小图片,如一些可以通过background-repeat平铺来做成背景的图片。

                                                                                                                                  6-需要注意的地方是 请看清楚,是阈(yu)值,千万不要读成阀值了。哈哈哈,之前就读错了,被大表哥一顿羞辱。惭愧惭愧。

                                                                                                                                  (三)图标字体

                                                                                                                                  用过bootstrap的同学肯定对方便的fontawesome图标字体印象深刻,可以无损放大缩小,可以修改颜色,只要加个类名就可以使用图标,感觉是不是很爽 至于优势就是矢量&方便好用。

                                                                                                                                  (四)Vue里面的优化,设置公共地址

                                                                                                                                  1-试想一下,如果大家的组件比较多,但是又要使用axios或者Ajax发送请求去后台请求数据,难道我们要一个一个的复制粘贴吗?不嫌麻烦吗? 当然这里有一个非常棒的优化,如下:

                                                                                                                                  先写到这里,后面有时间再添加。。。

                                                                                                                                  展开阅读全文

                                                                                                                                  没有更多推荐了,返回首页