面试题——web前端面试总结

news/2024/7/24 11:22:52 标签: web前端, nodejs, 闭包/作用域, vuejs, es6

  通过近期面试(面试历程详见链接),对自己有一个更清晰的认识,现将遇到的面试题做出总结,希望可以给目前像我一样也正在找工作的你们一些建议吧,如下:

    1、项目中遇到的浏览器兼容性有哪些?原因、解决办法是什么?常用hack技巧?(举例一二)

                      兼容性                                                                                    解决办法

    (1)png24位的图片在IE6浏览器上出现背景                                      将图片做成png8格式

    (2)浏览器默认的margin、padding不同                                      加一个全局*{margin:0; padding:0}来统一

    (3)浮动IE产生双倍距离——20px

#box{float:left;  width:10px; margin:0 0 0 100px}                            再标签样式控制中加入——_dispaly:inline

    2、什么是CSS预处理器/后处理器?

(1)预处理器:例如less、sass、stylus,用来编译sass或less,增加css代码的复用性,

                还有层次、mixin、变量、循环、函数等

(2)后处理器:postCss,通常被视为在完成的样式表中根据css规范处理css,

                目前常用的是给css属性添加浏览器私有前缀, 实现跨浏览器兼容性问题。       

    3、Javascript原型、原型链?有什么特点?

    (1)原型:每个对象都会在内部初始化一个属性,就是Prototype(原型)

   (2)原型链:当我们访问一个对象的属性时,若对象内部不存在这个属性,那么就会去prototype属性中找该属性,而prototype又有自己的prototype,一直找下去,即有“原型链”概念。

    特点:Javascript对象是通过引用传递的,我们创建的每个新对象实体中没有一份属于自己的原型副本。当修改原型时,对应相关的对象也会继承这一改变。

    当我们需要一个属性值时,js引擎会先看当前对象是否有该属性;若没有,查看其prototype原型是否有,如此类推,一直检索到Object内置对象。

    4、javascript作用域链?

    (1)全局函数无法查看局部函数内部细节,但局部函数可以查看其上层的函数细节,直至全局细节;

    (2)当需要从局部函数中查找某一属性或者方法,若当前作用域没有找到,会上溯到上层作用域查找,直至全局函数,这种组织形式就是“作用域链”

    5、谈谈this对象的理解

    (1)this总是指向函数的直接调用者,

    (2)若有new关键字,this会指向new出来的那个对象;

    (3)事件中,this指向触发这个事件的对象,IE中attachEvent指向的是Window

    6、什么是闭包?为什么使用它?

    (1)闭包,是指有权访问另一个函数作用域中变量的函数。

        创建闭包的方式,常用的就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量。

    (2)利用闭包可以突破作用域链,将函数内部的变量和方法传递到外部。

    (3)闭包特性:

                函数内嵌套函数

                内部函数可以引用外部函数的参数和变量

                参数和变量不会被垃圾回收机制回收

    7、json了解?

    (1)json是一种轻量级的数据交换格式。

    (2)特点:数据简单、易于读写、占用带宽小

        转换json对象——var obj = JSON.parse(str);

        转换json字符串——var last = obj.toJSONString();

    8、Ajax是什么?如何创建?

    (1)Ajax(asyn.. javascript and xml)异步传输+js+xml

    异步——向服务器发送请求时,不必等待结果,而是同时做其他事情,等有结果它会进行后续操作。

        与此同时,不会引发整个页面刷新,提高了用户体验。

    (2)Ajax创建

    2-1:创建XMLHttpRequest对象(xhr),即一个异步调用对象;

    2-2:创建一个新的http请求,指定该http请求的方法(get/post)/url/验证信息(true/false)

    2-3:设置响应http请求状态变化的函数onReadyState

    2-4::发送http请求send()

    2-5:获取异步调用返回的数据

    2-6:使用js和dom实现局部刷新flush()

    9、如何解决跨域问题?

    jsonp、iframe、....

    10、异步加载js方式有哪些?

    defer、asyn、创建script,插入到dom中,加载完毕后callback回调函数

    11、call()和apply()区别?

    相同点:二者都是作为函数的引用;

    异同点:第二个参数不同,call()是一个一个参数输出(a,b,c),apply()为输出一个对象“[a,b,c]”

    12、哪些会引起内存泄漏?解决办法?

    (1)setTimeout第一个参数使用字符串而非函数,会引起内存泄漏

    (2)闭包、控制台日志、循环

    (3)解决办法:引用计数、标记清除

    13、做过的项目有没有用过或自己实现一些polyfill方案(兼容性解决方案)?

    html5shiv、placeholder

    14、用过的哪些性能优化的方法?

    (1)减少http请求:css sprites、文件压缩、cdn托管

    (2)前端模板js

    (3)用innerHTML代替dom操作,可减少dom请求

    (4)少用全局变量,避免使用css表达式

    (5)图片预加载,样式表顶部,js底部,使用时间戳

    15、Vue前端开发框架(vue-router、vue-resouce...),写几个vue命令

        (1)Vue渐进式框架,采用自底向上增量开发的设计。基于MVVM框架,vue核心(ViewModel,vue的一个实例vm)只关注视图层,提供更加简洁、易于理解的API

                            DomListener           +       DataBingings         ——    实现双向绑定关键

                   监听View层Dom元素变化        监听Model层数据

               a、当View层Dom层元素发生变化,Model层随之变化;

               b、当Model层数据发生变化,View层的Dom元素随之变化。

        (2)特点:简洁(页面HTML+JSON数据+Vue实例)、数据驱动(computed计算属性和追踪以来的表达式)、组件化(采用可复用、解耦的组件构建页面)、轻量快速(代码量小,精确有效批量dom更新)、模块友好(npm安装)    

        (3)v-if与v-show均为条件渲染指令

                a、v-if值为true,元素才存在HTML代码中;

                b、v-show无论是true或者false,均会出现在HTML代码中,表示css样式

        (4)css只在当前组件有效,设置为“scoped”

        (5)指令keep-alive含义:若把切换出去的组件保留在内存中,可保留它的状态或者避免重新渲染

        (6)v-bind     v-on:click     v-model

                vue -V

                vue init webpack test1

    16、vue-resource与axios区别?

       (1)vue-resource:与ajax相似,通过XHR或者jsonp发送请求并处理响应。比起ajax而言,其API更为简洁;

               案例:Vue.http.get('/someUrl',[option]/body).then(successCallback,errorCallback)

       (2)axios:是vue2.0升级,尤雨溪不再对vue-resource进行维护,用的axios需要代理服务器相关。

    17、html5/css3新特性?

         (1)Html5——header、footer、aside、article、localstorage、sessionstroage、地图等。

         (2)Css3——border-radius圆角,box-shadow阴影,gradiant渐变,text-decoration下划线,transform转换等。

    18、ES6新特性并举例说明

        (1)变量定义(let、const)

        (2)解构赋值(一个对象的方法属性定义给另一个)

            varfirst = someArray[1]        varsecond = someArray[2]    varthird = someArray[3]

            var[first,second,third] = someArray;

        (3)箭头函数(input=>output)

        (4)set和map结构(set唯一存储key值,而map存储键值对key-value)

        (5)模板字符串(嵌入变量,需要将变量名写在${}中,空格tab符同是)

        (6)数组新API(Array.form()、values())

        (7)Promise对象(包含resolve、reject两个属性) 

        案例:var promise = new Promise(function(resolve,reject) {

                        if(异步操作成功)    { resolve(value); }

                        else                     { reject(error);     }

                 })  

                promise.then(function(value){

                  //success

                },function(value) {

                  //error

                })

    19、ESLint规范以及版本使用?

            (1)ESLint保证代码一致性,避免错误;(详见官方文档)

            (2)安装命令:npm install -g eslint

    20、Node怎么样?

          Node运行在服务端,是Chrome V8引擎,事件驱动I/O,

          基于Node环境下开发的Express服务端框架,是MVC模式的,提供丰富的HTTP工具以及connect中间件技术

    21、面向对象编程的三大特性,解释每个特点?

        (1)封装:客观事物抽象为类。类是抽象的,对象是具体的,对象抽象类的实物表达;

        (2)继承:子类(派生类)继承父类(基类),从一般到特殊,子类可以继承父类的属性和方法

        (3)多态:接口重用,一个事物可以存在多种形态

                实现多态的两种方法——覆盖(子类重新定义父类中的方法)、重载(允许函数名相同,参数个数不同)

    20、MVC与MVVM框架的理解?二者区别是什么?

        (1)从字面定义来说,

        MVC: model-view-controller                    单向绑定

        MVVM:model-view-viewmodel                双向绑定

        (2)从原理上来说,

        MVC:SSH、ASP.net

    用户操作—>View(负责接收用户输入操作)—>controller(业务逻辑层)—>Model(数据持久化)—>View(结果反馈给用户)

        MVVM:.NET的WPF、Vue

     View与Model无任何联系,view与Viewmodel、viewmodel与model是双向改变的

        (3)从优点触发,

       MVC:比较直观的后台框架,易于维护,减少耦合度,易于管理

       MVVM:低耦合(view可独立model变化/更改,viewmodel可绑定到多个view中,view与model可以双向绑定)

                     可重用性(将视图逻辑放于viewModel中,view可重用viewModel实例)

                     独立开发(开发人员——viewModel业务逻辑+数据,设计人员——view界面)   

                     可测试性(针对viewModel对view界面进行测试)

    21、webpack构建工具(与gulp区别)、npm包管理器?

        (1)gulp是一个工具,用于优化前端工作流程,比如刷新界面——需要手写处理任务

        (2)webpack是一个打包工具,提供模块化的解决方案——有现成的解决方案

    22、模块化、组件化区别?

        (1)模块化:关注功能和数据的封装,根据项目业务内容划分大模块;

        (2)组件化:关注UI部分的设计,根据小功能通用性和可复用性抽象组件

                区别:一个模块(抽象)包含多个组件(具体),组件是模块的子集。

    23、Linux命令

            常见的有20个常用命令,诸如cd、ls(list)、find、cp(copy)、mv(move)、rm(remove)、kill、file等

            详情见博文:Linux——http://blog.csdn.net/ljianhui/article/details/11100625

    24、浏览器调试工具用过哪些?

            (1)chrome:Elements、console、Source(设置断点调试)

            (2)firefox:安装firebug插件,与chrome相同

    25、PS常用技能?

              切图以及快捷键

    26、git命令(举例说明)

            (1)创建和使用 git ssh key                (5)git push/pull

            (2)配置git config                            (6)git commit

            (3)变更git remote set                     (7)git add/remove

            (4)查看git show                             (8)git log(日志)/branch(分支)

    27、webpack命令(举例说明)

            (1)安装:npm install webpack -g

            (2)下载插件:npm install webpack --save-dev

            (3)自动监控:webpack  --watch

            (4)打包隐藏:webpack --display

            (5)安装loader:npm install  {whatever}-loader --save-dev

  28、AMD与CMD区别?

            AMD:是Require.js规范,提前执行,——依赖前置,一个视为多个

            CMD:是Sea.js规范,延迟执行,——依赖就近,单一


