前端面试总结

2019-04-04  本文已影响0人  程序员清欢

Html

html文档类型

  1. html5 <!DOCTYPE html>
  2. html4.01 Strict 严格型<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3. html4.01 Transitional 过渡型 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. 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;

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

  1. 有利于SEO，有利于搜索引擎爬虫更好的理解我们的页面，提高页面的权重。
  2. 在没有css的时候能够清晰的看出页面结构，增强可读性。
  3. 便于团队开发和维护，可以让开发者更容易看明白，从而提高团队效率和协调能力。
  4. 支持多终端设备的浏览器渲染。�
    语义化标签：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如何布局，并且与这个区域外部毫不相干。
布局规则：

  1. 内部的Box会在垂直方向，一个接一个的放置。
  2. 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  3. BFC的区域不会与float box重叠。
  4. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  5. 计算BFC的高度时，浮动元素也参与计算。
  6. 哪些元素会生成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

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

  1. 文本：设置line-height，text-align:center;
  2. 元素(已知宽高)：
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?

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

BOM常用API

  1. focus() —— 使窗体或控件获取焦点
  2. blur() —— 与focus函数相反，使窗体或控件失去焦点
  3. open() —— 打开(弹出)一个新的窗体
  4. 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

设计模式

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)

优化

图片加载

JS和CSS加载

重绘和回流

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

JS库(jQuery原理)

框架(Vue|React)

Vue

生命周期函数


image

打包工具(Webpack)

设计模式

网络协议

缓存

算法

NodeJs

上一篇下一篇

猜你喜欢

热点阅读