辰小小

辰小小

关注
发信
关注(28)粉丝(399)

【前端学习笔记】前端面试常见问题汇总2

React的虚拟DOM是什么？ 虚拟DOM的虚拟体现在哪？

答：我学的是Vue，也有虚拟DOM，虚拟DOM是指用JS对象去表示DOM节点，实现虚拟DOM节点转为真实DOM节点。
用 JavaScript 对象结构表示 DOM 树的结构；
然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。
然后用新的树和旧的树进行比较，记录两棵树差异把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了

diff算法如何实现

答：对比新旧两棵虚拟DOM树，遍历它的子节点，用patches数组去记录他们的变化，然后将变化的部分进行更新。

// diff 函数，对比两棵树，深度遍历每个节点
function diff (oldTree, newTree) {
  var index = 0 // 当前节点的标志
  var patches = {} // 用来记录每个节点差异的对象
  dfsWalk(oldTree, newTree, index, patches)
  return patches
}

// 对两棵树进行深度优先遍历
function dfsWalk (oldNode, newNode, index, patches) {
  // 对比oldNode和newNode的不同，记录下来
  patches[index] = [...]
  diffChildren(oldNode.children, newNode.children, index, patches)
}

// 遍历子节点
function diffChildren (oldChildren, newChildren, index, patches) {
  var leftNode = null
  var currentNodeIndex = index
  oldChildren.forEach(function (child, i) {
    var newChild = newChildren[i]
    currentNodeIndex = (leftNode && leftNode.count) // 计算节点的标识
      ? currentNodeIndex + leftNode.count + 1
      : currentNodeIndex + 1
    dfsWalk(child, newChild, currentNodeIndex, patches) // 深度遍历子节点
    leftNode = child
  })
}

2048小游戏的响应式设计是怎么实现的

答：

一个左侧固定右侧自适应的布局

答：float居左，相对于父容器布局，margin-left负边距-100%，left：0;

写一个函数每隔5秒调用它自身，总共调用100次，要求可以自定义调用次数和延时时间。

答：

var setFuncTime = function func(interval,count) {//利用函数名命名表达式来实现调用自身。利用函数内部的setTimeout来调用内部myFunc函数
        var myFunc = function(){
            if(count>0){
                try{
                //to do
                    console.log(count);
                    count--;
                    func(null);
                }
                catch(e){
                    count = 0;
                    throw e.toString();
                }
            }else{
                console.log("clear");
                clearTimeout(id);
            }
        };
        var id = setTimeout(myFunc,interval);
    };
    setFuncTime(5000,100);

setTimeout中第一个参数除了使用匿名函数包裹，还可以怎么调用一个含参函数？

答：两种方式。
1，setTimeout(function(a,b){}.bind(a,b),interval);

2，setTimeout(function(a,b){},interval,a,b);

前端怎么验证用户信息，怎么保存登陆状态？

答：将用户数据通过Ajax发送到服务器，认证。
cookie，session都可以保存登录状态。

css选择器优先级

答：id>class>tag>*
”important>内联 >ID>类 >标签 |伪类|属性选择 >伪对象 >继承 >通配符”

css可继承的属性

答：当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。
font-size是可以被继承的。但是它的方式有一些特别。Font-size的子类继承的不是实际值，而是计算后的值。
可以被继承的属性：
1，字体系列：font，font-family，font-size,font-style等；
2，文本系列：text-indent,text-align,text-shadow,line-height,word-spacing,letter-spacing,text-transform,direction,color;
3，元素可见性：visibility
4，表格布局属性：caption-side，border-collapse，empty-cells
5，列表属性：list-style-type，list-sytle-image，list-style-position
6，设置嵌套引用的引号类型：quotes
7，光标属性：cursor

注意：

多行文本垂直居中

text-align:justify；
因为多行文本最后一行不会居中。所以可以通过添加伪元素:after或者空伪装成最后一行。

列举常见的块级元素和内联元素

