前端面试总结

作者: 程序员清欢 | 来源:发表于2019-04-04 17:52 被阅读0次

Html

html文档类型

html5 <!DOCTYPE html>
html4.01 Strict 严格型<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
html4.01 Transitional 过渡型 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html4.01 Frameset 框架型 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

块级元素，行内元素有哪些?
块级元素：div,p,ul,li,ol,form,table,h1~h6,pre,hr;
行内元素：a,span,b,i,em,img,select,input,textarea,u;

什么是语义化？为什么要用语义化？有哪些语义化标签？
语义化就是正确的标签干正确的事情，能够便于开发者阅读和编写出优雅的代码并让网路爬虫更好的解析。

有利于SEO，有利于搜索引擎爬虫更好的理解我们的页面，提高页面的权重。
在没有css的时候能够清晰的看出页面结构，增强可读性。
便于团队开发和维护，可以让开发者更容易看明白，从而提高团队效率和协调能力。
支持多终端设备的浏览器渲染。�
语义化标签：article,section,main,title,header,footer,aside,nav

iframe
iframe元素会创建包含一个文档的内联框架
优点：
1.解决加载缓慢的第三方内容如图标和广告等的加载问题
2.并行加载脚本
缺点：
1.iframe会阻塞主页面的onload事件
2.即使内容为空，加载也需要事件
3.设备兼容性差

什么是BFC?
BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
布局规则：

内部的Box会在垂直方向，一个接一个的放置。
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。
哪些元素会生成BFC:
a. 根元素
b. float属性不为none
c. position为absolute或fixed
d. display为inline-block,table-cell,table-caption,flex,inline-flex
e. overflow不为visible

mate标签
缺少内容

浏览器

HTML5

html5的离线存储使用和工作原理
用户与互联网没有连接时，可以正常访问网站内容；用户与互联网连接时，更新用户机器上的缓存文件。
工作原理：
在页面头部加入一个manifest的属性，如下：

 <!DOCTYPE html>
<html manifest="cache.manifest"></html>

manifest有三部分组成：
1.CACHE：表示需要缓存的资源列表
2.NETWORK:表示它下面的资源列表不会被缓存，只能在线访问，但如果CACHE中存在还是会被缓存，CACHE优先级高
3.FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换它

html5新特性
用于绘画的canvas元素
用于媒介回放的video和audio元素
对本地离线存储更好的支持
语义化元素标签
新的表单控件：email,date,time,url,search
拖放：drag,drop
内联的svg
地理定位：navigator.geolocation
web 存储：localStorage sessionStorage
web worker：当在页面执行脚本时，页面的状态是不响应的，直到脚本已完成。
web worker是运行在后台的javascript，独立于其他脚本，不影响页面的性能，

说下你对浏览器内核的理解
浏览器内核主要分为两部分：渲染引擎和JS引擎。
渲染引擎：负责取得网页的内容（html,xml和图像等），整理讯息（css），以及计算页面的显示方法，然后输出到显示器或者打印机上。
JS引擎：解析和执行JavaScript来实现页面的动态效果。

常用浏览器内核有哪些？
Trident内核：IE;
Webkit：Safari, Chrome;

CSS

为什么要初始化css样式？
浏览器兼容问题，不同的浏览器对标签元素的默认值是不同的，如果没有对css进行初始化会出现浏览器之间的页面差异

css的盒子模型
盒子模型 = 内容区域content + 内边距padding + 边框border + 外边距margin
两种盒子模型：IE盒子模型(content+padding+border)怪异模式,W3C的盒子模型（content)标准模式
box-sizing:
border-box，padding和border被包含在定义的width和height中，元素的实际宽高等于设置的值
content-box，padding和border不被包含在定义的width和height中，元素的实际宽高等于设置的值+padding+border

实现元素的垂直居中有哪几种？

文本：设置line-height，text-align:center;
元素(已知宽高)：

width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;

3.元素(未知宽高)：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

4.flex方式：

display: flex;
align-items: center;
justify-content: center;

5.table类型：

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

隐藏元素的实现方式有哪几种？
1.visibility: hidden; 隐藏元素，但是元素占用的空间仍然存在；
2.opacity: 0; 完全透明，元素占用的空间存在；
3.position定位; 元素脱离文档流，将元素的位置设置在可见区域之外；
4.display: none; 元素完全不可见，也不占用文档的空间；

css3有哪些新特性？
animation 动画
transtion 过渡
transform (旋转、缩放、位移、倾斜)
@font-face 加载字体
box-shadow 阴影
gradient 渐变
选择器：:nth-child(), :first-child ...

JavaScript

数据类型，最新版ECMA标准定义7种
原始类型：undefined, null, string, boolean, number, symbol
引用类型：Object

操作DOM的常用API?

节点查找 ducument.getElementById
节点创建 createElement cloneNode
节点修改 appendChild insertBefore RemoveChild replaceChild
元素属性 setAttribute getAttribute

BOM常用API

focus() —— 使窗体或控件获取焦点
blur() —— 与focus函数相反，使窗体或控件失去焦点
open() —— 打开(弹出)一个新的窗体
close() —— 关闭窗体

