灵魂拷问-前端到底能做些什么?--性能优化篇

可以通过社区成熟的CSSModules方案,模块化CSS,达到按需加载的效果,只加载需要内容。CSS精灵图CSS精灵图[11]是一种面试常说,但是我还没实践过的方案。精灵图将我们希望在站点上使用的多个小图像(例如图标)放入单个图像文件中,然后使用不同的background-position[12]值在不同的位置显示图像的一部分。这可...

如何在基于vue-cli的项目中,使用精灵图 css sprite

//输出雪碧图文件及样式文件target:{image:path.resolve(__dirname,'./src/assets/images/sprite.png'),//生成雪碧图的目录css:[[path.resolve(__dirname,'./src/assets/css/sprite.less'),{format:'function_based_template'}]]//生成雪碧图对应的},customTemplates:{'function_based_te...

做前端开发必需要掌握切图技能吗?

有的公司UI设计师会把需要的图切好,更多时候是需要前端工程师自己来切。如果你不会切图而每次都要依赖UI设计师,当UI设计师比较忙或者不在时,那么前端工作就会停滞不前。所以,技多不压身,掌握切图技能还是很有必要的。有时,前端工程师在写前端页面的时候会遇到CSS精灵图,如果自己不会切图而求助其他人,不仅会...

超硬核技术分析:P社新大作《城市天际线2》如何“因性能而大败”?

节省内存的技巧是,大的纹理可以分成多个贴图,所以如果你有一个大的纹理,只在屏幕的一小部分可见,你只需要加载实际可见的贴图。虚拟纹理可见性信息是在稍后的通道中作为正常渲染的副产品产生的,并且可见性信息用于CPU端来确定哪些贴图需要加载,哪些可以卸载。如果你想进一步了解,虚幻引擎的文档似乎提供了更详细的技术描述...

在建网站的中常见的五种背景图片的使用方法

第五种用法:网页精灵图(csssprites)所谓网页精灵图Sprites即使用一张大图把整个或部分网页用到的小图都全部集中到一张图片上,然后在网页使用时再通过各个小图的坐标位置来分别调用,使用负值来调用分别对应的图片位置。