前端面试题一答案

旧城等待， 2022-01-15 02:17 338阅读 0赞

## 前端面试题 ##

### 基础部份 ###

1.  请用自己语言简述对html,css,js的理解.
    
    > html超文本标记语言，用于实现网页的结构，内容。也就是网页上该显示标题，图片，段落，还是表格，由html实现。  
    > css级联样式表,用于实现网页样式，外观。也就是决定网页内容样式，比如，标题的字体大小，颜色，位置等等。  
    > js全称javascript是一门脚本语言，用于实现网页行为，动作。动态操作DOM节点元素，实现滚动，页面轮播，等动态效果。
2.  什么是前后端分离。
    
    > 在以前传统的网站开发中，前端一般扮演的只是切图的工作，只是简单地将UI设计师提供的原型图实现成静态的HTML页面，然后交给后端工程师，后端工程师不紧要实现后台数据交互，业务逻辑处理，还要实现页面交互逻辑，动态效果等。后台开发压力，强度大，效率不高。  
    > 现在前后端分离开发模式下，后台只专注于后台数据，业务逻辑处理，通过接口向前端提供数据。前端根据接口获取后台数据，将静态页面实现为动态并实现简单的业务逻辑处理。前后端通过接口文档定义实现同时并发开发，提高效率。
3.  什么是模块化？请列举开发工作中用到前端的’模块化‘组件。
    
    > 模块化开发可以理解为将大量重复的代码提取出来封装成独立模块，供其它模块调用，nodejs中一个js文件就被定义为一个模块，按照模块规范进行暴露与引用。  
    > 在通过nodejs平台开发基于express框架的web程序时，将不同模块封装成路由中间件，通过app.use(’/’,index)加载  
    > 在vue项目中，将通用功能封装成组件在不同地方调用，后台管理系统菜单模块封装成菜单组件。头部组件，底部组件，列表组件，列表项组件等.
4.  什么是’webapp’？请根据自身项目经验，说说’webapp’对‘原生app’的优劣。
    
    > webapp是运行在智能手机浏览器上的应用程序，主要采用html5，css和javascript技术开发。  
    > 使用webapp开发应用程序效率高，同一款程序可以运行在不同操作系统的手机上，而原生app需要针对不同操作平台进行开发，如android手机和iphone手机需要分别开发。  
    > webapp运行流畅度没有原生快，在手机底层硬件操作时能力不足，如蓝牙，音视频，摄像头等操作。  
    > 所以在开发运行流畅度高，底层硬件多的应用时原生开发占优势。
5.  根据自身经验，描述下什么是‘回调函数’
    
    > 回调函数可以理解为异步任务执行完就会被调用执行的函数。实际项目应用中异步文件操作，异步数据库操作，当文件读取完成或数据库查询返回结果时，执行回调函数处理读取的文件数据或数据库记录。还有ajax异步请求等。
6.  有过使用‘雪碧图’的经验么？为什么要用‘雪碧图’？
    
    >  *  利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
    >  *  CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
    >  *  解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
    >  *  更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
7.  列举一些自己使用过的html5新特性.
    
    >  *  新的内容标签
    >  *  本地存储存 LocalStorage SessionStorage
    >  *  设备访问 地理位置API ,媒体访问API ，访问联系人及事件
8.  前端开发中遇到问题。
    
    > 前端调用后台接口时跨域问题。jsonp,代理，cors  
    > 前端程序在真机运行加载图片延迟问题。懒加载解决  
    > vue组件间通讯子组件向父组件传值问题。  
    > vue操作原生dom。  
    > vue前置守卫实现登录认证  
    > 注: 根据实际情况遇到问题，提取有一定难度的，
9.  从事开发到现实有哪些积累？
    
    > 页面积累：快速开发各种静态页面，css样式效果。js常见动画，轮播，滑动等，列表页上拉刷新，下拉加载更多，分类与分类项目联动。  
    > 通用模块积累：图片上传，分页，数据库封装，  
    > 小程序开发流程。  
    > 前端框架vue开发

### 扩展部份 ###

1.  '同步’和‘异步’是什么意思？在前端代码中哪种代码是‘同步’代码，哪种是‘异步’代码  
    同步是指代码按照执行流程一条一条向下执行，后面代码必须等前面代码执行完才能执行，如果前面代码执行耗时操作，后面代码就会阻塞等待。  
    异步是指代码可以同步并发执行，后面代码不用等前面异步代码执行完再执行。即使前面代码执行耗时操作，后面代码也不会阻塞。  
    同步代码：  
    控制台输出语句console.log()  
    条件判断，循环语句，
    
    异步代码:  
    定时器 setTimeout()  
    ajax fetch  
    fs.readFile  
    mysql.query  
    promise.then().catch
2.  如果遇求‘在同步循环代码中使用异步方法’会有什么问题？该怎么解决？  
    输出结果是最后一次循环结果，因为js是单线程执行，对于异步任务会先进行一次保存，等整个循环执行结束后再执行。如下例:
    
        for (var i = 0; i < 5; ++i) { 
             setTimeout(function() { 
                 console.log("index is :", i);
             }, 1000);
         }
         //输出

index is : 5  
index is : 5  
index is : 5  
index is : 5  
index is : 5

使用递归解决
    ```javascript
    function box7(param) {
     if (param < 5) {
         console.log("index is :", param);
         setTimeout(function() {
             box7(param + 1);
         }, 1000)
     }
    }
    box7(0);

async、await解决

1.  ‘异步’'方法中使用循环将‘回调’对象obj压入数组后，数组中所有的元素都会变成最后一个元素，而先将obj对象转成字符后再压入数组就不会出现上述情况。请分析出上述情况的原因。  
    javscript是单线程执行的，所有同步代码会放入执行栈执行，异步代码会存入任务队列等待执行栈代码执行完再执行，在异步将对象压数组操作中，压数组操作会被放入任务队列，等循环结束后再执行，所以会出现循环的最后一个对象压入数组。
2.  数据类型中‘引用类型’，‘基础类型’有什么区别，在内存怎么存储?