JSONP的原理？
就是利用<script>标签的src属性没有跨域限制的'漏洞'来达到与第三方通讯的目标。第三方产生的响应为json数据的包装(故称之为jsonp,即json padding)

什么是事件代理？
当网页中需要触发事件的对象比较多的时候，为了避免内存泄漏，我们把事件委托到其父对象上，借助事件冒泡机制，可以将事件委托到body, document等元素上，这样等于一个页面就只有一个事件触发，避免直接把事件添加到多个对象上。
document.getElementByTagName('body')

原型、原型链

在JavaScript中。函数可以有属性，每个函数都有一个特殊的属性叫作原型prototype;

JavaScript常被描述为一种基于原型的语言——每个对象拥有一个原型对象，对象以其原型为模板，从原型继承方法和属性。原型对象也可能用于原型，并从中继承方法和属性，一层一层，以此类推。这种关系常被称为原型链。
注：几乎所有JavaScript中的对象都是位于原型链顶端的Object的实例

闭包的含义，为什么会存在闭包，以及闭包的缺点
传送门

call，apply，bind的区别和作用

继承和原型链
传送门

new运算符的作用
new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例；
传送门

面向对象编程

作用域，变量提升

事件循环机制
传送门

内存泄漏，js的垃圾回收机制
传送门

ajax

跨域

ES6
ES6和commonJs的导入导出区别
CommonJS模块与ES6模块的区别
CommonJs

对于基本数据类型，属于复制。即会被模块缓存。同时，在另一个模块可以对该模块输出的变量重新赋值。
对于引用数据类型，属于浅拷贝。由于两个模块引用的对象指向同一个内存空间，因此对该模块的值做修改时会影响另一个模块。
当使用require命令加载某个模块时，就会运行整个模块的代码。
当使用require命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值。也就是说，CommonJs模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。
循环加载时，属于加载时执行。即脚本代码在require的时候，就会全部执行。一旦出现某个模块被“循环加载”，就只输出已经执行的部分，还未执行的部分不会输出。
ES6
es6模块中的值属于[动态只读引用]。
对于只读来说，即不允许修改引入变量的值，import的变量是只读的，不论是基础数据类型还是引用数据类型。当模块遇到import命令时，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。
对于动态来说，原始值发生改变，import加载的值也会发生改变。不论是基础数据类型还是引用数据类型。

设计模式

Git的使用

查看git提交记录
git log (-3 提交记录的数量限制)

commit c8ed3c8c7a5298e53c554c776151d8fefe7cae05 (HEAD -> master, origin/master, origin/HEAD)
Author: xxx
Date:   Sun Mar 17 16:56:39 2019 +0800

    修改上传文章的可以上传图片

git的回滚版本
回滚指定版本（不保留更改代码） git reset --hard c8ed3c8c7a5298e53c554c776151d8fefe7cae05
强制提交 git push -f origin master
回滚指定版本（放弃指定提交的修改，但会生成一次新的提交，需要填写提交注释，以前的历史记录都在）git revert c8ed3c8c7a5298e53c554c776151d8fefe7cae05

git切换分支
查看远程分支 git branch -a
查看本地分支 git branch
git checkout -b develop origin/develop

git合并分支(develop->master)

修改develop分支
切换到master分支 git checkout master
合并develop分支代码到master分支 git merge develop
解决冲突
推送到远程的master上 git push origin master

优化

图片加载

1. 将图片服务和应用分离。对于服务器来说，图片始终是最消耗系统资源的，如果将图片服务和应用服务放在同一个服务器的话，应用服务器很容易会因为图片的高I/O负载而崩溃，所以当网站存在大量的图片读写操作时，建议使用图片服务器。
1. 图片压缩
1. 图片懒加载。初始不加载图片，当用户滚动到相应位置时才放出图片
1. 精灵图
1. 将图片压缩成Base64格式节约请求。建议小的图片
1. 小图片使用iconfont，大图片用第三方如七牛，然后懒加载

JS和CSS加载

1. 将JS库文件替换成CDN地址
1. 精简和优化JS和CSS
1. GZIP压缩JS和CSS
1. 缓存JS和CSS
1. 合并JS与CSS，减少请求

重绘和回流

回流：当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流。
重绘：当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘。
引起回流的因素：

dom树结构改变，如删除或添加节点。
元素几何属性变化，如margin、padding、height、width、border等。
页面渲染初始化
获取某些属性。offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()
浏览器窗口发生变化-resize事件发生时

JS库(jQuery原理)

框架(Vue|React)

Vue

生命周期函数

image

beforeCreate 在实例初始化之后，数据观测(data observer)和event/watcher事件配置之前被调用。
created 在实例创建完成之后被立即调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
beforeMount 在挂载开始之前被调用：相关的render函数首次被调用
mounted el被新创建的vm. $el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$ el也在文档中。注意：mounted不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用vm.$nextTick替换掉mounted
beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。这里适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器
updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或watcher取而代之。
activated keep-alive组件激活时调用。
deactivated keep-alive组件停用时调用。
beforeDestroy实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

前端面试总结

Html

浏览器

HTML5

CSS

JavaScript

Git的使用

优化

JS库(jQuery原理)

框架(Vue|React)

Vue

打包工具(Webpack)

设计模式

网络协议

缓存

算法

NodeJs

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读