系统面试
一、一面/二面
(一) 页面布局
- 假设高度已知，请写出三栏布局，其中左栏、右栏宽度各位300px,中间自适应。
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>html * {padding: 0;margin: 0;}.layout {margin-top: 10px;}.layout .left,.layout .right,.layout .center {height: 200px;}.layout .left,.layout .right {background-color: antiquewhite;width: 300px;}.layout .center {background-color: aqua;}style>
head><body><section class="layout float"><style>/*左右浮动，脱离文档流，中间部分不浮动依旧在文档流中，因为中间部分是块元素所以会沾满整个页面宽度(不是左右块剩下的宽度)，文字实现环绕效果*/.layout.float .left {float: left;}.layout.float .right {float: right;}style><article class="left-center-right"><div class="left">div><div class="right">div><div class="center"><h1>浮动解决方案h1>div>article>section><section class="layout position"><style>.position .left-center-right {position: relative;}.position .left-center-right .left,.position .left-center-right .right {position: absolute;top: 0;}.position .left-center-right .left {left: 0;}.position .left-center-right .right {right: 0;}.position .left-center-right .center {margin: 0 300px;}style><article class="left-center-right"><div class="left">div><div class="right">div><div class="center"><h1>定位解决方案h1>div>article>section><section class="layout flexbox"><style>.flexbox .left-center-right {display: flex;}.flexbox .left-center-right .center {flex: 1;}style><article class="left-center-right"><div class="left">div><div class="center"><h1>flexbox解决方案h1>div><div class="right">div>article>section><section class="layout table"><style>.table .left-center-right{display: table;width: 100%;}.table .left-center-right>div {display: table-cell;}.table .left-center-right .center{display: block;}style><article class="left-center-right"><div class="left">div><div class="center"><h1>table解决方案h1>div><div class="right">div>article>section><section class="layout grid"><style>.grid .left-center-right{display: grid;width: 100%;grid-template-columns: 300px auto 300px;}style><article class="left-center-right"><div class="left">div><div class="center"><h1>grid解决方案h1>div><div class="right">div>article>section>
body>
html>
延伸：
(1). 高度未知，哪个还可以使用
flex、表格
(2). 兼容性(哪个最实用)
(3). 各自的优缺点
[1]. 浮动： 优点兼容性好，缺点浮动造成BFC问题
[2]. 定位：优点快捷兼容性好，缺点布局脱离了文档流，造成布局上不好
[3]. flex：处理掉上述的两个缺点，移动端常见，兼容性不好
[4]. 表格：兼容性好，缺点seo不好，当一个超过固定高度时，其他的也会变高
[5].网格：布局方便，兼容不好
页面布局小结：
- 语义化掌握到位
- 页面布局理解深刻
- css基础知识扎实
- 四位灵活且积极上进
- 代码书写规范
页面布局的变通
- 左右固定，中间自适应
- 上下高度固定，中间自适应
两栏布局
- 左宽度固定，右自适应
- 右宽度固定，左自适应
- 上高度固定，下自适应
- 下高度固定，上自适应
(二) css盒模型
- 谈谈你对css盒模型的认识
-
基本概念：标准模型+IE模型
-
标准模型和IE模型区别
标准模型的宽和高不包括border和padding，ie模型包括 -
css如何设置这两种模型
box-sizing: content-box;（标准盒模型，浏览器默认）
box-sizing: border-box; （ie盒模型） -
JS如果设置获取盒模型对应的宽和高
dom.style.width/height （只能去内连样式的宽和高）
dom.currentStyle.width/height （ie支持）
window.getComputedStyle(dom).width/height（fireFox,chrome）
dom.getBoundingClientRect().width/height -
实例题(根据盒模型解释边距重叠)
在父元素中内嵌一个子元素
https://blog.csdn.net/kouzuhuai2956/article/details/106988594 -
BFC(Block formatting context)直译为块级格式化上下文
BFC的基本概念
BFC的原理
如何创建BFC
BFC的使用场景 -
IFC
(三) DOM事件
- 基本概念：DOM事件的级别
DOM0 : element.onclick = function (){}
DOM2 : element.addEventLIstener(‘click’, function(){},false)
DOM3 : element.addEventListener(‘keyup’, function(){}, false) - DOM事件模型
捕获和冒泡 - DOM事件流
捕获、目标阶段、冒泡 - 描述DOM事件捕获的具体流程
window》document》html》body》…》目标 - Event对象的常见应用
event.preventDefault()
event.stopPropagation()
event.stopInnediatePropagation()
event.currentTarget
event.target - 自定义事件
Event / CustomEvent 后者可以传递参数//这里就是eve var eve = new Event("custome"); //这里就是ev,是一个dom节点 ev.addEventlistener("custome", function(){console.log('custome'); }); ev.dispatchEvent(eve);
(四) HTTP协议
-
HTTP协议的主要特点
简单快速：
灵活：通过同一套http协议可以传输不同的请求内容
无连接：
无状态： -
HTTP报文的组成部分
-
HTTP方法
-
POST和GET的区别
-
HTTP状态码
-
什么是持久化链接
http 1.1支持 1.0不支持
-
什么是管线化
(五) 面向对象
- 类与实例
- 类的声明
- 生成实例
- 类与继承
- 如何实现继承
- 继承的几种方式
(六) 原型链
- 原型链类
-
创建对象有几种方法
//方式一：字面量 var o1 = {name:'1'}; var o11 = new Object({name: 'o11'})//方式二：构造函数 var M = function(){this.name = 'o2'}; var o2 = new M()//方式三：Object.create() var P = {name:'o3'}; var o3 = Object.create(P)Object.create()创建对象为什么为空
因为创建的实例使用原型链来链接的，o3.__proto__ === P, -
原型、构造函数、实例、原型链
- 构造函数通过new 创造实例
- 原型的最高级为Object.prototype
- 函数才有prototype
- 对象才有__proto__ （其实函数也有，因为函数也是对象）
-
instanceof的原理
对象A继承对象B，对象B继承了对象C，对象A的实例a
a instanceof A 为 true, a instanceof B 为true，a instanceof C为true
想要更精确的判断a属于谁的实例使用：ａ.__proto__.construct === A更严谨var M = function(name){ this.name = name; } var o3 = new M(o3); console.log(o3 instanceof Object); //true console.log(o3.__proto__ === Object);//false -
new运算符
var new2 = function(func){var o = Object.create(func.prototype)var k = func.call(o);if(typeof k === 'object'){return k}else{return o;}
}
(七) 通信
-
什么是同源策略及限制
源：协议，域名，端口
限制：
- Cookie、LocalStorage和IndexDB无法读取
- DOM 无法获得
- AJAX请求不能发送 -
前后端如何通信
- Ajax : 同源
- websocket：可以非同源
- CORS：可以非同源 -
如何创建Ajax
- XMLHttoRequest 对象的工作流程
- 兼容性处理
- 事件的触发条件
- 事件的触发顺序function json(options) {var opt = {url: '',type: 'get',data: {},success: function () {},error: function () {}};if (opt.url) {var xht = XMLHttpRequest ? new XMLHttpRequest() : new Window.ActiveXObjct("Microsoft.XMLHTTP");data = opt.data;url = opt.url;type = opt.type.toLocaleUpperCase();dataArr = [];for (var k in data) {dataArr.push(k + '=' + data[k]);}if (type == 'GET') {url = url + "?" + dataArr.join('&');xhr.open(type, url.replace(/\?$/g, ''), true);xhr.send();}if (type === 'POST') {xhr.open(type, url, true);xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');xhr.send(dataArr.join('&'));}xhr.onload = function () {if (xhr.status === 200 || xhr.status === 304) {var res;if (opt.success && opt.success instanceof Function) {res = xhr.responseText;if (typeof res === 'string') {res = JSON.parse(res);opt.success.call(xhr, res);}}} else {if (opt.error && opt.error instanceof Function) {opt.error.call(xhr, res)}}}}} -
跨域通信的几种方式
- JSONP
利用script标签异步加载实现的
- Hash
- postMessage
- WebSOcket
- CORS
(八) 安全
-
xss (http//ww.imooc.com/learn/812)
-
CSRF(Cross-site request forgery) 跨站请求伪造
基本概念和缩写的意思攻击原理
防御措施
Token验证
Referer 验证
隐藏令牌
(九) 算法
-
排序
快速排序：https://segmentfault.com/a/1190000009426421
选择排序、希尔排序，都在这个站 -
堆栈、队列、链表
掘金去搜. -
递归
递归去segmentfault找 -
波兰式和逆波兰式
二、二面/三面
(一)渲染机制类
- 什么是DOCTYPE及作用
doctype就是告诉浏览器 什么是DTD
4.0包括严格模式和宽松模式
- 浏览器渲染过程
- 重排Reflow
- 重绘Repaint
5. 布局Layout
(二)js运行机制
console.log(1);
setTimeout(()=>{console.log(2)
}, 0)
console.log(3);
for(var i = 0; i < 4; i++){setTimeout(function (){console.log(i);}, 1000)
}
- 如何理解JS的单线程
同一时间只能执行一个事情 - 什么是任务队列
- 什么是Event Loop
- 什么时候会触异步任务
- setTimeout和setInterval
dom时间
es6中的promise
(三)页面性能
题目： 提升页面性能的方法有哪些
-
资源压缩合并，减少HTTP请求
-
非核心代码异步加载》异步加载的方式》异步加载的区别
1.动态脚本加载
2.defer<html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><script src="./defer1.js" defer>script><script src="./defer2.js" defer>script> head> <body><div>deferdiv><script>document.write("这是writer
")script><script>for(var i = 0; i< 200000; i++){if(i%20000 ==0){console.log(i);}}script> body> html>
3.async
异步加载的区别1.defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行2.async是在加载完之后立即执行，如果是多个，执行顺序额加载顺序无关
-
利用浏览器缓存》缓存的分类》缓存的原理
-
利用CDN
-
预解析DNS
<meta http-quiv="x-dns-prefetchcontrol" content="on"> <link rel="dns-prefetch" href="//host_name_to_prefetch.com">
(四)错误监控
- 前端错误的分类
- 即时运行错误：代码错误
- 资源价值错误
- 错误的捕获方式
- 即时运行错误的捕获方式
- try…catch
- window.onerror
- 资源加载错误
- object.onerror
- performance.getEntries()
- Error事件捕获
- 延伸：跨域的js运行错误可以捕获吗，错误提示是什么，应该怎么处理。
- 上报错误的基本原理
三、三面/四面
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！