pakj面试准备

相关面经

1.问了webpack关于打包的问题，是拆分好还是一起好?

2.实现左右宽度固定，中间自适应的CSS方式有哪些，中间部分要在最顶层？

https://blog.csdn.net/weixin_38667820/article/details/87931975

3.vue的生命周期有哪些，分别对应的作用是什么？

4.对象继承的方式有哪些？

5.常见的性能优化方式？

提升页面性能优化的常见方式：

https://www.cnblogs.com/qianguyihao/p/8550195.html

1）资源压缩合并，减少http请求

2）非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别

3）利用浏览器缓存 --> 缓存的分类 --> 缓存的原理

4）使用CDN

5）DNS预解析

6.vue中子组件如何向父组件传值，最少说两种？

子组件通过this.$emit()的方式将值传递给父组件

子组件props接收父组件的值

https://blog.csdn.net/lander_xiong/article/details/79018737

7.HTML5的新特性有哪些？新特性api？

语义化更好的内容标签（header,nav,footer,aside,article,section）
画布(Canvas) API
音频、视频API(audio,video)
地理(Geolocation) API
拖拽释放(Drag and drop) API
本地离线存储。localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation

8.HTML5画布canvas的三个元素？

使用canvas元素创建一个画布区域，并获取该元素。
通过获取的canvas元素，取得该图形元素的上下文环境对象（context）。
根据取得的上下文环境对象，在页面中绘制图形或动画
canvas元素绘制图形的两种方式：填充（fill）与绘制边框（stroke），填充是指填满图形内部，绘制边框是绘制图形的边框。canvas元素结合使用这两种方式来绘制图形。

9.说说你对HTML5语义化的理解？

比如说<p>标签就是段落的意思，在HTML5中所有的标签都有它书面上的语义。而没有语义的标签在HTML中有，在HTML5中就没有了，比如<font>标签。

HTML5新增语义标签（header,nav,footer,aside,article,section）

HTML5代码中出现的标签都是让开发人员或浏览器一看就知道是干什么用的东西。

那么语义化以后对HTML文档有什么好处么？

1.可以提升可访问性与互操作性（兼容性会更好）；
2.改进搜索引擎的优化；
3.一般来说可以让HTML文件更小；
4.让代码更好唯护，与CSS3的关系更和谐。

因为现在一些SEO与浏览器或是屏幕阅读器（一个给残障人士用的文章阅读器）都在根据HTML5的新标准做一些新的功能，他们会跟具新的语义直接与自身的功能相对应。如果网页的开发者也是这么做的，那么你的网站的应用性会大大的增加。

10.cookies 和localStorage、sessionStorage的区别？

生命周期：

cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效

localStorage：除非被手动清除，否则将会永久保存。

sessionStorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。

存放数据大小：

cookie：4KB左右

localStorage和sessionStorage：可以保存5MB的信息。

http请求：

cookie：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题

localStorage和sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信

易用性：

cookie：需要程序员自己封装，源生的Cookie接口不友好

localStorage和sessionStorage：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

应用场景：

从安全性来说，因为每次http请求都会携带cookie信息，这样无形中浪费了带宽，所以cookie应该尽可能少的使用，另外cookie还需要指定作用域，不可以跨域调用，限制比较多。但是用来识别用户登录来说，cookie还是比storage更好用的。其他情况下，可以使用storage，就用storage。

storage在存储数据的大小上面秒杀了cookie，现在基本上很少使用cookie了。

localStorage和sessionStorage唯一的差别一个是永久保存在浏览器里面，一个是关闭网页就清除了信息。localStorage可以用来跨页面传递参数，sessionStorage用来保存一些临时的数据，防止用户刷新页面之后丢失了一些参数。

浏览器支持情况：

localStorage和sessionStorage是html5才应用的新特性，可能有些浏览器并不支持，这里要注意。

