前端面试集锦（3）

zoukankan html css js c++ java

前端面试集锦（3）
1、写一个function,清除字符串前后的空格（兼容所有浏览器）
function trimfn(str) { 　　return str.replace(/^s+/,"").replace(/s+$/,"")
　　//return this.replace(/(^s+)|(s+$)/g,""); }
2、请写出至少三种减少页面加载时间的方法

　　https://blog.csdn.net/gongzhuxiaoxin/article/details/52454213

1. 尽量减少页面中重复的HTTP请求数量

2. 服务器开启gzip压缩

3. css样式的定义放置在文件头部
4. Javascript脚本放在文件末尾

5. 压缩Javascript、CSS代码

6. Ajax采用缓存调用

7. 尽可能减少DCOM元素

8、网址后面加上“/”:对服务器而言，不加斜杠服务器会多一次判断的过程，加斜杠就会直接返回网站设置的存放在网站根目录下的默认页面。

3、浏览器的内核分别是什么？各有哪些优缺点？

　　https://www.jianshu.com/p/77fa8edcf85c

　　http://ask.zol.com.cn/x/5066257.html

　　IE：trident内核

　　firefox：gecko内核

Safari：webkit内核

opera：以前是用presto内核，现在已经改用google chrome的blink内核

chrome：blink（基于webkit，是google与opera software共同开发的

4、请写一个方法，清除数组中的重复元素？

1、Es6：new Set()

let unique = [...new Set(array)]
new Set()，用来去重数组 let arr = [1, 2, 2, 3]; let set = new Set(arr); let newArr = Array.from(set); console.log(newArr); // [1, 2, 3]
2、遍历，indexOf判断是否存在，已存在就不添加

3、遍历，对象不能添加相同的属性名，然后用Object.keys()返回这个对象可枚举属性组成的数组

5、编写程序打印图形，如图

Q

QQ

QQQ

QQQQ

QQQQQ

https://blog.csdn.net/heechul8/article/details/77096483
function printQ(max) { for (var i = 1; i <= max; i++) { for (var j = 1; j <= i; j++) { document.write("Q") } document.write("<br/>"); } } printQ(5)
6、CSS如何实现垂直水平居中（居中元素大小不固定）

　　https://blog.csdn.net/u011295864/article/details/80675192

　　https://www.jianshu.com/p/f3df6ccc050a
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>垂直水平居中</title> <style> /*(1) .parent{ 100%; height: 500px; border:1px solid black; align-items:center; display: -webkit-flex; justify-content:center; } .center{ border:1px solid red; } */ .parent{ width: 100%; height: 500px; border:1px solid black; position:relative; } .center{ border:1px solid red; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); } </style> </head> <body> <div class="parent"> <div class="center">hahhaha</div> </div> </body> </html>
7、列举哪些方式会创建块格式化上下文（BFC）
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
8、setItmeout、async/await、promise考察程序打印顺序

　　https://blog.csdn.net/baidu_33295233/article/details/79335127
async function async1() { console.log("async1 start"); await async2(); console.log("async1 end"); } async function async2() { console.log( 'async2'); } console.log("script start"); setTimeout(function () { console.log("settimeout"); },0); async1(); new Promise(function (resolve) { console.log("promise1"); resolve(); }).then(function () { console.log("promise2"); }); console.log('script end');
　　总结：先执行同步代码，遇到异步代码就先加入队列，然后按入队的顺序执行异步代码，最后执行setTimeout队列的代码。

　　队列任务优先级：promise.Trick()>promise的回调>setTimeout>setImmediate

9、已知如下数组：var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组

　　https://blog.csdn.net/lunahaijiao/article/details/87068848

　　https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat　
var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10] // 扁平化 let flatArr = arr.flat(4) // 去重 let disArr = Array.from(new Set(flatArr)) // 排序 let result = disArr.sort(function(a, b) { return a-b }) console.log(result)
10、聊聊浏览器兼容性

　　https://cloud.tencent.com/developer/article/1333299

　　https://www.cnblogs.com/shizk/p/8459362.html

　　https://www.jianshu.com/p/56e0eb736526

一、html部分

1.H5新标签在IE9以下的浏览器识别



html5shiv.js下载地址

https://github.com/aFarkas/html5shiv/releases

2.ul标签内外边距问题

ul标签在IE6IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。

解决方法：统一设置ul的内外边距为0

二、CSS样式的兼容性

1.css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同 IE的条件注释hack：            

2.IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍解决办法：display:block;

3.IE6下图片的下方有空隙 解决方法：给img设置display:block;

