前端面试题2

2023-11-28 13:43:10

  • 浏览器的重绘和回流导致的性能问题

重绘和回流是渲染步骤中的一小节，但是这两个步骤对于性能影响很大。

重绘是当节点需要更改外观而不会影响布局的，比如改变 color就叫称为重绘
回流是布局或者几何属性需要改变就称为回流。
回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流。

所以以下几个动作可能会导致性能问题：

改变 window 大小
改变字体
添加或删除样式
文字改变
定位或者浮动
盒模型

  • opacity: 0、visibility: hidden、display: none 优劣和适用场景

display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击，
visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

  • JS有几种数据类型,其中基本数据类型有哪些?
    七种数据类型

Boolean
Null
Undefined
Number
String
Symbol (ES 6 新定义)
Object
(ES6之前)其中5种为基本类型:string,number,boolean,null,undefined,

ES6出来的Symbol也是原始数据类型 ，表示独一无二的值

Object为引用类型(范围挺大),也包括数组、函数,

  • CSS中 link 和@import 的区别

(1) link属于HTML标签，而@import是CSS提供的;

(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题

  • Position
    static–无定位
    relative—相对自己定位
    fixed—固定定位
    absolute----相对父元素定位
    sticky—基于瀛湖的滚动位置进行定位

  • ** display设置 **
    1.block 象块类型元素一样显示。
    2.inline 缺省值。象行内元素类型一样显示。
    3.inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
    4.list-item 象块类型元素一样显示，并添加样式列表标记。

  • 为什么要初始化CSS样式。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

  • BFC规范的理解

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。

  • Doctype作用? 严格模式与混杂模式如何区分？它们有何意义

  • 声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。

  • 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

  • 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

  • DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

  • 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

  • HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

  • DOM操作

  1. 创建新节点
createDocumentFragment() // 创建一个DOM片段
createElement() // 创建一个具体的元素
createTextNode() // 创建一个文本节点
  1. 添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() // 在已有的子节点前插入一个新的子节点
  1. 查找
getElementsByTagName() // 通过标签名称
getElementsByName() // 通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() // 通过元素Id，唯一性
  • iframe标签

作用：在我们自己的网站页面加载别人网站的内容

优点：

  1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
  2. Security sandbox
  3. 并行加载脚本

缺点：

  • iframe会阻塞主页面的Onload事件
  • 即时内容为空，加载也需要时间
  • 没有语意

结束

  • null和undefined的区别

null是一个表示"无"的对象，转为数值时为0
undefined是一个表示"无"的原始值，转为数值时为NaN

  • new操作符具体干了什么

创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型
属性和方法被加入到 this 引用的对象中
新创建的对象由 this 所引用，并且最后隐式的返回 this

  • document.write和 innerHTML 的区别

document.write 只能重绘整个页面

innerHTML 可以重绘页面的一部分

  • call()、apply()、bind()与this指向问题

this的指向问题，谁调用指向谁，没有被调用，不知道指向。

  • 直接通过函数名来调用函数，this指向全局变量window;
  • 通过对象.函数名调用函数，this指向该对象。

前端面试题2

  • 通过选择器选择元素加事件属性来绑定事件，this指向该DOM对象
document.getElementById('btn').onclick=function(){
    console.log('click'); //click
    console.log(this); //<button id="btn">button</button>
  }
  • 直接在DOM标签中写事件，this指向window
html:
<button onclick="modify()">add</button>
<span id="count">0</span>
<button onclick="modify()">reduce</button>
//我们可以通过modify(this)的方式将DOM对象传入

script：
// 操作方法
  function modify(){
    console.log(this); //window
  }

对象中的this指向问题

var a=1;//相当于window.a，this指向window
function printA(){//相当于window.printA,this指向window
  console.log(this.a);
}
var obj={
  a:2,
  foo:printA,//被foo调用，相当于指向obj.a
  bar:function(){
    printA();
  }
}

obj.foo(); //2，调用的是属于本身的函数，即obj.foo()，指向本身
obj.bar(); //1，调用的是一个函数，但是函数里面调用的函数不是属于本身的函数
var foo=obj.foo;
foo(); //1，我们把obj.foo值赋予了foo变量，在调用的时候就相当于是window.foo()了，打印1。

applay call bind的用法，改变函数的this指向
前端面试题2

obj.myFun.call(db)；　　　　// 德玛年龄 99
obj.myFun.apply(db);　　　 // 德玛年龄 99
obj.myFun.bind(db)();　　　// 德玛年龄 99
//bind是函数，你必须调用它才可以
上一篇：CF965C Solution


下一篇：C# 方法中的this参数