关键字:雪碧图
  • npm script 工作流(十二)构建流水线
    构建内容 源代码预编译:比如 less、sass、typescript; 图片优化、雪碧图(CSS Sprite)生成; JS、CSS 合并、压缩; 静态资源加版本号和引用替换; 静态资源传 CDN 等。 项目目录结构 client ├── ...
  • 前端网络高级篇(六)网站性能优化
    网站性能优化可以从下面总结点入手。 1. 减少HTTP请求 使用雪碧图 - CSS Sprites,把多个图片合并到一个单独的图片中,利用CSS -background-position调整图片显示位置。这种方式适用面比较广泛。 缺点是,如 ...
  • 你知道雪碧图吗?有哪些优缺点?
    这道题实际上考的是前端性能优化的一个点。 雪碧图的英文是CSS Sprites。 其目的是将多张比较小的图片,合并到一张大的图片上面,大的图片背景透明,使用的时候,通过把该张图片当做背景图片,通过不同的 background-positio ...
  • 前端面试出现频率最高问题——前端性能优化
    这是我第16篇简书。 整体思路: 性能优化是什么? 从用户角度来看,什么才是好的页面?一个是页面加载的很快,另一个是页面使用起来很流畅。 那么对应到前端开发的角度,性能优化可以对应分为两个方向:页面加载时间跟页面运行效率。 从浏览器打开到页 ...
  • 前端知识体系5.性能优化
    本文目录: 1.前端性能优化思路 2.如何理解回流和重绘? 3.CDN 是什么? 4.Webpack性能优化 优化开发体验 ①缩小文件搜索范围 ②DllPlugin可以将特定的类库提前打包然后引入 ③HappyPack 优化输出质量 ①按需 ...
  • 【面试题】HTTP知识点整理(附答案)
    目录 HTTP1.x、HTTP2、HTTP3 HTTP1.0 和HTTP1.1的一些区别 HTTP2.0和HTTP1.X相比的新特性 为什么 HTTP1.1 不能实现多路复用 多路复用和 keep alive区别 HTTPS HTTP和HT ...
  • web前端入门到实战:宣传页项目实战
    编辑器:sublime text3 标注工具:PxCook 切图工具:PS 开发前准备:设计图标注 PxCook 空格键可以上下拖动 大致标注图纸:(可惜不能文字标注和拉参考线) 开发前准备:PS切图 在指定图层上新建一个图层,使用ctr ...
  • 【综合篇】Web前端性能优化原理问题
    (给达达前端加星标,提升前端技能)​ 想要成为一名合格的Web前端工程师,Web前端性能优化是一个必须要掌握的知识,那么应该怎么进行Web前端性能优化呢?--达达前端Web前端性能优化原理问题​ 前端性能优化,资源的合并与压缩,图片编码的原 ...
  • 【前端进阶100天】Day07 图片整合技术|宽高自适应|过滤器|伪对象选择符
    今日内容: 1、图片整合的概念,使用图片整合的优势 2、最小宽度、最小高度、最大宽度、最大高度 3、过滤器的使用 4、宽高自适应的概念和使用 5、最小高度和高度自适应引发的兼容问题(针对IE浏览器) 6、浮动元素父元素高度自适应引发的高度坍 ...
  • web页面使用字体图标
    刚学web开发的时候,网页上的图标都是用标签引入一张小图片来实现的,这样的好处是简单、易上手。但是渐渐地,开始注重页面细节和用户体验,就会发现这种方式存在一些弊端:随着页面放大,图片会出现锯齿和马赛克,不能一直保持清 ...

暂无数据