cookie的浏览器支持没有找到，可以通过下面这段代码来判断所使用的浏览器是否支持cookie：

if(navigator.cookieEnabled) {
  alert("你的浏览器支持cookie功能");//提示浏览器支持cookie  
} else {
  alert("你的浏览器不支持cookie");//提示浏览器不支持cookie   }复制代码

11.什么是cookies？

Cookie是HTTP协议的规范之一，它是服务器和客户端之间传输的小数据。

首先由服务器通过响应头把Cookie传输给客户端，客户端会将Cookie保存起来。
当客户端再次请求同一服务器时，客户端会在请求头中添加该服务器保存的Cookie，发送给服务器。
Cookie就是服务器保存在客户端的数据！
Cookie就是一个键值对！！！

Cookie规范

Cookie通过请求头和响应头在服务器与客户端之间传输；
Cookie大小限制在4KB之内；
一台服务器在一个客户端最多保存20个Cookie；
一个浏览器最多可以保存300个Cookie；

12.vue怎么实现双向绑定？实现原理是什么？

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的
因为vue是通过Object.defineProperty()来实现数据劫持的。

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

13.深拷贝浅拷贝

浅拷贝是指创建一个新对象，该对象拥有原始对象第一层属性的精确拷贝

浅拷贝的实现方法：

方法一：Object.assign();ES6中拷贝对象的方法，用于将一个或多个对象的内容合并到目标对象，

第一个参数是拷贝后的对象，剩下的参数是要拷贝的对象。

方法二：ES6中的...扩展运算符。

方法三：jquery的$.extend({},a,b)，用于将一个或多个对象的内容合并到目标对象。

深拷贝是对原始对象所有层级属性的递归精确拷贝。

深拷贝的实现方法：

方法一：JSON.parse(JSON.stringify(a))，先将对象序列化成为一个JSON字符串，将对象的内容转

换成字符串的形式，再用JSON.parse()反序列化将JSON字符串变成一个新的对象，这样原对象就与复制

后的新对象没了必然的关系。

缺点：拷贝的对象的值如果有函数，undefifined，则经过JSON.stringify()序列化后的JSON字符串中

的这个键值对会消失。

方法二：jquery的$.extend(true,{},a,b) ，用于将一个或多个对象的内容合并到目标对象。

true：是否深度拷贝,不加为false，浅拷贝，加了深拷贝

{}：将合并结果保存到新对象，这样原对象将不会发生改变

a：第一个合并的对象

b：第二个合并的对象

16.闭包

当函数可以记住并访问所在词法作用域时，就产生了闭包；即使函数是在词法作用域外执行，函数依然能对该作用域保持引用，而这个引用就叫闭包

17.vue在ie8、ie9中的空白显示问题

18.哪些情况下，vue改变了data，但是dom没有变化，怎么处理？

19.vue组件间怎么通信？

20.谈谈vuex，同步/异步分别怎么更改vuex中的state状态？

21.js有哪些基本类型？

22.谈谈js的原型和继承

23.对象的__proto__是什么，构造函数的__proto__是什么？

24.谈谈css的盒模型

25.不定宽高元素，水平垂直居中

26.flex，纵向排列，用那个属性？

27.this指向问题？

28.DOM事件的捕获、获取、冒泡过程，target和currenttarget分别指向谁？

29.画一个圆

30.点击圆内区域响应事件，点击元素其他区域做其他处理

31.两个浏览器tab页签A，B，如何实现A页签中拖动圆，B页签做相应变动

32.对于，固定宽高和不定宽高元素，说出你知道的所有能实现水平垂直居中的方案

33.浏览器请求url后，再次刷新页面，浏览器会怎么加载资源（缓存），跟哪个状态码跟缓存相关？

34.CSRF，XXS攻击的场景和防御措施

35.说下你知道的浏览器页面优化

36.页面渲染的过程

37.数组去重。

答双层循环，外层循环元素，内层循环时比较值如果有相同的值则跳过，不相同则push进数组 Array.prototype.distinct = function(){ var arr = this, result = [], i, j, len = arr.length; for(i = 0; i < len; i++){ for(j = i + 1; j < len; j++){ if(arr[i] === arr[j]){ j = ++i; } } result.push(arr[i]); } return result; } var arra = [1,2,3,4,4,1,1,2,1,1,1]; arra.distinct(); //返回[3,4,2,1]

38.javascript中的类型判断

https://zhuanlan.zhihu.com/p/38249035

39.学习经历
书，JS基础，说说自己目前学习的知识点

40.apply继承、ES6 extends继承和原型继承关系
41.计算机课程
发一个请求，客户端和服务端的过程tcp,rip过程，怎么封包，数据包的角度（从网络角度）怎么在服务器找到资源，怎么找到机器， uro

42.项目
前端优化（项目中的优化），简历补充，项目中遇到的问题怎么解决，添加节点的算法或优化，怎么添加一个DOM（性能最好的），添加多个怎么添加最好，为什么前后端分离

43.均分三列

https://blog.csdn.net/xiaobing_hope/article/details/51285695

浮动布局+百分比

行内元素（inline-block）+百分比

父元素 display:table + 子元素 display:table-cell

css3 父元素：display:flex+子元素 flex：1（flex布局）
44.动画
css3、打勾的过程，100*100的div，从有到无，JQ动画方法

https://blog.csdn.net/fjxcsdn/article/details/85226401

45.元素对象创建方式

一、document对象方法：createElement()：动态创建元素

元素对象方法appendChild()：将新元素追加到末尾

元素对象方法insertBefore(新元素对象，原节点)：将新节点插入到某节点前

元素对象属性firstChild：获取第一个元素

元素对象属性childNodes：获取所有子节点元素

元素对象方法removeChild(子元素对象)：删除元素

二、JQuery 对元素的操作
创建元素：$('标签字符串')

添加元素：

append()，appendTo()：追加子元素

prepend()，prependTo()：前加子元素

after()，insertAfter()：后加兄弟元素

before()，insertBefore()：前加兄弟元素

46.浏览器兼容事件
DOM事件，怎么添加事件，参数区别，阻止冒泡

https://www.jianshu.com/p/40f2918bf136

https://www.runoob.com/jsref/met-element-addeventlistener.html

47.事件委托

事件委托就是利用冒泡的原理，将事件加到父元素或祖先元素上，触发执行效果。

https://www.cnblogs.com/liugang-vip/p/5616484.html

https://www.jianshu.com/p/ff7ed15056e2
48.台阶问题
n级台阶，可以跳1阶，也可以跳2阶，求有多少种跳法

49.使用promise写一个原生ajax

https://www.jianshu.com/p/76b32c84216a

50.创建数组的方法

1) var a =new array（）