温馨提示:上述答案仅作为个人简要的见解,仅做参考,如有不当地方还请在评论区多多指正,(这只是大概的,后续如果有还会更新,敬请关注)。


http://www.niftyadmin.cn/n/1659252.html

相关文章

线程池状态以及转换java_JAVA线程间的状态转换

线程间的状态转换:1.新建(new):新创建了一个线程对象。2.可运行(runnable):线程对象创建后,其他线程(比如main线程)调用了该对象的start()方法。该状态的线程位于可运行线程池中,等待被线程调度选中,获取cp…

neo4j的java开发接口_Java Application 集成 Neo4j

为了能够使用Neo4j进行项目开发,今天看了相关的文档,利用Neo4j的Api在Java下面对其进行操作,故写下如此示例。任务目标添加User结点和Movie结点,并在这些结点中添加对应的关系,使它们之间可以关联起来,如下…

java计算彩票概率_彩民用数学概率法推算购买彩票中100万

排列5又造百万富翁。近日,珠海香洲彩民林先生在香洲紫荆路03052投注站以10倍倍投的投注方式,中得10注排列5一等奖,获得高达100万元的奖金。林先生是一位老彩民,购买体育彩票多年。他平时除喜欢玩排列3、排列5外,也常常…

centos 安装 mysql.h_CentOS - Mysql安装

