前端基础面试题

页面布局

题目：假设高度已知，请写出三栏布局，其中左栏，右栏宽度各为300px，中间自适应

– 方案一：两边元素浮动不占位置，中间元素占父容器宽度百分之百

	
		
	
	
		

			
左
			
中
			
右
		
	

–方案二：左右使用绝对定位不占位置，中间占父元素百分之百

	
		
	
	
		

			
左
			
中
			
右
		
	

–方案三：父元素使用flex布局，中间元素flex=1

	
		
	
	
		

			
左
			
中
			
右
		
	

–方案四：table-cell，设置父元素display为表格布局。（略）

–方案五：网格布局（略）

CSS盒模型

谈谈你对对盒模型的基本认识

1. 基本概念
   标准模型+IE模型
2. 标准模型和IE模型区别
   普通浏览器模型是content-box，而IE模型包括border与padding,也就是border-box.
3. CSS如何设置这两种模型
   box-sizing属性
4. JS如何设置获取盒模型对应的宽和高
   dom.style.width
   dom.currentStyle.width
   window.getComputedStyle(dom).width
   dom.BoundingClientRect().width //计算元素的绝对位置
5. 实例题（根据盒模型解释边距重叠）
   父子元素编剧重叠，子元素设置margin-top，父元素设置overflow=hidden,父元素高度会多margin-top像素
6. BFC(编剧重叠解决方案)概念：块级格式化上下文
   BFC原理及其应用

DOM事件类

1. 基本概念：DOM事件的级别->dom0,dom2
2. DOM事件模型：捕获和冒泡
3. DOM事件流：通过捕获到目标元素，通过冒泡到window
4. 描述DOM事件捕获的具体流程:window-document-body-…-目标元素
5. event对象的常见应用：preventDefault();stopPropagation();stopImmediatePropagation();
   currentTarget();currentTarget();target
6. 自定义事件：

var eve=new Event("custome");
domObj.addEventListener('custome',function(){....});
domObj.dispatchEvent(eve)//触发事件

原型链

• 创建对象的方法

var o1={name:'o1'}
var o11=new Object({name:"o11"})

var M=function(){this.name='o2'}
var o2=new M()

var P={name:"o3"}
var o3=Object.create(P)

通信类

• 什么是同源策略及限制
  同源策略限制从一个源（协议+域名+端口）加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。 -Cookie,LocalStorage和indexDB无法读取。-DOM无法获得。-AJAX请求不能发送。
• 前后端如何通信
  -Ajax。-WebSocket。-CORS
• 如何创建Ajax。
• 跨越通信的几种方式
  -JSONP。-Hash。-postMessage。-WebSocket。-CORS

安全类

• CSRF
  基本概念和缩写：跨站请求伪造，Cross-site request forgery
  攻击原理：略
  防御措施：Token验证。Referer验证。隐藏令牌
• XSS
  基本概念和缩写：跨域脚本攻击，cross-site scripting
  攻击原理与防御措施：略

算法类

• 排序
• 堆栈，队列，链表
• 递归
• 波兰式和逆波兰式

js技能讲解

• 渲染机制
  什么是DOCTYPE:告诉浏览器是当前文档是哪个文档类型
  浏览器渲染过程：
  重排Reflow:页面中的元素放在对应的位置，这个过程叫重排
  重绘Repaint:页面内容画在页面上
  布局Layout：
• JS运行机制
  任务队列；
• 页面性能
  资源压缩合并，减少HTTP请求。
  非核心代码异步加载；动态脚本加载，defer,async
  利用浏览器缓存：强缓存，协商缓存
  使用CDN
  预解析DNS
• 错误监控
  前端错误分类：代码错误，资源加载错误