2) var a = [,,,]

面试题目

1.为什么选择用vue做页面展示

2.elementui有什么用

3.angular和vue有什么不同

4.小程序的开发，发送一个请求，怎么请求数据的

5.小程序中数据怎么同步渲染

6.html5语义化

7.行内元素和块级元素什么区别，然后怎么相互转换

8.三列布局怎么实现（平分呢）

9.清除浮动

10.css预处理工具

11.js继承，es6继承

12.ajax原理，为什么要ajax

13.同源策略，为什么需要

14.跨域怎么处理

15.git的使用方法，冲突解决，版本回退

16.打包，webpack和gulp的区别

17.浏览器缓存

18.冒泡和捕获区别

19.事件委托，怎么判断是不是目标元素

20.阻止冒泡

21.tcp三次握手，为什么需要三次

22.cookie和session

23.get和post区别

24.学习前端通过什么渠道

25.js中两个数组怎么取交集

26.怎么识别100枚硬币中的假币

另外阿里

说一下你了解CSS盒模型。
我就说了一下IE的怪异盒模型和标注浏览器的盒模型，然后可以通过box-sizing属性控制两种盒模型的变换。
说一下box-sizing的应用场景。
这个也不难，简单说了一两个应用场景，具体就不一一细说了。
说一下你了解的弹性FLEX布局.
这个我也比较了解，各种概念和属性能想到的说了一大堆，也扯到了Grid布局，基本这个也没啥问题。
说一下一个未知宽高元素怎么上下左右垂直居中。
说了一下flex弹性布局的实现，说了一下兼容性，扯到了postcss的一些东西，然后说了一下常规的兼容性比较好的实现。
说一下原型链，对象，构造函数之间的一些联系。
这个我之前写过相关的文章，自己也有比较深入的理解，所以这个也不在话下，噼里啪啦说了一大堆，也不知道面试官听得咋样。
DOM事件的绑定的几种方式
说了三种，然后说了一些冒泡，默认事件，以及DOM2，DOM3级的一些标准。
说一下你项目中用到的技术栈，以及觉得得意和出色的点，以及让你头疼的点，怎么解决的。
这个因人而异，开放性问题，主要考察平时项目的一些积累吧，这个我回答感觉也比较ok。
有没有了解http2.0,websocket,https，说一下你的理解以及你所了解的特性。
这个我看过一些文章，但是没有什么印象，扯了一些概念，但是回答的不是很深。
1. webpack的入口文件怎么配置，多个入口怎么分割啥的，我也没太听清楚。
  这个自己就说了一下自己的理解，以及自己用node写的多入口怎么配置，然后面试官说不是多入口配置，然后我又说了一下自己的理解，然后这题就过了。
