Assets,指项目中被引用的资源,通常为各种格式的图片和字体文件,当然也可能包含各式各样其他扩展名的文件(.json,.xml等),常见的图片和文字资源的处理包括:
做过前端开发都知道前端的工作内容是很多的,对于HTML、CSS、Javascript、Image、Flash等各种内容的使用。为了更好提升应用的性能,我们需要对各种资源内容进行不同方面的优化。
postcss-lazysprite 是一个基于PostCSS 开发的用于生成雪碧图图片及其CSS 的插件,经过半年持续迭代,现已稳定用在旗下两款产品的Web 业务中。其与市面上的雪碧图插件不同在于生成雪碧图的“懒惰”姿势。 前言 前端界,伴随着雪碧图这个概念出现,自动化产生雪碧图这类工具就层出不穷。无论是早期GUI 工具,还是现在流行的配合Gulp/Grunt/Webpack 这类构建工具而产生的雪碧图插件。总之是百花齐放,长江后浪推前浪,后浪死在沙滩上。 根据输入方式的不同,现在市面上基于Node.js
使用的时候,通过background-position调整显示的位置,如下图所示:
从前我以为 HTTP/2 开启以后,雪碧图可以逐渐退出舞台,现在感觉到自己的天真。且不论 svg 如果做成雪碧图可以通过 gzip 受益不少,多个单张的 png 还是比起一张要浪费请求。
公司研发的系统为B/S架构,用户使用浏览器访问系统时,使用浏览器自带工具查看,对图片的请求数极多,多为小图片。 今天想对这个现状进行改善,网上查到一种雪碧图的方案,其实就是使用工具将数量很多的小图片拼成一张大图片,然后css里都引用这张大图片,并指定显示该图片的某一个区域,但这个方案需要手工作很多处理。 于是就想到能不能用目前比较成熟的grunt对前端样式文件自动进行处理,自动生成雪碧图,自动修改样式文件。一搜索果然找到了方案,下面为Gruntfile.js文件的片断: module.exports = f
什么是Css sprite? Css sprite:又被称为Css精灵,它是一种性能优化技术,它将多个图像合并到一个通常被称为雪碧图的图像中。 Sprint通过减少呈现网络所需的下载次数来减少网络堵塞。 在一个网站里,每一个图片通常储存在一个单独的文件中,其中的一些图片可能是相关的,或者是同一个图片的变体,例如一个按钮在普通状态和高亮状态下使用的两个不同的图片。当用户打开网络时,他们的浏览器必须一个一个的请求这些图片,这样便可能导致页面呈现较慢。 然而使用CSS Sprite,多个图片被整合到一个精灵图中,
大家好,这里是@IT·平头哥联盟,我是`首席填坑官`——苏南,今天要给大家分享的是SVG sprite(也叫雪碧图),所谓雪碧图,当然就不是我们常喝的雪碧饮料(Sprites)哦,哈哈~
如项目代码目录展示的那样,除了常见的app.js作为入口文件,我们将用到的 3 张图片放在/src/assets/img/目录下,并在样式文件base.css中引用这些图片。
本文主要讲述一下 伪元素 before 和 after 各种妙用。 :before和::before的区别 在介绍具体用法之前,简单介绍下伪类和伪元素。伪类大家听的多了,伪元素可能听到的不是那么频
在知乎上看到了一个提问,大概意思是使用xpath为什么无法获取到租房价格信息。问题的链接在这里:
最近在研读 《CSS SECRET》(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值得一看)。采用单标签完成各种图案,许多图案与本文有关。 也希望觉得不错的同学顺手在我的 Github 点个 star : CSS3奇思妙想 。 正文从这里开始,本文主要讲述一下 伪元素 before 和 after 各种妙用。 :before和::before的区别 在介绍具体用法之前,简单介绍下伪类和伪元素。伪类大家
当项目越来越复杂时,会面临着构建速度慢和构建出来的文件体积大的问题。webapck构建优化对于大项目是必须要考虑的一件事,下面我们就从速度和体积两方面来探讨构建优化的策略。
在介绍具体用法之前,简单介绍下伪类和伪元素。伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的。
使用一个Vue实例作为中央事件总线。 Vue内部有一个事件机制,可以参考源码。 $on方法用来监听一个事件 $emit用来触发一个事件。
翻到了 2018 年左右团队支持的一个项目,当时看重构同学不断的在和设计师来回沟通调动画细节,就在想能不能提升下这里的效率,于是了解了下当时的实现过程,大概是这样的:
- 对于浏览器而言,html文件是用户访问的入口点,也是所有资源的挂载点,所有资源都是通过html中的标记来进行引用的。
我们喝的雪碧,它的英文也是 sprite,应该直译为 “精灵” 的。但要符合中国市场,因为你不能说我喝的饮料叫“精灵”,那特别怪。于是就走音译的路线,翻译成 “雪碧” 了。
前言 说起动画H5,作为一个前端,可谓是“又爱又恨”。爱的是加上动画动效后H5会变得生动有趣,吸引力Max;恨的是做动画时都是一边在脑海中yy效果,一边用css、js代码模拟出来,既低效又
在计算机中,像素用二进制数来表示。不同的图片格式中像素与二进制位数之间的对应关系是不同的。一个像素对应的二进制位数越多,它可以表示的颜色种类就越多,成像效果也就越细腻,文件体积相应也会越大。
本文将从各个角度来对动画整个体系进行分类,并且介绍各种前端动画的实现方法,最后我们将总结在实际开发中的各个场景的动画选择方案。
作者:addy(许斌),前端开发工程师,文艺青年一枚,写得了文章,编得了代码。 作为开发,不仅仅是前端,优化总是你绕不开的事,我们的目标就是要产品变得更快。优化的对象不仅仅指产品本身,还有我们日常的开发流程。从加入团队到现在,大概有一半左右的时间花在了优化上,期间遇到了很多问题,回过头看,优化这件事情并不是那么简单,也是些很琐碎的事情,要打造一个无痛的开发流程,并且能够相对轻松的对产品持续优化真的不轻松。没有银弹,任何项目都要花很多时间和精力。但任何值得改善的地方能够有所提升都让我们觉得努力没白费。有时候只
雪碧图并不陌生,将多张图片合在一起来减少请求数,从而提升网站的性能。在你的网站未支持 HTTP2 前,还是值得这么处理。
最近看项目视频的时候对里面使用 svg 的方式感到很好奇,于是去网上查了一下,发现 svg 竟然也有类似于 css 雪碧图一样的用法,也就是 svg-sprite(孤陋寡闻了),而且配合插件后能够以组件化的方式使用 svg,非常方便。这里记录下一些相关用法。
当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。
承接上期讲堂君推荐的《玩转HTML5移动页面(动效篇)》,动效篇说的是让页面动起来的一些小技巧。 而页面动起来的根基是功能可用的页面,因此有必要分享一些优化细节的技巧和方向,熟悉掌握一些方法论还是会对页面开发大大提高效率的,并且也能防止疏忽缺漏。 1动画雪碧图 涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite)! 网上的工具有一些可以帮助你生成雪碧图的工具,例如CssGaga,GoPng等等,自动化构建工具Grunt和Gulp也提供了相应插件。 特别地,如果单张雪碧图面积实在太大,可以拆
一般来说,我们的个人博客都会放上一些社交图标以及社交链接。这样一来,想要关注我们更多的最新研究或工作的读者就可以很快找到路径。于是,在 Jekyll 博客主题设计的时候,通常会在个人简介的地方放置几个社交小图标,点击社交小图标即可把读者带到你的社交个人主页上。对于不同类型的作者,常用的或者关注的社交平台基本上不大一样,社交小图标也会有不一样的需求。比如说,对于从事科研工作的人来说,像谷歌学术、ResearchGate、ORCID 等等能够列举发表论文或者相关研究的平台就比较重要;对于一般程序员来说,像 Github、Gitlab、Segmentfault、CSDN、简书等等能够展示自己所参与的项目和技术心得体会的平台就比较重要;对于前端设计师来说,像 Instgram、UI 中国、Dribble等等能够展示 UI 设计作品的平台就比较重要。因此,对于一款 Jekyll 博客主题的设计者来说,同时要兼顾到这么多不同的需求可能会有点为难,毕竟领域不同、了解的程度也很有限。
NPlayer 是由 Typescript 加 Sass 编写,无任何第三方运行时依赖,Gzip 大小只有 21KB,兼容 IE11,支持 SSR。该播放器高度可定制,所有图标、按钮、色彩等都可以替换,并且提供了 内置组件 方便二次开发。它还拥有插件系统,弹幕功能 就是使用插件形式提供。该播放器可以接入任何 流媒体,如 hls、dash 和 flv 等。
前端,我一直觉得到了一定程度,那些大牛开发项目已经是拼细节了,因为大方向都是不变的,重要的就是对于细节的把控和对前端的优化。
承接上文《玩转HTML5移动页面(动效篇)》,上次说的是让页面动起来的一些小技巧。 而页面动起来的根基是功能可用的页面,因此有必要分享一些优化细节的技巧和方向,熟悉掌握一些方法论还是会对页面开发大大提高效率的,并且也能防止疏忽缺漏。 ====前方高能==== (1) 动画雪碧图 涉及的动画十分多,用的元素也十分多,请务必使用雪碧图 (Sprite)! 网上的工具有一些可以帮助你生成雪碧图的工具,例如CssGaga,GoPng等等,自动化构建工具Grunt和Gulp也提供了相应插件。 特别地,如果单张
——本文是对之前同名文章的修正,将所有webpack3的内容更新为webpack4,以及加入了笔者近期在公司工作中学习到的自动化思想,对文章内容作了进一步提升。
使用插件webpack-spritesmith生成雪碧图 1、安装webpack-spritesmith; npm install --save-dev webpack-spritesmith 2.配置webpack.config.js new SpritesmithPlugin({ //生成的雪碧图本身就压缩了图片大小 src: { cwd: path.resolve(__dirname, 'src/image/icon'),
《生活大爆炸》中 让大家折腾不已的时光机问题 小编想说 谢耳朵这么折腾也就算了 没想到前端优化也是如此折腾不止 写在前面 作为开发,不仅仅是前端,优化总是你绕不开的事,我们的目标就是要产品变更得更快。优化的对象不仅仅指产品本身,还有我们日常的开发流程。要打造一个无痛的开发流程,并且能够相对轻松的对产品持续优化真的不轻松。没有银弹,任何项目都要花很多时间和精力。但任何值得改善的地方能够有所提升都让我们觉得努力没白费。有时候只想懒一点,从枯燥的重复中解放出来。 从作者加入团队到现在,过程中遇到了很多问题
Visual Studio 2017 扩展 Visual Studio 2017 15.4.4 : 目前是最新的版本号,所有的工具&插件都支持这个版本号。所以请对号入座。 ReSharper : 首先的是Resharper,这个基本是目前是我开发过程中必备的工具集,唯一的缺点就是吃内存,所以你的内存要是低于8G,就不要使用它了。它的特点可以快速重构、高亮显示错误、导航和搜索都很方便、智能提示、智能复制这个我特别喜欢等等,用着它你会感受到很多惊喜。 Extensibility Tools :必备工具,他是基
在网页设计与开发领域,提高页面加载速度和优化用户体验是永恒的主题。CSS Sprites(精灵图)作为一种经典的图片合并技术,通过减少HTTP请求次数,有效提升了网站性能。本文将深入浅出地探讨CSS Sprites的核心概念、常见问题、易错点及规避策略,并通过实例加深理解。
构建发布到项目根目录下的output(该文件夹名称任意)目录中; 当然,你也可以发布到其他盘符中(windows系统下); 4. 成功之后,你变output目录下方看到一个经过构建之后的项目了~ 5. 通过diffMerge这个文件比较工具,可以发现其中的一些改动,即构建之前和构建之后的变化:
本文是对之前同名文章的修正,将所有webpack3的内容更新为webpack4,以及加入了笔者近期在公司工作中学习到的自动化思想,对文章内容作了进一步提升。
本文主要介绍了在腾讯云中设计器导出SVG的注意事项和优化点,包括导出设置、命名规范、分层、分组、使用画板、导出图片、内联样式、保留小数点、缩小和响应式设置以及字体和图像的优化。此外,还提供了关于Sketch和AI导出的SVG的代码示例和注意事项。
这篇文章英文原文发表于Smashing Magazine,感谢小影 的为我们带来的全文翻译。内容上讲解比较通俗易懂,非常适合初学者。 几个月前,我做了一个实验,看看在 2 小时内我可以为自己的网站提升多少速度。在安装了几个 WordPress 插件和修复了一些简单的错误后,我把网站的载入速度从 1.61 秒提升到了 583 毫秒。这可是足足 70.39% 的速度提升,且无需对网站的视觉做出任何更改。 根据 Akamai 在 2009 年的研究,47% 的访客希望页面在 2 秒内加载完,并且有 57% 的访客
非布局样式-字体 * 字体 字重 颜色 大小 行高 和文字相关的一些 * 背景 边框 和盒子相关的 * 滚动 换行 跟 页面 和 布局有关 * 粗体 斜体 下划线 文字装饰性的样式 * 其它 * 字体族(font-family) -- serif 衬线字体:字体周围有装饰性的弯弯钩钩(比如 宋体) -- sans-serif 非衬线字体:字体笔画的开始和结束 都非常规则。如 屏幕上的文字(比如 黑体) -- monospace 等宽字体
本文由 jerryOnlyZRJ 首发于 IMWeb 社区网站 imweb.io。点击阅读原文查看 IMWeb 社区更多精彩文章。 本文是对之前同名文章的修正,将所有webpack3的内容更新为webpack4,以及加入了笔者近期在公司工作中学习到的自动化思想,对文章内容作了进一步提升。 0.引言 作为互联网项目,最重要的便是用户体验。在举国“互联网+”的热潮中,用户至上也已经被大多数企业所接收,特别是在如今移动端快速发展的时代,我们的网页不仅只是呈现在用户的PC浏览器里,更多的时候,用户是通过移动产品
icon在我们前端日常开发中是很常用的,它有很多种使用方式,时至今日,它的使用方式经过了很多种演变,本文会为大家介绍icon的一些历史演变,分析一下这几种使用方式的优劣,我们将采用svg sprites这种方式使用icon,演示代码使用vue+vue-cli3+,看完之后,你会发现这种使用方式完全称得上优雅二字
网站前端的用户体验,决定了用户是否想要继续使用网站以及网站的其他功能,网站的用户体验佳,可留住更多的用户。除此之外,前端优化得好,还可以为企业节约成本。那么我们应该如何对我们前端的页面进行性能优化呢?
学习设计模式已经有一段时间了,《大话》也正看第二遍,但是却迟迟不敢下笔。算了,先拿简单的开刀吧。
什么是css精灵图(sprite)?css精灵图怎么使用?下面本篇文章就来给大家介绍一下css精灵图的使用。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
前言 说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试。那本文谈到的则是H5前端性能测试,并希望通过阅读本文后,能够知道:H5前端性能测试什么?如何发现问题以及相应的优化规则。 一、浏览器渲染引擎 浏览器是Html解析和页面最终展示的工具,所以测试H5前理解浏览器的工作原理是必不可少的,具体可参考《浏览器工作原理》。 浏览器的主要功能 浏览器的主要功能是将用户选择的web资源呈现出
说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试。
领取专属 10元无门槛券
手把手带您无忧上云