• 前端面试题总结

    1. html5新特性、语义化

    • html5新特性

      音频video 视频 audio、画布canvas、H5存储localStorage sessionStorage

    • 语义化标签 ： header nav main article section aside footer

      语义化意味着顾名思义，HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构 如 header,footer,nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div。

      语义化的优点:

      对搜索引擎友好,有了良好的结构和语义,网页内容自然容易被搜索引擎抓取。 其他开发者便于阅读代码 结构明确,语义清晰的页面能有更好的用户体验 方便其他设备阅读(如屏幕阅读器,盲人设备和移动设备等)

    2. 浏览器渲染机制、重绘、重排

    一、网页生成过程：

     

    网页的生成过程，大致可以分成五步

    1. HTML 代码转化成 DOM

    2. CSS 代码转化成 CSSOM（CSS Object Model）

    3. 结合 DOM 和 CSSOM，生成一棵渲染树（包含每个节点的视觉信息）

    4. 生成布局（layout），即将所有渲染树的所有节点进行平面合成

    5. 将布局绘制（paint）在屏幕上

    　　这五步里面，第一步到第三步都非常快，耗时的是第四步和第五步。

    　　"生成布局"（flow）和"绘制"（paint）这两步，合称为"渲染"（render）

     

    　二、重排(也称回流)和重绘

    　　网页生成的时候，至少会渲染一次。用户访问的过程中，还会不断重新渲染。

    　　以下三种情况，会导致网页重新渲染。

    1. 修改 DOM

    2. 修改样式表

    3. 用户事件（比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等）

    　　重新渲染，就需要重新生成布局和重新绘制。前者叫做"重排"（reflow），后者叫做"重绘"（repaint）。

    　　需要注意的是，"重绘"不一定需要"重排"，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变。但是，"重排"必然导致"重绘"，比如改变一个网页元素的位置，就会同时触发"重排"和"重绘"，因为布局改变了。

    三、对于性能的影响

    　　重排和重绘会不断触发，这是不可避免的。但是，它们非常耗费资源，是导致网页性能低下的根本原因。

    　　提高网页性能，就是要降低"重排"和"重绘"的频率和成本，尽量少触发重新渲染。

    　　前面提到，DOM 变动和样式变动，都会触发重新渲染。但是，浏览器已经很智能了，会尽量把所有的变动集中在一起，排成一个队列，然后一次性执行，尽量避免多次重新渲染。

    div.style.color = 'blue';
div.style.marginTop = '30px';

    　　上面代码中，div 元素有两个样式变动，但是浏览器只会触发一次重排和重绘。

    　　如果写得不好，就会触发两次重排和重绘。

    div.style.color = 'blue';
var margin = parseInt (div.style.marginTop);
div.style.marginTop = (margin + 10) + 'px';

    　　上面代码对 div 元素设置背景色以后，第二行要求浏览器给出该元素的位置，所以浏览器不得不立即重排。

    　　一般来说，样式的写操作之后，如果有下面这些属性的读操作，都会引发浏览器立即重新渲染。

    1. offsetTop/offsetLeft/offsetWidth/offsetHeight

    2. scrollTop/scrollLeft/scrollWidth/scrollHeight

    3. clientTop/clientLeft/clientWidth/clientHeight

    4. getComputedStyle ()

    　　所以，从性能角度考虑，尽量不要把读操作和写操作，放在一个语句里面。

    // bad
div.style.left = div.offsetLeft + 10 + "px";
div.style.top = div.offsetTop + 10 + "px";
​
// good
var left = div.offsetLeft;
var top  = div.offsetTop;
div.style.left = left + 10 + "px";
div.style.top = top + 10 + "px";

    　　一般的规则是：

    1. 样式表越简单，重排和重绘就越快。

    2. 重排和重绘的 DOM 元素层级越高，成本就越高。

    3. table 元素的重排和重绘成本，要高于 div 元素

    3. css盒子模型

    CSS 盒模型本质上是一个盒子，盒子包裹着HTML 元素，盒子由四个属性组成，从内到外分别是：content 内容、padding 内填充、border 边框、外边距 margin

    两种盒模型的区别

    标准盒模型：

    width = content-width
height = content-height

    怪异盒模型:

    width = content-width + padding-width + border-width
height = content-height + padding-height + border-height

    如何在CSS 设置这两个模型

    标准盒模型：

    box-sizing: content-box

    怪异盒模型：

    box-sizing: border-box

    4. css样式优先级

    !important>style>id>class

    5. 什么是BFC？BFC的布局规则是什么？如何创建BFC？BFC应用？

    什么是BFC

    BFC(Block formatting context)直译为“块级格式化上下文”。BFC它是一个独立的渲染区域，只有Block-level box（块元素）参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相关。
可以理解成：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部），BFC仍属于文档中的普通流
不是所有的元素，模式都能产生BFC。

    BFC的布局规则

    内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

    如何创建BFC

    float的值不是none。
