附件四（35期就业班前端面试总结）1
需积分: 0 124 浏览量
2022-08-08
20:02:30
上传
评论
收藏 215KB DOCX 举报
1. 精灵图(CSS Sprites)的优点和缺点
精灵图是一种网页图片应用处理方式。就是把网页中很多小背景图片整合到
一张图片文件中，再利用 CSS 的“background-image”，“background-repeat”，
“background-position”的组合进行背景图显示及定位，达到显示某一部分背
景图的效果。
精灵图的优点：
1、减少图片的体积，因为每个图片都有一个头部信息，把多个图片放到
一个图片里，就会共用同一个头部信息，从而减少了字节数。
2、减少了网页的 http 请求次数，从而加快了网页加载速度，提高用户体
验。
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命
名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，
整个网页的风格就可以改变。维护起来更加方便。
精灵图的缺点：
1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还
要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在
宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背
景断裂；
2.在开发的时候比较麻烦，你要通过 photoshop 或其他工具测量计算每一
个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；
3.在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合
并的图片，无需改的地方最好不要动，这样避免改动更多的 css，如果在原来
的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要
改动 css。
4.精灵图不能随意改变大小和颜色。精灵图改变大小会失真模糊，降低用
户体验，css3 新属性可以改变精灵图颜色，但是比较麻烦，并且新属性有兼容
问题。现在一般都是用 web 字体(图标字体)来代替精灵图。
2. 什么是 vue 全家桶
Vue + vue-router + vuex + axios + es6 + sass
3.doctype 是什么，网页常见 doctype 及特点
剩余14页未读，继续阅读
评论0