2. 我看到你的项目用到了Babel的一个插件：transform-runtime以及stage-2，你说一下他们的作用。
  这个我也还算比较了解，就说了一下ES的一些API，比如generator啥的默认不转换，只转换语法，需要这个来转换，然后说profill啥的，扯了一下stage-1，stage-2，stage-3，这个问题回答还算清楚。
3. 我看到你的webpack配置用到webpack.optimize.UglifyJsPlugin这个插件，有没有觉得压缩速度很慢，有什么办法提升速度。
  这个我主要回答了一下，我之前也没怎么了解，一个想到是缓存原理，压缩只重新压缩改变的，还有就是减少冗余的代码，压缩只用于生产阶段，然后面试官问还有呢？我就说，还可以从硬件上提升，可以得到质的飞跃，比如换台I9处理器的电脑。。。。
4. 简历上看见你了解http协议。说一下200和304的理解和区别
  这个噼里啪啦说了一堆，协商缓存和强制缓存的区别，流程，还有一些细节，提到了expires,Cache-Control,If-none-match,Etag,last-Modified的匹配和特征，这一块之前有过比较详细的了解，所以还是应答如流。
5. DOM事件中target和currentTarget的区别
  这个没答上来。。。
6. 说一下你平时怎么解决跨域的。以及后续JSONP的原理和实现以及cors怎么设置。
  我就说了一下Jason和cors,然后问我JSONP的原理以及cors怎么设置，这一块自己也实践过，所以还是对答如流的。
7. 说一下深拷贝的实现原理。
  这个也还好，就是考虑的细节不是很周全，先是说了一种JSON.stringify和JSON.parse的实现，以及这种实现的缺点，主要就是非标准JSOn格式无法拷贝以及兼容性问题，然后问了我有么有用过IE8的一个什么JSON框架，我也不记得是什么了，因为我压根没听过，然后说了一下尾递归实现深拷贝的原理，还问了我typeof null是啥，这个当然是Object。。。
8. 说一下项目中觉得可以改进的地方以及做的很优秀的地方？
  这个也是因人而异，开放性问题，大致扯了一下自己的经历，也还OK。

posted @ 2020-06-16 09:39 cocozi 阅读(331) 评论(0) 编辑收藏举报

恋冬lll