前端面试基础知识点总结_第1页
前端面试基础知识点总结_第2页
前端面试基础知识点总结_第3页
前端面试基础知识点总结_第4页
前端面试基础知识点总结_第5页
已阅读5页,还剩13页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

一、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进行类型验证什么是计算属性数据

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论