前端综合面试题
link和@import的区别
link是HTML标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等;@import是css语法,只有导入样式表的作用。
加载页面时,link会和HTML同时加载,而@import将会在页面加载完毕之后被加载。
兼容性区别,@import是CSS2.1才有的语法,故只可在IE5+才能识别;link标签作为HTML元素,不存在兼容性问题。
DOM操作,DOM可以操作link中的样式,而不可以操作@import中的样式。
网上有一种声音说link权重比@import高,其实并没有,具体大家可以自己实践。
img标签 alt和title的区别
title:鼠标移入图片显示的值
alt:图片无法加载时显示的图片
在SEO的层面上,爬虫抓取不到图片的内容,所以在写img标签的时候为了增加SEO效果可以用alt属性来描述这张图的内容或者关键词
substr和substring的区别
1. substr 是从起始索引号开始提取指定长度的字符
1 | var str="abcdefg" |
substr(1 ,3 ) 即表示从b(索引号1 )开始提取3(3 )个字符。也可以说提取索引1 到索引为3 的位置,取头取尾
2. substring是提取字符串中两个指定索引号之间的字符。
1 | var str="abcdefg" |
substring(1 ,3 ) 即表示提取从(索引号1 )到(索引号3 )之间的字符(不包括3 ),取头不取尾。
slice和splice的区别
相同点:都是对数组进行截取。
不同点:slice不会改变原数组,但是splice会直接改变原数组。
slice
slice()
方法返回一个新的数组对象,这一对象是一个由begin
和end
决定的原数组的浅拷贝(包括begin
,不包括end
)。原始数组不会被改变。
splice
splice()
方法通过删除或替换现有元素或者原地添加
新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
1 | array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) |
谷歌浏览器字体小于12px
1.使用transform来解决,如:
1 | transform:scale(0.8) |
transform除了会缩小字体外,也会缩小盒子的大小
2.使用zoom的方式,如:
1 | td{font-size:12px;zoom:0.83} |
它不会有transform的问题,不会导致盒子缩放。且PC项目环境使用谷歌浏览器,可以支持zoom属性,移动端经测试也兼容。
事件循环—宏任务微任务
深拷贝和浅拷贝
简单来说浅拷贝就是只拷贝一层。
深拷贝就不会像浅拷贝那样只拷贝一层,而是有多少层我就拷贝多少层