常见块级元素：
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
isindex – input prompt
menu – 菜单列表
noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表
常见内联元素：
a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
bdo – bidi override
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
dfn – 定义字段
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
s – 中划线(不推荐)
samp – 定义范例计算机代码
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线

手写深克隆

function deepClone(obj){
}

说说对闭包的理解

答：见文章

封装一个promise的思路

性能优化

标题多个块级元素一行排列，说出不同方法的特点

1，display:inline-block;
2，float

隐藏一个元素，也是说出不同方法的特点

1，visibility：会继承
2，background: rgba(,)：子元素不继承

对比一下react和vue的特点

Vue相关

1，说一说vue的生命周期，和react的有什么不同，shouldComponentUpdate的原理
2，vue组件的通信方式：父组件子组件：props,event；子组件：事件；​​​
3，web缓存，如何不命中缓存

js自定义事件，原生js组件的通信

​​

标题性能优化

设计通用组件

如何解决js长列表滚动渲染卡顿的问题

断点续传的原理

js中的arguments对象有了解？数组有的方法，它都有吗？有哪些没有呢？

答：arguments对象是所有（非箭头）函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引0处。
arguments对象不是一个 Array 。它类数组，但除了length属性和索引元素之外没有任何Array属性。例如，它没有 pop，shift 方法。
但是它可以被转换为一个真正的Array。
slice
最经典的方法，使用Array的slice方法，此方法如果不传参数的话会返回原数组的一个拷贝，因此可以用此方法转换类数组到数组；

var arr = Array.prototype.slice.call(arguments);
//等同于
var arr = [].slice.call(arguments)

Array.from()
是ES6中的方法，用于将类数组转换为数组。

var arr = Array.from(arguments);

只要有length属性的对象，都可以应用此方法转换成数组。
还有
args = […arguments];

jQuery中$有哪几种重载方法？就是说它可以接收哪几种数据类型？JQuery中的选择器有哪些？

  1. jQuery([selector,[context]])
  2. jQuery(element)
  3. jQuery(elementArray)
  4. jQuery(object)
  5. jQuery(jQuery object)
  6. jQuery(html,[ownerDocument])
  7. jQuery(html,[attributes])
  8. jQuery()
  9. jQuery(callback)

选择器有：
一、基本选择器
二、层次选择器
三、过滤选择器
四、表单选择器（返回元素集合，使用相似）

基本选择器是jQuery中最常用也是最简单的选择器，它通过元素的id、class和标签名等来查找DOM元素。
1、ID选择器 #id
描述：根据给定的id匹配一个元素， 返回单个元素（注：在网页中，id名称不能重复）
示例：KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲test") 选取 id 为 …(".test") 选取所有class为test的元素
3、元素选择器 element
描述：根据给定的元素名匹配元素，返回元素集合
示例：("p")选取所有的<p>元素4、∗描述：匹配所有元素，返回元素集合示例：("*") 选取所有的元素
5、selector1，selector2,…,selectorN
描述：将每个选择器匹配到的元素合并后一起返回，返回合并后的元素集合
示例：$(“p,span,p.myClass”) 选取所有

,和class为myClass的

标签的元素集合

document对象上有哪些方法?

document.write()动态向页面写入内容
document.createElement(Tag)创建一个html标签对象
document.getElementById(ID)获得指定ID值的对象
document.getElementsByTagName(tagname)获得指定标签名的对象
document.getElementsByName(Name)获得指定Name值的对象
document.getElementsByClassName(classname)获得指定类名的对象（html5 API）
document.querySeletor()
document.querySeletorAll()

$()里面传一段html元素，会返回什么？

返回一个JQuery对象数组；
对于jQuery(html,ownerDocument)，参数html可以是单标签或者是多层标签之间的嵌套。第二个参数用于创建新DOM元素的文档对象，如果不传入则默认为当前的文档对象。

Webpack你有用到过哪些插件？有用过哪些Webpack哪些功能？

setState方法大概发生了什么？虚拟dom在这个过程中起到什么作用？

04-19 23:50
Powered by LMLPHP ©2024 辰小小 0.042599