前端面试基础知识点总结

一、H5新特性新增标签本地存储webStoragewebsocketwebworkers新增地理位置对css3的支持canvas

帆布多媒体标签新增表单元素类型结构标签：headernavarticleasidefooter表单标签：emailurlrangedate媒体标签：videoaudionavigator.geolocation.getCurrentPosition(success,error,option);二、css3新特性圆角阴影背景渐变弹性盒布局过渡动画2D/3D转换媒体查询border-imagebackground:linear-gradient(direction,color1,color2[stop],color3...);background:radial-gradient(shapesizeatposition,start-color,...,color[stop]...,last-color);transition需要触发条件，而且只有开始和结束之间的过渡。animation：不需要触发，中间可以插入无数关键帧。transform:translate3d(0px,0px,400px);三、webstorage和cookie的区别容量cookie4kwebStorage5M

webStorage5分钟存储时长localStorage长期存储sessionStorage基于单次会话存储cookie必须设定存储时长和服务器交互cookie信息会在和服务器做交互时默认发送到服务端webStorage只会存储在本地四、实现响应式布局几种方式原生代码媒体查询bootstrap等框架五、jsonp原理允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。六、闭包一个可以访问另一个函数中的变量的函数。当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数内部的变量,且返回的这个函数在外部被执行就产生了闭包。七、js的垃圾回收机制标记清除引用计数八、浏览器缓存机制在Header内的字段用于控制缓存机制老方法Expires，记录的绝对值新方法Cache-Control多了一堆选项，记录的时间是相对值获取缓存检测缓存是否过期，如果没过期取缓存，优先从内存，其次硬盘，如果过期，则与服务器协商缓存是否仍然可用，如果不可用则获取，可用取缓存九、js本地对象,内置对象和宿主对象本地对象包括如下内容：Object、Function、String、Array、Boolean、Number内置对象：Math宿主对象：BOM/DOM对象十、http请求流程建立tcp连接的三次握手过程vue与react区别，优缺点1、区别：1）数据流与状态管理：Vue使用双向数据流，允许组件之间的状态直接进行同步。而React则倡导单向数据流，使用setState方法更新状态，通过props将数据从父组件传递给子组件，使得数据流向更为明确。2）组件化思想：React的组件化思想更为彻底，它主张一切皆组件，包括UI、状态、数据等，都可以封装成组件。而Vue则更倾向于将模板、逻辑与样式进行分离，实现更为灵活的组件复用。3）模板与JSX：Vue使用基于HTML的模板语法，这使得开发者能够更直观地编写组件的UI部分。而React则使用JSX，这是一种JavaScript的语法扩展，允许在JavaScript中编写类似HTML的结构，具有更强的灵活性和可维护性。2、优点：Vue： 易于上手：Vue的API直观易懂，上手容易，学习曲线平缓，适合初学者。 灵活性高：Vue既可以用于构建大型单页应用(SPA)，也可以用于构建小型组件。 响应式：Vue会自动追踪数据的变化，并更新视图，无需手动操作DOM。React： 创建动态Web应用程序变得更容易：React通过虚拟DOM提高了性能，使得构建动态Web应用程序变得更加容易。 可重用组件：React的组件化思想使得组件可以更容易地复用和组合，提高了开发效率。 性能增强：React的虚拟DOM技术能够最小化DOM操作，提高应用性能。3、缺点：Vue： 生态系统相对较小：与React和Angular相比，Vue的生态系统相对较小，可能需要花费更多精力去实现功能。 文档资料相对较少：尽管Vue的官方文档非常详细，但相比其他框架，其文档和资料可能还不够完善。React： 学习曲线较陡峭：对于初学者来说，React的学习曲线可能较陡峭，需要花费一定的时间和精力去掌握其核心概念和技术。 模板与JSX的权衡：虽然JSX提供了更大的灵活性，但对于一些开发者来说，可能需要适应这种新的语法和编程方式。十二、vue双向绑定原理已经了解到vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的，无疑这个方法是本文中最重要、最基础的内容之一，要实现mvvm的双向绑定，就必须要实现以下几点：1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图4、mvvm入口函数，整合以上三者十三、http常见状态码1信息，服务器收到请求，需要请求者继续执行操作2成功，操作被成功接收并处理3重定向，需要进一步的操作以完成请求4客户端错误，请求包含语法错误或无法完成请求5服务器错误，服务器在处理请求的过程中发生了错误十四、vue路由机制主要是<router-link>和<router-view>两个标签<router-link>执行时会转换成<a>，并根据自己的to属性将路由地址转变成href的值，然后渲染在<router-view>标签中。十五、js继承类的方式5种继承十六、this有哪几种指向this的四种指向。window对象构造函数call/apply十七、es6有哪些新特性letconst箭头函数展开符解构赋值对象语法糖字符串模板十八、webpack相关配置属性入口出口文件：entry:{ index:__dirname'/src/main.js',//__dirname表示当前项目的根路径。 goods:__dirname'/src/goods.js'},output:{ path:__dirname'/dist', filename:'[name].js'},http代理：devServer:{ contentBase:__dirname'/dist', port:3000, inline:true, //每当我们访问/zhuiszhu地址的时候，就把请求转发给target地址的服务器。 proxy:{ '/zhuiszhu':{ target:'90:3000', secure:false, changeOrigin:true }}}资源地图：devtool:'source-map'本地web服务配置：npmiwebpack-dev-server@2.9.7-g//安装的webpack-dev-server模块配置信息devServer:{ contentBase:__dirname'/dist',//指定本地web服务器根路径 port:3000, inline:true//当源文件改变后，自动在浏览器页面刷新}提取css文件：npmiextract-text-webpack-plugin-D//webpack.config.jsletExt=require('extract-text-webpack-plugin');module:{ rules:[ {test:/\.css$/,loader:Ext.extract('css-loader')}, {test:/\.less$/,loader:Ext.extract('css-loader!less-loader')} ]},plugins:[ newExt('index.css')],webpack配置别名resolve:{ //配置别名，在项目中可缩减引用路径 alias:{ vue$:'vue/dist/vue.esm.js', '@':resolve('src'), '&':resolve('src/components'), 'api':resolve('src/api'), 'assets':resolve('src/assets') }}十九、模块化nodejs使用的是commonjs规范注意:nodejs虽然原生支持es6但它并不支持es6的import规范导入:letxx=require("xxx")导出://一个文件内只能使用一次module.exports=Object|Function|Array|String|Number|Boolean//一个文件可以使用多次exports.xxx=Object|Function|Array|String|Number|Boolean下列写法不被允许它会改变exports对象的引用导致程序运行出错exports={ xxx:"text"}es6的import规范方式1导入:importXXXfrom"xxx"导出:exportdefaultxxx该种方式一个文件内只能使用一次方式2导入:import{XXX}from"xxx"import{XXXasYYY}from"xxx"//将模块XXX给个别名为YYY导出:exportlet|const|var|function|class|interfaceXXX=....或者let(可以是其他声明符)XXX=....export{XXX}上述导出方式可以在同一个文件内使用多次还有AMD规范和CMD规范二十、什么是观察者模式也称：发布订阅模式。当对象间存在一对多关系时，这个对象的状态发生改变，则会自动通知它的依赖对象，进行广播通知。比如：vue中子组件向父组件传值，子组件使用$emit自定义一个事件名称，父组件接收这个事件即可。还有中央事件总线emiton二十一、什么是mvcmvpmvvmM为数据层，V视图层，C逻辑层。MVP（Model-View-Presenter）是MVC的改良模式，由IBM的子公司Taligent提出。和MVC的相同之处在于：Controller/Presenter负责业务逻辑，Model管理数据，View负责显示只不过是将Controller改名为Presenter，同时改变了通信方向。在MVP中，View并不直接使用Model，它们之间的通信是通过Presenter(MVC中的Controller)来进行的，所有的交互都发生在Presenter内部。MVVM=MVP新特性（bind等）二十二、平时怎么解决浏览器兼容问题（具体问题的解决方案）1、默认padding，margin不同解决：自定义初始化css2、在一个div中放一个img，但是img的下方和div之间有3px的间隔。这是浏览器的解析问题，不同的浏览器间隔的还不同。foxfire是5px，chrome是3px。解决：/*方式一*/div{font-size:0;}/*方式二*/img{display:block;}/*方式三*/img{vertical-align:top;}3、几个img标签放在一起的时候，有些浏览器会有默认的间距解决：使用float属性为img布局4、解决ie9以下浏览器对html5新增标签不识别的问题。引入html5shiv.js文件5、针对IE属性csshack6、-ms--o--webkit--moz-7、清除浮动clearfix8、边距重叠解决：加一个父元素，父元素使用overflow:hidden;9、IE9不能使用opacityopacity:0.5;filter:alpha(opacity=50);filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);二十三、数组的操作方法join，push，pop，map，forEach，every，some，filter，concat，splice二十四、如何进行性能优化缩短页面加载时间1、减少http请求2、使用cdn加速3、添加Expires头4、将样式css放在头部，脚本script放在底部5、使用外部的JavaScript和CSS二十五、实现原生ajax的步骤letxhr=newXMLHTTPRequest();xhr.open('get','xxx.php?id=1',true);xhr.send()xhr.onreadystatechange=function(){if(this.readyState==4&&this.status==200){console.log(this.response)}}二十六、Vue

如何创建全局组件和局部组件如何定义props如何对props进行类型验证什么是计算属性数据