前端八股文整理

HTML 

Canvas元素有什么用

        HTML5的canvas元素使用javascript在网页上绘制图形

前端模块化规范

        ①说说自己对前端模块化开发的认识

                (1)异步模块定义(AMD)规范是require.js推广的对模块定义的规范。

                (2)通用模块定义（CMD）规范是SeaJS推广的对模块定义的规范。

                (3)AMD提前执行，CMD延迟执行

        ②为什么需要前端模块化

                高内聚低耦合，有利于团队开发，方便维护以及代码块复用。

        ③EMAScript 6模块规范

                (1)对比于Commonjs,语法更简洁，可以更好地支持循环依赖

                (2)对比于AMD,直接支持异步加载和配置模块加载

                (3)对于结构可以做静态分析、静态检测

        ④模块化Javascript开发的优势是什么

                (1)将功能分离出来

                (2)具有更好的代码组织方式

                (3)可以按需加载

                (4)避免了命名冲突

              （5）解决了依赖问题

        ⑤require.js解决了什么问题

                (1)实现了javascript文件的异步加载

                (2)有助于管理模块之间的依赖性

                (3)便于代码的编写和维护

        ⑥说说对CommonJS和AMD的理解

                CommonJS是服务器端模块的规范，规范同步加载模块，也就是说，只有加载完成，才能执行后面的操作，Node.js采用了这个规范，CommonJS的风格是通过对module.exports或exports的属性赋值来达到暴露模块接口的目的。

                AMD规范则非同步加载模块，允许指定回调函数，AMD推荐的风格是通过module transport规范暴露接口，即通过返回一个对象暴露模块接口。

CSS

css的盒模型

        元素实际宽度尺寸=width+padding+border

em与rem的区别

        em相对于父元素，rem相对于根元素

BFC的形成和作用

       BFC属于常规流，它是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的元素。

        作用：①解决外部边距重叠；②解决父元素因子元素浮动带来的塌陷问题

移动端自适应的方式

        1.媒体查询：通过查询设备的宽度来执行不同的css代码

        2.Flex弹性布局：高度定死，宽度自适应，元素都采用px做单位

        3.rem+viewport缩放：根据屏幕宽度设定rem值，需要适配的元素都使用rem为单位，不需要适配的元素还是使用px为单位。

        4.rem实现：通过代码来控制rem基准值

JS

JS的数据类型

        ①基本数据类型：number\string\boolean\undefined\null\symbol

        ②引用数据类型：object\array\function

        注意：基本数据类型保存在栈中，复制的是值本身，修改时都会发生变化；引用数据类型保存在堆里，复制的是地址

let const var的区别

        var存在变量提升，let和const不存在

        var没有块级作用域，let和const具有

        var允许重复声明，let和const在同一作用域不允许重复声明

        var和let声明的变量可以修改，而const是常量，不能修改

如何阻止冒泡和默认行为

        e.stopPropagation()

        e.preventDefault()

setInterval和setTimeout的区别

        setInterval():可循环执行多次，一般用于刷新表单

        setTimeout():只执行一次，用于延迟执行某方法或功能

获取DOM元素有哪些方法

        document.getElementById()

        document.getElementByTagName()

        document.getElementByClassName()

        document.getElementByName()

        document.querySelector()

        document.querySelectorAll()

事件机制有几个阶段

        三个阶段：事件捕获、事件触发、事件冒泡。

事件循环

        浏览器中js代码是单线程执行，不存在并发，异步是通过维护一个队列来执行的，这样的机制叫事件循环

事件委托

       事件委托也叫事件代理，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。 

JS阻塞问题

        指当浏览器在解析文档或者渲染页面时，遇见了JS代码，需要渲染引擎中断，而运行js引擎，从而阻塞浏览器原本的工作状态。

        解决方法：将script标签放在头部，加上async或defer属性，两者都可以让浏览器进行异步加载js代码或者利用DOM动态创建script标签

New操作符的原理

        创建一