4.IE6下两个float之间会有个3px的bug    解决办法：给右边的元素也设置float:left;

5.IE6下没有min-width的概念，其默认的width就是min-width

6.IE6下在使用margin:0 auto;无法使其居中 解决办法：为其父容器设置text-align:center;

7.被点击过后的超链接不再具有hover和active属性 解决办法:按lvha的顺序书写css样式， ":link": a标签还未被访问的状态； ":visited": a标签已被访问过的状态； ":hover": 鼠标悬停在a标签上的状态； ":active": a标签被鼠标按着时的状态；

8.在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0，子高父低，所以不会改变显示的顺序

9.IE6下无法设置1px的行高，原因是由其默认行高引起的解决办法：为期设置overflow:hidden;或者line-height:1px;

三、JavaScript的兼容性

1.标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；

2.事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准

3.window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement

4.在低版本的IE中获取的日期处理函数的值不是与1900的差值，但是在高版本的IE中和标准浏览器保持了一致，获取的值也是与1900的差值。比如：var year= new Date().getYear();

5.ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject

6.IE中不能操作tr的innerHtml

7.获得DOM节点的父节点、子节点的方式不同 其他浏览器：parentNode  parentNode.childNodes   IE：parentElement parentElement.children

8、常见CSS属性兼容
- inline-block: >=ie8
- min-width/min-height: >=ie7
- :before,:after: >=ie8
- div:hover: >=ie7
- inline-block: >=ie8
- background-size: >=ie9
- 圆角: >= ie9
- 阴影: >= ie9
- 动画/渐变: >= ie10
11、vue项目开发遇到的问题，如何解决？

　　（1）VUE对象属性改变视图未更新问题

　　　　https://blog.csdn.net/qq_41715870/article/details/81982675

　　　　https://blog.csdn.net/weixin_43056561/article/details/82626374

　　（2）路由变化页面数据不刷新问题

　　　　当使用路由参数时，例如从 /user/foo 导航到 user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

　　　　https://www.cnblogs.com/first-time/p/7067674.html

　　（3）vue-router beforeEach死循环

　　　　https://www.cnblogs.com/sinosaurus/p/9016163.html

