前端笔试面试题整理

最新推荐文章于 2024-08-25 13:39:45 发布

迎风起

最新推荐文章于 2024-08-25 13:39:45 发布

阅读量539

点赞数

分类专栏：面试文章标签：面试题

本文链接：https://blog.csdn.net/sxqlmc000/article/details/77074313

版权

面试专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端笔试面试题整理

先放几个不错的链接：
Web前端面试题目及答案汇总

HTML/浏览器

1. 页面渲染过程

这里写图片描述

a. 浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个tag都是DOM树中的1个节点，根节点就是我们常用的document对象。DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。
b. 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而FF会去掉_开头的样式。
c. DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree，但区别很大，render tree能识别样式，render tree中每个NODE都有自己的style，而且 render tree不包含隐藏的节点 (比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。注意 visibility:hidden隐藏的元素还是会包含到 render tree中的，因为visibility:hidden 会影响布局(layout)，会占有空间。根据CSS2的标准，render tree中的每个节点都称为Box (Box dimensions)，理解页面元素为一个具有填充、边距、边框和位置的盒子。
d. 一旦render tree构建完毕后，浏览器就可以根据render tree来绘制页面了。

2. 重排（回流）、重绘

a. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
b. 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
注意：回流必将引起重绘，而重绘不一定会引起回流。

3. 浏览器缓存策略

Expires、Cache-Control、Last-Modified/If-Modified-Since、Etag/If-None-Match，200、200(from cache)、304
浏览器缓存机制

CSS

1、标签伪类定义顺序：link->:visited->:hover->:active

2、选择器优先级及权重计算方法

!important>内联>id>class>tag “1111”格式

3、清楚浮动

（1）父级div定义height。
（2）结尾处加空div标签clear:both。
（3）父级div定义伪类:after和zoom。
（4）父级div定义overflow:hidden。
（5）父级div定义overflow:auto。
（6）父级div也浮动，需要定义宽度。
（7）父级div定义display:table。
（8）结尾处加br标签clear:both。
主要是第三种，可谈到IE6、IE7的haslayout
张鑫旭-对overflow与zoom”清除浮动”的一些认识
引伸：为什么overflow可以清楚浮动？
简书 - 我对BFC的理解

4、盒模型谈到box-sizing

content-box border-box

JS

1、

通过f能访问到a，但访问不到b
因为f是原型指向Object，不再是Function的实例，通过f.constructor.prototype可以找到b

2、基本类型与typeof返回

基本类型：number, boolean, string, object, null, undefined, symbol
typeof：number, boolean, string, object, function, undefined, symbol

3、类型转换表

这里写图片描述

4、new关键字操作

new Foo() 会新建一个空对象，让对象的原型指向Foo.prototype，然后将this指向这个对象并执行构造函数内的语句，如果没有定义return或者return的不是一个对象，就会返回这个新对象

5、this说明

作为对象方法调用的函数不管是实例属性还是原型属性，调用时this都指向这个对象，因为this是存在作用域链中的

6、Date对象

7、ajax状态

readyState几个属性值：
0 - 未调用open
1 - 已调用open，但未调用send
2 - 已调用send，但未接收到响应
3 - 已接收到部分响应数据
4 - 接收到全部数据

8、sessionStorage生命周期

页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面会初始化一个新的会话，这点和 session cookies 的运行方式不同。
MDN属性描述地址

9、null和undefined的区别

a. 转数字 0 NaN
b. typeof object undefined
c. 含义空对象引用不存在的值
阮一峰-undefined与null的区别

10、js作用域

当执行一段JavaScript代码（全局代码或函数）时，JavaScript引擎会创建为其创建一个作用域又称为执行上下文（Execution Context），在页面加载后会首先创建一个全局的作用域，然后每执行一个函数，会建立一个对应的作用域，从而形成了一条作用域链。

11、IE和标准DOM事件流区别

是否支持捕获，是否传递event对象，事件类型加on，取消默认操作和冒泡的方式

数据结构

1、树、二叉树、满二叉树、完全二叉树、平衡二叉树、哈夫曼树

树和二叉树的2个主要差别：
1. 树中结点的最大度数没有限制，而二叉树结点的最大度数为2；
2. 树的结点无左、右之分，而二叉树的结点有左、右之分

二叉树深度 n
最大节点个数 2ⁿ-1
满二叉树叶子结点个数 2^n-1

完全二叉树包含满二叉树

1.满二叉树

2.完全二叉树

3.平衡二叉树（AVL树）
对于每一个节点来说，它的左右子树的高度之差不能超过1，如果插入或者删除一个节点使得高度之差大于1，就要进行节点之间的旋转。

红黑树
map 就是采用红黑树存储的，红黑树(RB Tree)是平衡二叉树，其优点就是树到叶子节点深度一致，查找的效率也就一样，为logN。在实行查找，插入，删除的效率都一致，而当是全部静态数据时，没有太多优势，可能采用hash表各合适。
hash_map是一个hash table占用内存更多，查找效率高一些，但是hash的时间比较费时。
总体来说，hash_map 查找速度会比map快，而且查找速度基本和数据数据量大小，属于常数级别；而map的查找速度是log(n)级别。

4.哈夫曼树
带权路径长度达到最小的二叉树，也叫做最优二叉树。

几个概念
路径：树中一个结点到另一个结点之间的分支构成这两个结点之间的路径。
路径长度：路径上的分枝数目称作路径长度。
树的路径长度：从树根到每一个结点的路径长度之和。
结点的带权路径长度：在一棵树中，如果其结点上附带有一个权值，通常把该结点的路径长度与该结点上的权值之积称为该结点的带权路径长度

2、常用排序算法的ES6实现及复杂度

算法链接：常用排序算法ES6实现
复杂度：

3、树、堆、二叉树、二叉堆

这里写图片描述

4、DFA、NFA、正则匹配

从DFA角度理解KMP算法
这里写图片描述

网络与优化

1、TCP三次握手四次挥手

http://www.imooc.com/article/19098

2、减少页面加载时间的方式

a. 减少HTTP请求（资源合并，雪碧图）
b. 使用异步执行长时间运行的脚本
c. 减少重排重绘
d. 合理组织代码
e. CDN加速
f. 缓存

3、对于HTTPS的认识

HTTP和HTTPS的区别

基本概念

1、Web APP、Hybrid APP、Native APP

这里写图片描述

2、进程线程区别

a. 一个程序至少有一个进程,一个进程至少有一个线程。
b. 进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
c. 每个独立的进程有一个程序运行的入口、顺序执行序列和程序的出口，但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

3、浏览器内核、渲染引擎、js引擎

浏览器内核分成两部分渲染引擎和js引擎，由于js引擎越来越独立，内核就倾向于只指渲染引擎

渲染引擎
IE —— Trident
Chrome —— Webkit -> Blink
Safari —— Webkit
Firefox —— Gecko
Opera —— Presto(已弃用) -> Blink(13年后)

js引擎
IE —— JScript->Chakra (IE9之后)
Chrome —— V8
Safari —— JavaScriptCore（最新版名字SquirrelFish）
Firefox —— monkey系列
Opera —— Carakan

4、进程主要组成

① 程序。作用：描述进程要完成的功能。
② 数据。作用：程序在执行时所需要的数据和工作区。
③ PCB。作用：包含进程的描述信息和控制信息。它是进程存在的唯一标志。进程控制块

5、shim/polyfill

一个shim是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现
一个polyfill就是一个用在浏览器API上的shim.我们通常的做法是先检查当前浏览器是否支持某个API,如果不支持的话就加载对应的polyfill.然后新旧浏览器就都可以使用这个API了

术语polyfill来自于一个家装产品Polyfilla：Polyfilla是一个英国产品,在美国称之为Spackling Paste(译者注:刮墙的,在中国称为腻子).记住这一点就行:把旧的浏览器想象成为一面有了裂缝的墙.这些[polyfills]会帮助我们把这面墙的裂缝抹平,还我们一个更好的光滑的墙壁(浏览器)

6、git相关

常用命令：

git init
git clone (HTTPS)https://××× 或 (SSH)git@×××
git add .
git checkout ×××
git commit -m "×××"
git remote add origin https://×××
git push -u origin master
git pull origin master

git diff
git status
git checkout -b mybranch 创建并切换 / git branch mybranch 创建不切换
git branch 切换
git checkout master
git merge mybranch

push -u解释
如果当前分支只有一个追踪分支，那么主机名都可以省略。
如果当前分支与多个主机存在追踪关系，那么这个时候-u选项会指定一个默认主机，这样后面就可以不加任何参数使用git push。
$ git push -u origin master
上面命令将本地的master分支推送到origin主机，同时指定origin为默认主机，后面就可以不加任何参数使用git push了。

文件状态变化周期：
这里写图片描述
untracked——文件未被纳入版本控制管理
staged——已放入暂存区
git commit -m 与 git commit -am 的区别