- 有些状态不可能保存在客户端 。例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。
2.Array.prototype.slice.call(arr,2)方法的作用是:
利用Array原型上的slice方法,使用call函数的第一个参数,让这个方法中的this指向arr,并传递参数2,实际上等于arr.slice(2),即从下标为2开始截取到末尾
3.Flash与Ajax各自的优缺点?
Flash:适合处理多媒体、矢量图形、访问机器。但对css、处理文本不足,不容易被搜索。
Ajax:对css、文本支持很好,但对多媒体、矢量图形、访问机器不足。
4.有效的javascript变量定义规则
第一个字符必须是一个字母、下划线(_)或一个美元符号($);其他字符可以是字母、下划线、美元符号或数字。
5.XML与JSON的区别?
-
数据体积方面。JSON相对于XML来讲,数据的体积小,传递的速度更快些。
-
数据交互方面。JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互。
-
数据描述方面。JSON对数据的描述性比XML较差。
-
传输速度方面。JSON的速度要远远快于XML。
6.HTML与XML的区别?
(1)XML用来传输和存储数据,HTML用来显示数据;
(2)XML使用的标签不用预先定义
(3)XML标签必须成对出现
(4)XML对大小写敏感
(5)XML中空格不会被删减
(6)XML中所有特殊符号必须用编码表示
(7)XML中的图片必须有文字说明
7.渐进增强与优雅降级
渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进,达到更好的用户体验。
优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
8.Web Worker和Web Socket?
web socket:在一个单独的持久连接上提供全双工、双向的通信。使用自定义的协议(ws://、wss://),同源策略对web socket不适用。
web worker:运行在后台的JavaScript,不影响页面的性能。
创建worker:var worker = new Worker(url);
向worker发送数据:worker.postMessage(data);
接收worker返回的数据:worker.onmessage
终止一个worker的执行:worker.terminate()
9.web应用从服务器主动推送data到客户端的方式?
JavaScript数据推送:commet(基于http长连接的服务器推送技术)。
基于web socket的推送:SSE(server-send Event)
10.如何删除一个cookie?
1) 将cookie的失效时间设置为过去的时间(expires)
document.cookie = ‘user=’+ encodeURIComponent(‘name’) + ';
expires=’+ new Date(0);
2) 将系统时间设置为当前时间往前一点时间
var data = new Date();
date.setDate(date.getDate()-1)
11.Ajax请求的页面历史记录状态问题?
(1)通过location.hash记录状态,让浏览器记录Ajax请求时页面状态的变化。
(2)通过HTML5的history.pushstate,来实现浏览器地址栏的无刷新改变。
12.那些操作会造成内存泄漏
全局变量、闭包、DOM清空或删除时,事件未清除、子元素存在引用
13.什么是Cookie 隔离?(或者:请求资源的时候不要带cookie怎么做)
通过使用多个非主要域名来请求静态文件,如果静态文件都放在主域名下,那静态文件请求的时候带有的cookie的数据提交给server是非常浪费的,还不如隔离开。
因为cookie有域的限制,因此不能跨域提交请求,故使用非主要域名的时候,请求头中就不会带有cookie数据,这样可以降低请求头的大小,降低请求时间,从而达到降低整体请求延时的目的。同时这种方式不会将cookie传入server,也减少了server对cookie的处理分析环节,提高了server的http请求的解析速度。
14.响应事件
onclick鼠标点击某个对象;onfocus获取焦点;onblur失去焦点;onmousedown鼠标被按下
15.flash和js通过什么类如何交互?
Flash提供了ExternalInterface接口与JavaScript通信,ExternalInterface有两个方法,call和addCallback,call的作用是让Flash调用js里的方法,addCallback是用来注册flash函数让js调用。
**16.js拖拽功能的实现
17.异步加载js的方法
18.Ajax解决浏览器缓存问题
19.js的防抖
20.js节流
21.JS中的垃圾回收机制
22.eval是做什么的
23.如何理解前端模块化
24.说一下Commonjs、AMD和CMD
25.对象深度克隆的简单实现
26.实现一个once函数,传入函数参数只执行一次
27.将原生的ajax封装成promise
28.js监听对象属性的改变
29.如何实现一个私有变量,用getName方法可以访问,不能直接访问
30.setTimeout、setInterval和requestAnimationFrame之间的区别
31.实现一个两列等高布局,讲讲思路
32.自己实现一个bind函数
33.用setTimeout()方法来模拟setInterval()与setInterval()之间的什么区别?
34.js怎么控制一次加载一张图片,加载完后再加载下一张
35.如何实现sleep的效果(es5或者es6)
36.Function.proto(getPrototypeOf)是什么?
37.实现js中所有对象的深度克隆(包装对象,Date对象,正则对象)
38.简单实现Node的Events模块
39.箭头函数中this指向举例
40.js判断类型**
…
由于文章篇幅限制,不可能将所有面试题以文字形式展示出来,本篇为大家精选了一些面试题,有需要的程序猿(媛)可以点击下方传送门免费获取题目+解析哦
点击免费领取题目+解析PDF
Vue
1.nextTick
在下次dom更新循环结束之后执行延迟回调,可用于获取更新后的dom状态
新版本中默认是microtasks, v-on中会使用macrotasks
macrotasks任务的实现:
osetImmediate / MessageChannel / setTimeout
2.什么是vue生命周期
Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。
3.vue中 key 值的作用
使用key来给每个节点做一个唯一标识
key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,
否则vue只会替换其内部属性而不会触发过渡效果。
4.Vue 组件中 data 为什么必须是函数?
在 new Vue() 中,data 是可以作为一个对象进行操作的,然而在 component 中,data 只能以函数的形式存在,不能直接将对象赋值给它。
当data选项是一个函数的时候,每个实例可以维护一份被返回对象的独立的拷贝,这样各个实例中的data不会相互影响,是独立的。
5.说出至少 4 种 vue 当中的指令和它的用法
v-if(判断是否隐藏)
v-for(把数据遍历出来)
v-bind(绑定属性)
v-model(实现双向绑定)
6.vue中子组件调用父组件的方法
第一种方法是直接在子组件中通过this. p a r e n t . e v e n t 来 调 用 父 组 件 的 方 法 。 第 二 种 方 法 是 在 子 组 件 里 用 parent.event来调用父组件的方法。 第二种方法是在子组件里用 parent.event来调用父组件的方法。第二种方法是在子组件里用emit向父组件触发一个事件,父组件监听这个事件就行了。
第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法。
7.vue页面级组件之间传值
1.使用vue-router通过跳转链接带参数传参。
2.使用本地缓存localStorge。
3.使用vuex数据管理传值。
8.说说vue的动态组件。
多个组件通过同一个挂载点进行组件的切换,is的值是哪个组件的名称,那么页面就会显示哪个组件。
主要考查面试这 component的 is属性。
9.keep-alive内置组件的作用
可以让当前组件或者路由不经历创建和销毁,而是进行缓存,凡是被keep-alive组件包裹的组件,除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当中。
10.递归组件的用法
组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。
首先我们要知道,既然是递归组件,那么一定要有一个结束的条件,否则就会使用组件循环引用,最终出现“max stack size exceeded”的错误,也就是栈溢出。那么,我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时,组件将不会再进行渲染。
11.vue-router有哪几种路由守卫?
路由守卫为:
全局守卫:beforeEach
后置守卫:afterEach
全局解析守卫:beforeResolve
路由独享守卫:beforeEnter
12.$route和 $router的区别是什么?
$router为VueRouter的实例,是一个全局路由对象,包含了路由跳转的方法、钩子函数等。
$route 是路由信息对象||跳转的路由对象,每一个路由都会有一个route对象,是一个局部对象,包含path,params,hash,query,fullPath,matched,name等路由信息参数。
13.vuex的State特性是?
一、Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于与一般Vue对象里面的data
二、state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新
三、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
14.vuex的Getter特性是?
一、getters 可以对State进行计算操作,它就是Store的计算属性
二、 虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用
三、 如果一个状态只在一个组件内使用,是可以不用getters
**15.vuex的Mutation特性是?
16.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
17.什么是MVVM?
18.mvvm和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合?
19.vue的优点是什么?
20.组件之间的传值?
21.路由之间跳转
22.vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?
23.vue如何实现按需加载配合webpack设置
24.Vue中引入组件的步骤?
25.指令v-el的作用是什么?
26.在Vue中使用插件的步骤
27.vue生命周期的作用是什么
28.vue生命周期总共有几个阶段
29.第一次页面加载会触发哪几个钩子
30.DOM 渲染在 哪个周期中就已经完成
31.简单描述每个周期具体适合哪些场景
32.vue-loader是什么?使用它的用途有哪些?
33.scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?
34.为什么使用key?
35.为什么避免 v-if 和 v-for 用在一起
36.VNode是什么?虚拟 DOM是什么?
37.vue-loader是什么?使用它的用途有哪些?
38.请说出vue.cli项目中src目录每个文件夹和文件的用法?
39.vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?
40.聊聊你对Vue.js的template编译的理解?
41.vue 路由跳转的几种方式
42.vue-cli 创建自定义组件
43.<keep-alive</keep-alive的作用是什么?
44.vue如何实现按需加载配合webpack设置?
45.Vue实现数据双向绑定的原理Object.defineProperty()
46.Vue的路由实现:hash模式和history模式
47.Vue与Angular以及React的区别?
48.vue路由的钩子函数**
由于文章篇幅限制,不可能将所有面试题以文字形式展示出来,本篇为大家精选了一些面试题,有需要的程序猿(媛)可以点击下方传送门免费获取题目+解析哦
点击免费领取题目+解析PDF
服务端与网络
1.常见状态码
1xx: 接受,继续处理
200: 成功,并返回数据
201: 已创建
202: 已接受
203: 成为,但未授权
204: 成功,无内容
205: 成功,重置内容
206: 成功,部分内容
301: 永久移动,重定向
302: 临时移动,可使用原有URI
304: 资源未修改,可使用缓存
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
最后
javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
项目、讲解视频**
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
[外链图片转存中…(img-UeDnGBAA-1710583816413)]
最后
javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-2eshNthU-1710583816413)]
[外链图片转存中…(img-rptgCYLe-1710583816414)]