今天分享一下,未来会用到的面试小题
目录
高频面试题一、
1、你都做过哪些兼容性问题?
2、如何提高页面性能?
1、你都做过哪些兼容性问题?
HTML兼容性:
h5新标签只能兼容到ie9,如果想要兼容ie低版本浏览器,需要引入html5shiv.js文件,其cdn写法如下:
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
CSS兼容性:
1.1、媒体查询兼容性,ie9以下不支持媒体查询,需要引入response.js文件,其cdn写法如下:
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
1.2、CSS Hack:
1.2.1、属性前缀:例如 IE6能识别下划线和星号,IE7能识别星号,但不能识别下划线,IE6~IE10都认识"\9",但firefox前述三个都不能认识。
.red { _color: red; /* ie6 */ *color: red; /* ie7 */ color: red\9; /* ie8/9/10 */ }
1.2.2、选择器前缀:例如 IE6能识别 * html .class{},IE7能识别 +html .class{}或者*:first-child+html .class{}。
*.red {} /* ie6 */ +.red {} /* ie7 */
1.2.3、条件注释:
针对所有IE(注:IE10+已经不再支持条件注释):
<!--[if IE]>IE浏览器显示的内容 <![endif]-->
针对IE6及以下版本:
<!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->
这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
1.3、厂商前缀:谷歌-webkit-、火狐-moz-、IE-ms-、欧朋-o-
1.4、其它兼容性:
1.4.1、ie老版本浮动造成的双边距问题:display:inline;
1.4.2、图片间隙:父盒子设置font-size: 0; 或者图片设置display: block;
1.4.3、块元素默认高度:overflow: hidden;
JavaScript兼容性:一般使用渐进增强和优雅降级的方式来解决兼容性问题。
// 优雅降级 var xhr = null; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } // 渐进增强 // 前边实现上传文件的基本功能 // 后边再判断如果支持拖拽事件,就实现拖拽上传
2、如何提高页面性能?
2.1、图片压缩、合并(精灵图)、使用字体图标代替小图片、使用base64、图片懒加载
2.2、css、js的压缩、封装复用
2.3、减少重排操作,例如使用transform书写动画效果,在for循环结束后再去操作dom等
2.3、使用CDN网络托管
2.4、数据懒加载、数据按需加载(上拉加载)、分页
2.5、路由懒加载
2.6、利用缓存来缓存文件
2.7、频繁触发的事件进行防抖和节流
2.8、异步加载
2.9、减少闭包,递归优化,使用高效的算法
2.10、webpack优化:去除无用代码treeShaking、组件按需加载、使用chunck、模板预编译等
2.11、字库用gb2312不要utf-8,一个汉字少一个字节