前端面试题

最新推荐文章于 2023-02-08 22:55:37 发布

天空之蓝钻

最新推荐文章于 2023-02-08 22:55:37 发布

阅读量186

点赞数

CC 4.0 BY-SA版权

分类专栏：面试相关

本文链接：https://blog.youkuaiyun.com/huangssssx/article/details/99830489

面试相关专栏收录该内容

1 篇文章

订阅专栏

1. script标签中defer和async属性的区别

答：
a> 如果没有defer和async
浏览器会立即加载并执行js脚本，此时后续文档流的渲染将会被阻塞。

b> 如果是defer标志
当浏览器遇到这种标签时，会开始加载script标签内容，但是不会阻塞后续文档元素的渲染，待所有页面元素解析完成后，DOMContentLoaded 事件触发之前执行这个script标签的代码。

c> 如果是async标志
浏览器遇到这种标签时，加载和执行脚本的同时也不会阻塞其他文档元素的渲染，但是async的脚本不保证按照指定它们的先后顺序执行。无论你声明的顺序是什么，只要它加载完了就会立刻执行。

2. `为什么通常推荐将 CSS <link> 放置在 <head></head> 之间，而将 JS <script> 放置在 </body> 之前？`

答：

css放在head中：css放在head中，是因为浏览器解析html文档是自上而下的，如果放底部的话，页面结构出来了，css还没开始渲染，可能会看到只有结构的页面.CSS 应当写在 head 中，以避免页面元素由于样式确实造成瞬间的白页或者给用户闪烁感。
js放在/body之前：
JS可能会改变DOM树，也可能依赖css样式。如果放在前面，那么DOM和css可能还未加载，这样容易报错。
性能：js放前面，页面会先去加载他，拖慢了时间，使用户在一定时间内看不到网页内容。

3. 外边距崩塌 margin collapse 是什么意思？如何解决父子元素的外边距塌陷方法？

答：
流内块组件的top/bottom有时候会合并为单个外边距（合并后最大的外边距），这样的现象被称为外边距塌陷。
解决父子元素的外边距塌陷方法：
父组件设置border属性：border:1px solid transparent;
父组件或者子组件增加float：left/right属性。
父组件设置position:absolute属性。
子组件设置display:inline-block。
（一个浮动的盒与任何其它盒之间的margin不会合并（甚至一个浮动盒与它的流内子级之间也不会））
父组件设置：overflow:hidden/auto

4. display: block;和display: inline;的区别是什么？

答：
block元素特点：
1.处于常规流中时，如果width没有设置，会自动填充满父容器 2.可以应用margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略vertical-align
inline元素特点
1.水平方向上根据direction依次布局 2.不会在元素前后进行换行 3.受white-space控制 4.margin/padding在竖直方向上无效，水平方向上有效 5.width/height属性对非替换行内元素无效，宽度由元素内容决定 6.非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定 6.浮动或绝对定位时会转换为block7.vertical-align属性生效

5.什么是跨域？跨域通信有哪些方式？

答：
同源：两个文档同源需满足
协议相同
域名相同
端口相同
不满足以上任意一个条件的，就被判断是跨域通讯。
跨域通信：js进行DOM操作、通信时如果目标与当前窗口不满足同源条件，浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法
如果是log之类的简单单项通信，新建,

6. 什么是三元表达式 (Ternary expression)？“三元 (Ternary)” 表示什么意思？

答：

三元表达式：三元运算符需要三个操作数。问号前面的位置是判断的条件，判断结果为bool型，为true时调用表达式1，为false时调用表达式
三元表示运算时需要的三个表达式。

7.position的值有哪些？， relative和absolute分别是相对于谁进行定位的？

答：
absolute :生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。
fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
static 默认值。没有定位，元素出现在正常的流中
sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

8. javascript有哪几种数据类型

答：
六种基本数据类型
undefined
null
string
boolean
number
symbol(ES6)
一种引用类型
Object

9. 什么是闭包？,闭包有什么用？

答：
闭包是在某个作用域内定义的函数，它可以访问这个作用域内的所有变量。闭包作用域链通常包括三个部分：
函数本身作用域。
闭包定义时的作用域。
全局作用域。
闭包常见用途：
创建特权方法用于访问控制
事件处理程序及回调

10. 如何判断一个对象是否为函数

答：

/**
 * 判断对象是否为函数，如果当前运行环境对可调用对象（如正则表达式）
 * 的typeof返回'function'，采用通用方法，否则采用优化方法
 *
 * @param {Any} arg 需要检测是否为函数的对象
 * @return {boolean} 如果参数是函数，返回true，否则false
 */
function isFunction(arg) {
    if (arg) {
        if (typeof (/./) !== 'function') {
            return typeof arg === 'function';
        } else {
            return Object.prototype.toString.call(arg) === '[object Function]';
        }
    } // end if
    return false;
}