1.检查是否安装Mysqlrpm -qa | grep mysql2 . 有则先删除,下载 Mysqlwget http://dev.mysql.com/get/Downloads/MySQL-5.6/mysql-5.6.33-linux-glibc2.5-x86_64.tar.gz3.解压tar -zxvf mysql-5.6.33-linux-glibc2.5-x86_64.tar.gz4 . 复制解压后的mysql目录cp -r my…

java 数据聚合_聚合java

09【在线日志分析】之基于Spark Streaming Direct方式的WordCount最详细案例(java版)1.前提 a. flume 收集--》flume 聚合--》kafka ,启动进程和启动kafka manager监控 08【在线日志分析】之Flume Agent(聚合节点) sink to kafka cluster b.window7 安装jdk1.7 …

php的iconv函数,linux系统上支持php的 iconv()函数的方法

iconv函数库能够完成各种字符集间的转换,是php编程中不可缺少的基础函数库。1、下载libiconv函数库http://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.9.2.tar.gz;2、解压缩tar -zxvf libiconv-1.9.2.tar.gz;3、安装libiconv复制代码 代码示例:&#xff0…

php sae storage api,api.php · silenceper/saeApi - Gitee.com

/*** 为了方便外部网站将附件上传至 SAE上的Storage 所以写了这个简单的api。** author silenceper* date 2013-07-28*/class Api{public $postnull;public $filesnull;public function __construct($pass){$this->post$_POST;if(!empty($_FILES)){$this->files$_FILES;}…

websoft php,浅析php环境配置 - Websoft9_的个人空间 - OSCHINA - 中文开源技术交流社区...

PHP作为开源的服务器端脚本语言,在web应用方面非常广泛。如果你想下载某些开源应用,github上php开源软件选择往往比Java还多。最近,研究了linux下php的安装,主要有以下体会。PHP-INIphp.ini文件是php的核心配置文件且只能命名为ph…