前端面试题集锦

时间 2019-12-06

标签端面试题集锦繁體版

原文原文链接

又一年校招季~这是近来收集的前端面试题，共勉。
这里写的答案有些比较简略，只是给出一个方向吧，你们能够本身去深刻去学习探究。javascript

『HTML&CSS基础』

【HTML】

行内元素
关注行内置换元素相似inline-block方式展示 input textarea img selectcss
浏览器内核
基于Webkit：
Chrome - blink、腾讯X五、UC U三、华为T9
基于Gecko：Firefox
基于Trident：IE
基于Presto：Opera
兼备Webkit&Trident：猎豹、360html
W3C标准
包括结构(xhtml,xml)、表现(css)、行为(ecmascript、dom)的标准。更好地规范浏览器对页面渲染，使得同一套网页方案尽量在多套浏览器中表现一致。提升开发者开发效率和用户体验前端
Doctype
用来告诉浏览器以什么文档类型解析html，没有的话，会按照向下兼容的怪异模式对文档进行解析
h4及如下须要引用dtd声明，dtd有标准型和过渡型两种。二者区别可忽略
h5不急于SGML标准，所以不须要引用dtdjava
标签语义化的重要性
1.便于浏览器、搜索引擎解析
2.在没css状况也以一种文档形式展示，便于阅读
3.有利于SEO
4.有利于代码的阅读和维护ios
strong与em的异同
同：都是对文本起强调做用
异：em以斜体显示文本，strong更利于SEO识别语义web
SEO 详细
可分为白帽SEO和黑帽SEO
SEO的主要方面：
1.网站标题、关键字、描述 (meta)
2.网站结构布局优化：目录层级不要太多，尽可能让Spider跳转3次就能够到达网站的任意一个内页
3.网站代码优化：
SEO会过滤掉display none的元素、利用<meta description和<meta keywords>、html语义化面试
图片格式
png-8 256色、png-2四、gif、apng(Chrome不支持)、svg、webp(ios不支持)ajax
link vs @import
区别：
1.link无兼容性缺点，@import仅兼容IE5+
2.link权重高于import
3.link外链的css与html是并行加载的，而import需等html加载完才加载编程

【CSS】

CSS盒模型
包括 margin padding border content
IE盒模型 (lt IE8)：content包含padding和border
如何改变：box-sizing
CSS可继承属性
与font有关的属性如font-size、font-family、font-weight等
line-height、color、text-align、text-indent等
BFC
不一样的display会参与不一样的环境(formatting context)去渲染，而block参与BFC
BFC特色
1.同个BFC内盒子产生margin塌陷
2.计算BFC的高度时，考虑BFC所包含的全部元素，连浮动元素也参与计算
3.BFC就是页面上的一个隔离的独立容器，里外互相不影响
产生新BFC
1.float属性不为none
2.position为absolute或fixed
3.display为inline-block | table-cell | table-caption | flex | inline-flex
4.overflow不为visible
清除浮动
1.造成新的BFC
2.新增div 设置clear:both
3.在父元素添加:after伪类，设置content:"";display:block;clear:both;zoom:1
position
absolute | relative | static | sticky | fixed

『HTML5』

【新标签】

新增的标签
1.布局，内容 <header> <section> <nav> <article> <aside> <mark> <footer>
2.表单 <datalist> <keygen> <output>
3.媒体 <canvas> <video> <audio> <figure> <figcaption> <source>
4.状态 <progress> <meter>
5.冷门 <command> <details> <summary>
表单新类型
email url number tel search color DatePicker
表单新属性
autocomplete autofocus require pattern placeholder multiple

【新API】

交互
重力感应 DeviceOrientation
手机加速传感器 DeviceMotion
history 详细
以Pjax方式实现SPA history.pushState history.replaceState 解决ajax不能后退前进问题
储存
客户端储存：localStorage sessionStorage>只存在一个会话周期内
跨域
postMessage

【Web app】

