• 前端面试知识点


    H5 新特性

    新增标签

    本地存储 webStorage websocket webworkers

    新增地理位置 对css3的支持

    canvas

    多媒体标签

    新增表单元素类型

    结构标签:header nav article aside footer

    表单标签:email url range date

    媒体标签:video audio

    navigator.geolocation.getCurrentPosition(success,error,option);
    

    css3 新特性

    圆角

    阴影

    背景渐变

    弹性盒布局

    过渡

    动画

    2D/3D转换

    媒体查询 border-image

    background: linear-gradient(direction, color1, color2 [stop], color3...);
    
    background: radial-gradient(shape size at position, start-color, ..., color [stop] ..., last-color);
    
    transition 需要触发条件,而且只有开始和结束之间的过渡。
    
    animation:不需要触发,中间可以插入无数关键帧。
    
    transform: translate3d(0px,0px,400px);
    

    webstorage 和cookie的区别

    容量 cookie 4k

    webStorage 5M

    存储时长 localStorage 长期存储

    sessionStorage 基于单次会话存储

    cookie 必须设定存储时长

    和服务器交互

    cookie信息会在和服务器做交互时 默认发送到服务端

    webStorage 只会存储在本地

    实现响应式布局几种方式

    原生代码 媒体查询

    bootstrap等框架

    jsonp原理

    允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

    闭包

    一个可以访问另一个函数中的变量的函数。当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数内部的变量,且返回的这个函数在外部被执行就产生了闭包。

    js的垃圾回收机制

    标记清除

    引用计数

    浏览器缓存机制

    在 Header 内的字段用于控制缓存机制 老方法 Expires,记录的绝对值 新方法 Cache-Control 多了一堆选项,记录的时间是相对值 获取缓存检测缓存是否过期,如果没过期取缓存,优先从内存,其次硬盘,如果过期,则与服务器协商缓存是否仍然可用,如果不可用则获取,可用取缓存

    https://juejin.im/entry/5ad86c16f265da505a77dca4

    js 本地对象,内置对象和宿主对象

    本地对象包括如下内容:Object、Function、String、Array、Boolean、Number

    内置对象:Math

    宿主对象:BOM/DOM对象

    http 请求流程

    建立tcp连接的三次握手过程

    vue与react区别,优缺点。

    https://segmentfault.com/a/1190000016344599

    vue双向绑定原理

    已经了解到vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的,无疑这个方法是本文中最重要、最基础的内容之一,如果不熟悉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有哪些新特性

    let const 箭头函数 展开符 解构赋值 对象语法糖 字符串模板

    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: 'http://39.105.136.190:3000',
                secure: false,
                changeOrigin: true
            }
        }
    }
    

    资源地图:devtool: 'source-map'

    本地web服务配置:

    npm i webpack-dev-server@2.9.7 -g
    
    // 安装的webpack-dev-server模块配置信息
    devServer: {
        contentBase: __dirname + '/dist', // 指定本地web服务器根路径
        port: 3000,
        inline: true // 当源文件改变后,自动在浏览器页面刷新
    }
    

    提取css 文件:

    npm i extract-text-webpack-plugin -D
    
    // webpack.config.js
    let Ext = require('extract-text-webpack-plugin');
    
    module: {
        rules: [
            { test: /.css$/, loader: Ext.extract('css-loader') },
            { test: /.less$/, loader: Ext.extract('css-loader!less-loader') }
        ]
    },
    plugins: [
        new Ext('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规范
    
    导入:
    let xx = 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
    导入:
        import XXX from "xxx"
    导出:
        export default xxx
        该种方式一个文件内只能使用一次
    
    方式2
    导入:
        import {XXX} from "xxx"
    
        import {XXX as YYY} from "xxx" //将模块XXX给个别名为YYY
    导出:
        export let | const | var | function | class | interface XXX = ....
        
        或者
        let(可以是其他声明符) XXX = ....
        export {XXX}
    
    上述导出方式可以在同一个文件内使用多次
    
    
    还有
    AMD规范 和CMD规范  
    

    什么是观察者模式

    也称:发布订阅模式。

    当对象间存在一对多关系时,这个对象的状态发生改变,则会自动通知它的依赖对象,进行广播通知。

    比如:vue中子组件向父组件传值,子组件使用$emit自定义一个事件名称,父组件接收这个事件即可。

    还有中央事件总线 emit on

    什么是mvc mvp mvvm

    M 为数据层,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不同
    解决:自定义初始化css
    
    2、在一个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属性 css hack
    6、-ms- -o- -webkit- -moz-
    7、清除浮动 clearfix 
    8、边距重叠
    解决:加一个父元素,父元素使用overflow: hidden;
    
    9、IE9不能使用opacity
    opacity: 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的步骤

    let xhr = new XMLHTTPRequest();
    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进行类型验证

    • 什么是计算属性

    • 数据监听(watch)

    • 常用指令 v-if v-show 循环迭代

    • 定义过滤器 (局部 全局)

    • 进行组件间通信的方式

    • slot 内容插槽

    • v-for的key作用

    v-for渲染的列表的结构采用“就地复用”的策略,也就说当数据重新排列数据时,会复用已在页面渲染好的元素,不会移动 DOM 元素来匹配数据项的顺序,这种模式是高效的,改变现有位置的结构的数据即可

    • 如何配置使用路由

    • 路由守卫 beforeEach beforeEnter beforeRouteEnter/Leave/Update

    • 多视图路由

    • vuex的几个核心概念 store state getter mutation action

    • 如何对store进行模块化拆分

    • 如何开启命名空间

    • 组件的生命周期函数

    React

    • 如何定义组件?

    • 如何接受props

    • 如何进行props类型验证

    • 组件的生命周期函数

    • 三大周期 7个生命周期函数

    • 修改组件状态

    • 进行数据双向绑定

    • ref的使用方式

    • 路由的使用方式

    • 路由守卫

    • flux架构 view action dispatcher store

    • redux 框架 view store reducer

    • 异步action

    • 如何进行性能优化

    • 虚拟dom

    • react和vue中的diff算法

    angular

    • 模块 组件 服务 管道

    • 什么是依赖注入

    • 如何使用路由

    • 参数快照 参数订阅

    • 响应式编程

    • angular中的模板式表单和响应式表单

    • 如何做表单验证

    • angular-cli的使用方式

    • 如何创建组件 创建服务 创建类 创建管道

    • 网格系统 如何同bootstrap实现响应式布局

    col-lg-6
    
    col-md-6
    
    col-sm-6
    
    col-xs-6
    <div class="col-md-6 col-xs-12"></div>
    
  • 相关阅读:
    Spring经典视频教程大集合
    使用jsonlib进行Java和JSON之间的转换
    c:import Unable to get RequestDispatcher for Context
    打开IE都会弹出欢迎界面“欢迎使用Internet Explorer 8”
    Struts2 标签 用法示例 (
    as3相关的frameworks
    as相关的框架引擎应用集合
    init
    XNA框架基础——疑难解答
    XNA框架基础——XNA的注意事项
  • 原文地址:https://www.cnblogs.com/lvonve/p/11936026.html
Copyright © 2020-2023  润新知