position的值不是static或者relative
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不是visible

    BFC的作用

    利用BFC避免margin重叠
清除浮动的影响
防止文字环绕

    6. 盒子水平垂直居中方法

    四种方式：

    1. 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。

    2. 利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况。

    3. 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况。

    4. 使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。

    代碼如下：

    1. 第一种：给父级设置宽高100%，div设置绝对定位，left,right,top,bottom设置为0，margin：auto即可实现

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Document</title>
    8.     <style>
    9.       * { margin: 0;padding: 0; }
    10.       body, html { width: 100%;height: 100%;position: relative;}
    11.       .div { position: absolute;width: 200px;height: 200px;
    12.         background: salmon;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}
    13.     </style>
    14.   </head>
    15.   <body>
    16.     <div class="div"></div>
    17.   </body>
    18. </html>
    19. ​

    1. 第二种：利用绝对定位和tranform（过渡动画）实现，div绝对定位，left: 50%; top: 50%;然后设置 transform: translate3d(-50%,-50%,0);即可

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Document</title>
    8.     <style>
    9.       * {
    10.         margin: 0;
    11.         padding: 0;
    12.       }
    13.       body,
    14.       html {
    15.         width: 100%;
    16.         height: 100%;
    17.         position: relative;
    18.       }
    19.       .div {
    20.         position: absolute;
    21.         width: 200px;
    22.         height: 200px;
    23.         background: salmon;
    24.         left: 50%;
    25.         top: 50%;
    26.         transform: translate3d(-50%, -50%, 0);
    27.       }
    28.     </style>
    29.   </head>
    30.   <body>
    31.     <div class="div"></div>
    32.   </body>
    33. </html>
    34. ​

    1. 第三种：flex弹性盒布局，给父级div设置display:flex,设置水平和垂直居中 justify-content: center; align-items: center;

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Document</title>
    8.     <style>
    9.         html,body{height: 100%;}
    10.       .div {
    11.         width: 100%;
    12.         height: 100%;
    13.         display: flex;
    14.         justify-content: center;
    15.         align-items:center;
    16.       }
    17.       .box {
    18.         width: 200px;
    19.         height: 200px;
    20.         background: sandybrown;
    21.       }
    22.     </style>
    23.   </head>
    24.   <body>
    25.     <div class="div">
    26.       <div class="box"></div>
    27.     </div>
    28.   </body>
    29. </html>

    1. 第四种：div设置绝对定位，left: 50%; top: 50%距离左和上是margin-left：calc(-div自身宽度/2),margin-top:calc(-div自身高度/2)，也可以自己计算margin-left和margin-top的值

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Document</title>
    8.     <style>
    9.       * {
    10.         margin: 0;
    11.         padding: 0;
    12.       }
    13.       body,
    14.       html {
    15.         width: 100%;
    16.         height: 100%;
    17.         position: relative;
    18.       }
    19.       .div {
    20.         position: absolute;
    21.         width: 200px;
    22.         height: 200px;
    23.         background: salmon;
    24.         left: 50%;
    25.         top: 50%;
    26.         margin-left: calc(-200px / 2);
    27.         margin-top: calc(-200px / 2);
    28.       }
    29.     </style>
    30.   </head>
    31.   <body>
    32.     <div class="div">
    33.       <div class="box"></div>
    34.     </div>
    35.   </body>
    36. </html>

    7. 数据类型

    8. JavaScript类型判断的四种方法

    一、typeof

    typeof是一个操作符而不是函数，其右侧跟一个一元表达式，并返回这个表达式的数据类型。

    返回的结果用该类型的字符串(全小写字母）

    用于判断数据类型，返回值为6个[字符串]，分别为string、Boolean、number、function、object、undefined。

    1. console.log(typeof undefined) // undefind
    2. console.log(typeof null)   // object
    3. console.log(typeof true)   // boolean
    4. console.log(typeof 43)    // number
    5. console.log(typeof '21')   // string
    6. console.log(typeof {a:1})   // object
    7. console.log(typeof Symbol()) // symbol
    8. console.log(typeof 123n)   // bigint
    9. function a() {}
    10. console.log(typeof a)     // function
    11. var date = new Date()
    12. var error = new Error()
    13. console.log(typeof date)   // object
    14. console.log(typeof error)   // object

    ​

    二、instanceof

    instanceof 是用来判断 A 是否为 B 的实例，表达式为：A instanceof B，如果 A 是 B 的实例，则返回 true,否则返回 false。 在这里需要特别注意的是：instanceof 检测的是原型

    instanceof用来判断对象，代码形式为obj1 instanceof obj2（obj1是否是obj2的实例），obj2必须为对象，否则会报错！其返回值为布尔值

    通俗一些讲，instanceof 用来比较一个对象是否为某一个构造函数的实例。注意，instanceof可以准确的判断复杂数据类型，但是不能正确判断基本数据类型

    1. console.log(12 instanceof Number) // false
    2. console.log('22' instanceof String) // false
    3. console.log(true instanceof Boolean) // false
    4. console.log(null instanceof Object) // false
    5. console.log(undefined instanceof Object) // false
    6.  
    7. console.log([] instanceof Array)  // true
    8. console.log({a: 1} instanceof Object) // true
    9. console.log(json instanceof Object) // true
    10. function a() {}
    11. console.log(a instanceof Function) // true
    12. console.log(new Date() instanceof Date) //true
    13. console.log(reg instanceof RegExp) //true
    14. console.log(error instanceof Error) // true
     

    三、Object.prototype.toString.call()
     

    toString() 是 Object 的原型方法，调用该方法，默认返回当前对象的 [[Class]] 。这是一个内部属性，其格式为 [object Xxx] ，其中 Xxx 就是对象的类型。
     

    对于 Object 对象，直接调用 toString() 就能返回 [object Object] 。而对于其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息。
     

    1. console.log(Object.prototype.toString.call(1))     // [object Number]
    2. console.log(Object.prototype.toString.call(1n))     // [object BigInt]
    3. console.log(Object.prototype.toString.call('123'))   // [object String]
    4. console.log(Object.prototype.toString.call(true))    // [object Boolean]
    5. console.log(Object.prototype.toString.call(undefined)) // [object Undefined]
    6. console.log(Object.prototype.toString.call(null))    // [object Null]
    7. console.log(Object.prototype.toString.call({}))     // [object Object]
    8. console.log(Object.prototype.toString.call([]))     // [object Array]
    9. console.log(Object.prototype.toString.call(function a() {})) // [object Function]
    10. console.log(Object.prototype.toString.call(Symbol()))     // [object Symbol]
    11. console.log(Object.prototype.toString.call(Math))       // [object Math]
    12. console.log(Object.prototype.toString.call(JSON))       // [object JSON]
    13. console.log(Object.prototype.toString.call(new Date()))    // [object Date]
    14. console.log(Object.prototype.toString.call(new RegExp()))   // [object RegExp]
    15. console.log(Object.prototype.toString.call(new Error))    // [object Error]
    16. console.log(Object.prototype.toString.call(window)      // [object Window]
    17. console.log(Object.prototype.toString.call(document)     // [object HTMLDocument]
     

    ​
     

    四、constructor
     

    constructor属性，可以得知某个实例对象，到底是哪一个构造函数产生的。
     

    constructor属性表示原型对象与构造函数之间的关联关系，如果修改了原型对象，一般会同时修改constructor属性，防止引用的时候出错。所以，修改原型对象时，一般要同时修改constructor属性的指向。
     

    1. console.log('22'.constructor === String)       // true
    2. console.log(true.constructor === Boolean)      // true
    3. console.log([].constructor === Array)        // true
    4. console.log(document.constructor === HTMLDocument)  // true
    5. console.log(window.constructor === Window)      // true
    6. console.log(new Number(22).constructor === Number)  // true
    7. console.log(new Function().constructor === Function) // true
    8. console.log((new Date()).constructor === Date)    // true
    9. console.log(new RegExp().constructor === RegExp)   // true
    10. console.log(new Error().constructor === Error)    // true
     

    注意：
     

    1、null 和 undefined 是无效的对象，因此是不会有 constructor 存在的，这两种类型的数据需要通过其他方式来判断。
     

    2、函数的 constructor 是不稳定的，这个主要体现在自定义对象上，当开发者重写 prototype 后，原有的 constructor 引用会丢失，constructor 会默认为 Object
     

     

    9. []==false 和 ![]==false
     

    •  
      第一个 []==false 转为数字 0==0
       
    •  
      第二个 ![]==false 转为布尔 false==false
       
     

    js中布尔值为false的六种情况
     

    下面6种值转化为布尔值时为false，其他转化都为true
     

    1、undefined（未定义，找不到值时出现）
     

    2、null（代表空值）
     

    3、false（布尔值的false，字符串"false"布尔值为true）
     

    4、0（数字0，字符串"0"布尔值为true）
     

    5、NaN（无法计算结果时出现，表示"非数值"；但是typeof NaN===“number”）
     

    6、""（双引号）或’’（单引号） （空字符串，中间有空格时也是true）
     

    注意空数组空对象，负值转的布尔值时都为true
    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
LeetCode 6. Z 字形变换 找规律                            
    
网页游戏的测试流程                            
    
推荐一款es轻量级的压测工具                            
    
MySQL锁的详细讲解（全局锁、表级锁、行级锁）                            
    
状态设计模式完成商品的创建状态之间的流转                            
    
分贝通SAAS企业大数据体系建设经验分享                            
    
MIB 6.1810实验Xv6 and Unix utilities(3)pingpong                            
    
图论思想与UML应用 （上 ）开放封闭原则                            
    
样式的双向绑定的2种方式，实现样式交互效果                            
    
持续集成（CICD）- Jenkins插件安装失败解决办法                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/xm1037782843/article/details/53186742
                
    •