常见dpr
ip6 二、ip6+ 三、nexus5 3
移动端适配
1.自适应方式
2.viewport方式
3.rem方式
4.scale()方式缩放
经常使用meta
IE相关
避免IE使用兼容模式 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
为不支持viewport的IE Mobile设定宽度 <meta name="MobileOptimized" content="320" />
是否对手持设备友好 <meta name="HandheldFriendly" content="true" />
UC浏览器
强制竖屏 <meta name="screen-orientation" content="portrait" />
强制全屏 <meta name="full-screen" content="yes" />
应用模式 <meta name="browsermode" content="application" />
X5浏览器
强制竖屏 <meta name="x5-orientation" content="portrait" />
强制全屏 <meta name="x5-fullscreen" content="yes" />
应用模式 <meta name="x5-page-mode" content="app" />
360
开启极速模式 <meta name="renderer" content="webkit" />
iphone相关
启动webapp功能删除工具栏和菜单栏 <meta name="apple-mobile-web-app-capable" content="yes">
控制状态栏颜色 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
开启号码或邮箱检测 <meta name="format-detection" content="telephone=no" />
添加主屏幕icon <link rel="apple-touch-icon" href="touch-icon-iphone.png">

『CSS3』

【新属性】

flex、column、文本换行、媒体查询、待补充……

开启GPU加速

注意启用-webkit-backface-visibility:hidden; -webkit-perspective:1000;解决启用transform3d页面闪烁和抖动问题

【动画】

CSS3动画性能

『Javascript』

【原生】

js数据类型
5基本 string number boolean undefined null 储存在栈内存中
1复杂 object 储存在堆内存中
this指向
this老是指向函数的直接调用者（而非间接调用者）
null和undefined区别
null表示一个无的对象
undefined表示一个无的初始值。表示此处应该有值，但尚未定义，即缺乏值
new的具体做用
如var p = new P();
var p = {}; //建立新对象
p.__proto__ = P.prototype; //继承构造函数的原型
P.call(p); //修改this指向
建立对象方式
对象字面量、工厂模式、构造函数、原型模式、构造函数+原型
原型原型链
每一个对象都有一个属性 prototype 当须要从对象中寻找属性时，若是在当前对象上没有找到就会从原型对象开始找一直追溯到原型链的最顶端
实现继承
1.构造函数继承详细
- 利用call、apply修改this指向
- 让子元素原型指向父元素实例，注意要修改子元素prototype.constructor指向
- 将需继承的属性写在父元素的prototype上，让子元素prototype指向父元素prototype，但在修改子元素prototype.constructor指向时会同时修改父元素prototype.constructor
- 同上方法利用中介函数
2.非构造函数继承详细
把父对象的属性，所有拷贝给子对象
浅拷贝vs深拷贝
浅拷贝
深拷贝递归调用浅拷贝
闭包详细
用途：读取函数内部变量。变量得不到销毁，一直储存在内存中，可能形成内存泄漏
内存泄漏
指分配的内存既不能使用又得不到回收
- 如为某元素绑定了一个事件，而该元素又从dom中移除
- 滥用闭包
- 两变量互相引用
原生Ajax实现过程
1.获取XMLHttpRequest对象
2.xhr.open(type,url,ifAsyn)
3.监听xhr状态改变，xhr.onreadystatechange = function(){} xhr.readyState==4&&xhr.status==200说明请求成功
【readyState：0=未初始化 1=启动 2=发送 3=接收 4=完成】
4.xhr.send()
GET和POST区别
GET 安全性低可传内容少经过url传值
POST 安全性高可传内容多经过表单传值
事件处理 详细
- 事件委托
  利用事件冒泡机制将事件绑定在父元素上，节省性能
- 事件处理程序
  DOM0 -> DOM1 -> DOM2 (对比与0，可同时绑定多个事件)
- mouseover和mouseenter区别
  mouseenter不冒泡

数组去重
hash方式和index方式

Array.prototype.unique = function(){
var n = [];
for(var i=0,len=this.length;i<len;i++){
    if(n.indexOf(this[i])==-1) {
        n.push(this[i])
    }
}
return n;
}
Array.prototype.unique2 = function(){
    var n = {},a =[];
    for(var i=0,len=this.length;i<len;i++){
        if(!n[this[i]]) {
            a.push(this[i]);
            n[this[i]] = true;
        }
    }
    return a;
}