　　　　https://blog.csdn.net/qq_38334525/article/details/80682351
router.beforeEach((to, from, next) => { 　　let url = 'http://10.2.149.109/permission/getPagePermission'; 　　let data={ 　　　　pagename:to.name, 　　} 　　axios.get(url,{params: data}).then((response)=>{ 　　　　if(!response.data.Status){ 　　　　　　return next({path:'/prompt'}) 　　　　} 　　　　return next() 　　}) }) next()直接跳转到to.path路径，没有再执行一遍beforeEach导航钩子，而 next({path:'/prompt'})路由跳转的时候还执行一遍beforeEach导航钩子，所以上面出现死循环；解决方案如下： router.beforeEach((to, from, next) => { 　　let url = 'http://10.2.149.106:9897/permission/getPagePermission'; 　　let data={ 　　　　pagename:to.name, 　　} 　　if(data.pagename=="prompt"){ 　　　　next(); //避免出现死循环　　}else{ 　　　　axios.get(url,{params: data}).then((response)=>{ 　　　　　　if(!response.data.Status){ 　　　　　　　　return next({path:'/prompt'}) 　　　　　　} 　　　　　　return next() 　　　　}) 　　} })
　　(4)vue模板Element UI中组件scoped属性问题，深度选择器/deep/

　　　　https://www.cnblogs.com/karthuslorin/p/9038854.html

　　　　https://blog.csdn.net/webjhh/article/details/84977864

　　(5)npm run dev的时候控制台报错Vue packages version mismatch

　　　　https://www.cnblogs.com/lvruifang/p/8610688.html　　　

　　　　可是检查package.json文件里vue和vue-template-compiler的版本确是一样的

　　　　解决方案：把package-lock.json和node_modules这两个文件彻底删除然后再重新npm install

　　(6)本地开发环境请求服务器接口跨域的问题

　　　　https://blog.csdn.net/sd19871122/article/details/80922726

　　　　vue-cli初始化的项目，在配置文件中提供了proxyTable来解决本地开发的跨域问题。config文件的index.js文件中，找到proxyTable选项，进行如下配置：　　
proxyTable: { // 用‘/api’开头，代理所有请求到目标服务器 '/api': { target: 'http://jsonplaceholder.typicode.com', // 接口域名 changeOrigin: true, // 是否启用跨域 pathRewrite: { // '^/api': '' } } }
12、vue项目用了什么组件？如何实现的？

13、对象的深拷贝

　　https://www.cnblogs.com/renbo/p/9563050.html
```
　　1、var copy = JSON.parse(JSON.stringify(person))
　　2、
```
function deepcopy(obj) { var result = Array.isArray(obj) ? [] : {} for (var key in obj) { if(obj.hasOwnProperty(key)) { if (typeof obj[key] == 'object') { result[key] = deepcopy(obj[key]) } else { result[key] = obj[key] } } } return result }
14、路由如何动态创建

　　https://blog.51cto.com/4837471/2176714

1.vue中路由是如何初始化，放入到vue实例中的？

　　路由初始化发生在vue实例化时

2.vue中提供了什么实现动态路由加载呢？

　　通过addRoutes进行动态路由注册

15、闭包的理解

　　http://www.cnblogs.com/xiaohuochai/p/5728577.html

　　闭包(closure)，是指函数变量可以保存在函数作用域内，因此看起来是函数将变量“包裹”了起来

16、angular中依赖注入的理解

17、oop的了解　

　　https://blog.csdn.net/q34323201/article/details/80198271

　　OOP(object oriented programming)，即面向对象编程，其中两个最重要的概念就是类和对象。
　　世间万物都具有自身的属性和方法，通过这些属性和方法可以区分出不同的物质。
　　属性和方法的集合就形成了类，类是面向对象编程的核心和基础，
　　通过类就将零散的用于实现某个功能的代码有效地管理起来了。
　　类只是具备了某些功能和属性的抽象模型，而实际应用中需要一个一个实体，也就是需要对类进行实例化，
　　类在实例化之后就是对象。
　　OOP具有三大特点：
　　1. 封装性：
　　也称为信息隐藏，就是将一个类的使用和实现分开，只保留部分接口和方法与外部联系，或者说只公开了一些供开发人员使用的方法。
　　于是开发人员只需要关注这个类如何使用，而不用去关心其具体的实现过程，这样就能实现MVC分工合作，也能有效避免程序间相互依赖，实现代码模块间松藕合。

　　2. 继承性：
　　就是子类自动继承其父级类中的属性和方法，并可以添加新的属性和方法或者对部分属性和方法进行重写。继承增加了代码的可重用性。

　　3. 多态性：
　　子类继承了来自父级类中的属性和方法，并对其中部分方法进行重写。
　　于是多个子类中虽然都具有同一个方法，但是这些子类实例化的对象调用这些相同的方法后却可以获得完全不同的结果，这种技术就是多态性。多态性增强了软件的灵活性。

18、面向对象编程和函数式编程区别　

是什么
在叙述区别和优劣之前，简单介绍一下两者。
函数式编程，顾名思义，这种编程是以函数思维做为核心，在这种思维的角度去思考问题。这种编程最重要的基础是λ演算，接受函数当作输入和输出。
面向对象编程，这种编程是把问题看作由对象的属性与对象所进行的行为组成。基于对象的概念，以类作为对象的模板，把类和继承作为构造机制，以对象为中心，来思考并解决问题。

优点
函数式编程：支持闭包和高阶函数，闭包是一种可以起函数的作用并可以如对象般操作的对象；而高阶函数是可以以另一个函数作为输入值来进行编程。支持惰性计算，这就可以在求值需要表达式的值得时候进行计算，而不是固定在变量时计算。还有就是可以用递归作为控制流程。函数式编程所编程出来的代码相对而言少很多，而且更加简洁明了。
面向对象编程：面向对象有三个主要特征，分别是封装性、继承性和多态性。类的说明展现了封装性，类作为对象的模板，含有私有数据和公有数据，封装性能使数据更加安全依赖的就是类的特性，使得用户只能看到对象的外在特性，不能看到对象的内在属性，用户只能访问公有数据不能直接访问到私有数据。类的派生功能展现了继承性，继承性是子类共享父类的机制，但是由于封装性，继承性也只限于公有数据的继承（还有保护数据的继承），子类在继承的同时还可以进行派生。而多态性是指对象根据接收的信息作出的行为的多态，不同对象接收同一信息会形成多种行为。

缺点
函数式编程：所有的数据都是不可以改变的，严重占据运行资源，导致运行速度也不够快。
面向对象编程：为了编写可以重用的代码导致许多无用代码的产生，并且许多人为了面向对象而面向对象导致代码给后期维护带来很多麻烦。

19、JavaScript实现功能的封装、继承、多态

　　https://www.cnblogs.com/peng14/archive/2012/09/05/2671900.html

20、JavaScript中渐进式框架的理解　

　　https://www.zhihu.com/question/51907207

　　Progressive（渐进式的）在多个技术领域里有不同的作用与解释，所以有理解成本也可以意料之中的。记得好多年前接触这个词，印象较深的是对类似 jpeg 图片在页面展示的一种处理方式。我们知道，图片的默认加载方式是从上到下，一小块一小块地加载，直到完全加载。而 Progressive 图片是先加载整张图片主体，从一开始模糊的视图加载到清晰。这背后是基于优先展示全局整体核心，而不是“管中窥豹”的优化理念。

　　 Vue 提到渐进式的框架理念，我的理解是先看到核心的部分（最小集），或者说是 Vue 这个名字的“初衷”： View，然后在此基础上进行开发者自身的 DIY 扩展，也就是按需采用。这个过程是随着开发者的需求逐步变化增长的，由简单到复杂的应用场景都可以涵盖到，正是其强大之处，其实与 React 的理念也是很像。

21、ESLint代码检查工具

　　https://www.imooc.com/article/32222

　　https://blog.csdn.net/qq_35192741/article/details/79471672

22、js实现a页面向b页面传参

　　https://www.jb51.net/article/85353.htm　

方法一：使用HTML5本地化存储(localStorage) 组件（本地最大能存储5M数据）localStorage是本地永久存储数据，是cookie的优化

方法二：使用cookie将数据存放在客户的浏览器（最大存储2M数据）

方法三：使用url传参（将要传递的数据保存为一个存储变量，然后传给url）方法如下;

a.html

var app = {};
app.list = '123'
app.test = '1';

window.location.href = "b.html?name="+app;

如何参数是对象的话要先转化字符JSON.stringify(app)，在b页面获取的话再转换化为对象

b.html

接收url传递过来的参数

function GetRequest() {
   var url = location.search; //获取url中"?"符后的字串
   var theRequest = new Object();
   if (url.indexOf("?") != -1) {
      var str = url.substr(1);
      strs = str.split("&");
      for(var i = 0; i < strs.length; i ++) {
         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
      }
   }
   return theRequest;
}
console.log(JSON.parse(GetRequest().name).list)

23、如何在页面上实现一个圆形的可点击区域

　　https://blog.csdn.net/lxcao/article/details/52809221

　　https://blog.csdn.net/yaodebian/article/details/84778425

24、原生JavaScript插件封装开发

　　https://www.jianshu.com/p/937c6003851a

　　https://blog.csdn.net/hj7jay/article/details/54310784

25、js定时器的执行顺序和机制

26、html页面渲染过程？重排和重绘？什么时候会发生

https://www.cnblogs.com/dojo-lzz/p/3983335.html

27、iframe优缺点

　　https://blog.csdn.net/katara1109/article/details/49073663

　　https://www.jianshu.com/p/8fbee843437c
iframe是一种框架，也是一种很常见的网页嵌入方式

iframe的优点：

1.iframe能够原封不动的把嵌入的网页展现出来。

2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

iframe的缺点：

1.会产生很多页面，不容易管理。

2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。

3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。

4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。

5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发

28、CommonJS中的require/exports和ES6中的import/export区别？

　　https://www.cnblogs.com/wancheng7/p/10169470.html

29、ES6解构变量

30、var为什么可以重复声明

　　https://blog.csdn.net/DurianPudding/article/details/87953939

31、web storage 和 cookie区别

　　https://www.cnblogs.com/pengc/p/8714475.html

　　https://blog.csdn.net/hdp134793/article/details/81519074

32、vue实现双向数据绑定的原理

　　https://www.cnblogs.com/canfoo/p/6891868.html

var Book = {} var name = '' Object.defineProperty(Book, 'name', { set: function(value) { name = value console.log('你设置了name的值为：' + value) }, get: function(){ return '《' + name + '》' } }) Book.name = 'vue权威指南'; console.log(Book.name);

　　
查看全文

相关阅读:
vue移动框架vonic
vue桌面端框架element
vuex最简单的入门文档
 Vuex最简单教程
 环境配置
 【转】MyEclipse8.5集成Tomcat7时的启动错误：Exception in thread “main” java.lang.NoClassDefFoundError org/apache/commons/logging/LogFactory
Java中获取完整的url
【转载】Android Studio 设置内存大小及原理
 Android上实现仿IOS弹性ScrollView
ServletContextListener 启动SPRING加载数据到缓存的应用

原文地址：https://www.cnblogs.com/zhaomeizi/p/10449416.html

前端面试集锦（3）

iframe是一种框架，也是一种很常见的网页嵌入方式

iframe的优点：

iframe的缺点：