ES5数组新方法

斐波纳挈数列高效递归 详细
附斐波纳挈数列

function getNthFibonacci(count) {
    var fibonacci = [1,1];
    for(var i=2;i<=count;i++){
        fibonacci[i] = fibonacci[i-1]+ fibonacci[i-2];
    }
    return fibonacci[count];
};
var a = getNthFibonacci(5);
console.log(a)

getComputedStyle和style区别
getC 只读可获取未被style定义的样式
style 读写只可获取含style的样式
DOM
插入新节点
document:createElement()、createDocumentFragment()、createTextNode()
insertBefore(new,old)
获取节点
childNodes、parentNode、previousSibling、nextSibling、firstChild、lastChild、children
节点操做
appendChild、removeChild、replaceChild、cloneNode、normalize
获取位置
- 浏览器宽高 window.innerWidth document.documentElement.clientWidth
- 文档宽高 document.documentElement.offsetHeight、 document.documentElement.scrollHeight
- 到文档的最端处距离 offsetTop、offsetLeft
BOM
浏览器内核 navigator.appVersion
异步编程方法
1.回调函数，这是异步编程最基本的方法。
2.事件监听，另外一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。
3.发布/订阅，上一节的"事件"，彻底能够理解成"信号"。
4.Promises对象，Promises 对象是CommonJS 工做组提出的一种规范，目的是为异步编程提供统一接口。

【jQuery】

操做DOM
ajax

【模块化】

【MV*】详细

【虚拟DOM】详细

以对象树的方式储存在内存中

『性能优化』

雅虎14条详细
移动端优化
16毫秒的优化详细
1. google提出1s完成终端首屏渲染：网络消耗+js执行与页面渲染
2. 浏览器渲染频率1s 60帧，确保每一帧能在16ms内执行与渲染，尽量避免重排与重绘
3. 使用RAF控制渲染频率，减小重复渲染，避免事件重复执行
4. 让js操做读写分离
渲染路径优化
1. 最小化关键资源数量
2. 最小化关键资源字节
3. 最小化关键路径长度
页面直出详细
1. server上获取数据并将数据与页面模板结合，在服务端渲染成最终的 HTML
2. 返回最终的 HTML 展现

『跨域与前端安全』

跨域的方式
1. JSONP：强行执行不一样域下的JS文件，须要外部JS配合。只能用GET方式
2. CORS：服务器端设置Access-Control-Allow-Origin，使其能被其余域使用AJAX访问到
3. domain+iframe：只适用主域相同子域不一样的两个站。须要将两个站的document.domain设成同一个主域
4. window.postMessage(msg,targetOrgin)
跨域攻击详细
1. 跨域脚本
2. 跨域请求伪造

『HTTP 』

HTTP报文
HTTP/1 HTTP/2 HTTPS 详细
创建在TCP基础上
状态码
缓存
设置缓存服务器返回Cache-Control:max-age=xxx；expires:Thu, 03 Jan 2019 04:24:16 GMT、设置etag、last-modified

实际上浏览器输入 url 以后敲下回车就是先看本地 cache-control、expires 的状况，刷新(F5)就是忽略先看本地
cache-control、expires 的状况，带上条件
If-None-Match、If-Modified-Since，强制刷新(Ctrl + F5)就是不带条件的访问。

描述从输入url到一个页面展现在你面前的所有过程

DNS Lookup
创建TCP链接
发送http请求
服务器发送响应
浏览器加载解析DOM&CSS
生成DOM Tree&CSS RuleTree
DOMTree和CSS RuleTree结合生成RenderTree
对RenderTree上的每个元素计算其坐标>称为布局
对RenderTree的元素进行绘制和展现>称为『painting』

引伸-当页面渲染时，浏览器发生了什么

『工具』

【前端自动化工具】

grunt
glup

【CSS预处理】

优点：

用嵌套方式写CSS，结构更加的清晰
可以使用变量、函数，更相似编程的方式
可将一整套CSS拆分红若干个组件，粒子性、可组合的特色更加明显

sass
less
compass

『数据结构』

排序详细
不稳定的排序快速排序、选择排序、希尔排序、堆排序
二叉树原理与实现