
Web前端面试
文章平均质量分 76
xyphf_和派孔明
全栈工程师,熟悉原生JavaScript、TypeScript、ES6、Webpack、VUE全家桶、JAVA SSM框架、Spring boot 、Spring cloud、MySql、Oracle、Linux等,可独立构建多页面、单页面应用项目。
展开
-
事件队列事件循环(EventLoop) 宏任务 微任务详解 面试题
事件队列 事件循环 Event Loop 宏任务 微任务 vue nextTick原理 详解原创 2024-04-02 19:43:33 · 1977 阅读 · 2 评论 -
WebGL/threeJS面试题扫描与总结
WebGL/threeJS面试题扫描原创 2023-11-24 20:31:56 · 4802 阅读 · 1 评论 -
详解ES6模块化
第一步:初始化项目,使得能被npm管理npm init -y第二步:配置.babelrc{ "presets": ["es2015"], "plugins": []}原创 2021-03-27 16:35:41 · 204 阅读 · 0 评论 -
前端宏任务和微任务详解
宏任务(macro-task)定义消息队列中的任务称为宏任务。产生宿主环境提供的方法是宏任务,例如setTimeout, setInterval。这些都是浏览器或者Node环境实现的。执行不断从消息队列中取出并被事件循环执行。类型 浏览器 Node I/O 宏任务 宏任务 setTimeout 宏任务 宏任务 setInterval 宏任务 宏任务 requestAnimationFrame 宏任务 ...原创 2021-02-03 09:55:08 · 2778 阅读 · 1 评论 -
详解作用域和作用域链-xyphf
JS中有一个被称为作用域(Scope)的特性。对于许多新手来说,作用域的概念并不是很容易理解,我会尽量用最简单的方式来解释作用域和作用域链。JS的作用域1、什么是作用域作用域是在运行时代码中的某些特定部分中变量,函数和对象的可访问性。换句话说,作用域决定了代码区块中变量和其他资源的可见性。可能这两句话并不好理解,我们先来看个例子:function outFun2() { var inVariable = "内层变量2";}outFun2();//要先执行这个函数,否则根本不知道原创 2021-02-03 08:19:58 · 381 阅读 · 1 评论 -
强制使用https访问的方法-xyphf
Nginx服务器,在server { ... } 中插入rewrite ^(.*)$ https://$host$1 permanent;.htaccess文件,适用于Apache 配置文件的<Directory>标签内RewriteEngine onRewriteBase /yourfolderRewriteCond %{SERVER_PORT} !^443$RewriteRule ^.*$ https://%{SERVER_NAME}%{REQUEST_URI} [..原创 2021-01-27 19:38:45 · 1135 阅读 · 0 评论 -
前端面试基础
说一下盒模型?盒模型是css中重要的基础知识,也是必考的基础知识盒模型的组成,由里向外content,padding,border,margin.在IE盒子模型中,width表示content+padding+border这三个部分的宽度在标准的盒子模型中,width指content部分的宽度box-sizing的使用? box-sizing: content-box 是W3C盒子模型 box-sizing: border-box 是IE盒子模型box-sizing...原创 2021-01-19 09:13:53 · 214 阅读 · 0 评论 -
2020前端测试题
1、什么是原型继承?提供代码进行讲解关键是理解Javascript对象使用的两个阶段,以及.prototype和.__proto__在各个阶段的作用。对象的创建依赖.prototype:,对象一旦建立,它的.__proto__指针就指向这个原型。原型只是普通的对象而已,作为新对象的蓝本,并没有什么特别的;只是有时候从代码看不明显而已,因为这个过程很多时候发生在JS内部。原型只是普通的对象而已,作为新对象的蓝本,并没有什么特别的;只是有时候从代码看不明显而已,因为这个过程很多时候发生在JS内部。va原创 2020-09-01 23:28:40 · 827 阅读 · 0 评论 -
Object对象hasOwnProperty方法的作用,如何判断一个JSON对象中是否有某个键key
Object 对象自身用处不大,不过在了解其他类之前,还是应该了解它。因为 ECMAScript 中的 Object 对象与 Java 中的 java.lang.Object 相似,ECMAScript 中的所有对象都由这个对象继承而来,Object 对象中的所有属性和方法都会出现在其他对象中,所以理解了 Object 对象,就可以更好地理解其他对象。Object 对象具有下列属性:...转载 2019-05-05 16:53:58 · 7583 阅读 · 0 评论 -
VUE 移动端自适应布局终极解决方案
大佬们欲知详情看看这个https://github.com/imochen/hotcss引入px转rem插件https://www.npmjs.com/package/px2rem-loadernpm install px2rem-loader使用方法:1、建一个viewport.js放在js目录下,将下列代码复制到里面(function( window , docu...原创 2019-04-16 17:49:53 · 16884 阅读 · 0 评论 -
前端面向对象相关问题
类的声明方式/** * 类的声明 */function Animal () { this.name = 'name';}/** * ES6中的class的声明 */class Animal2 { constructor () { this.name = name; }} /** * 实例化 */console.log(ne...原创 2019-04-09 08:15:22 · 452 阅读 · 0 评论 -
原型链类问题
创建对象有几种方法// 第一种方式:字面量var o1 = {name:'o1'};var o2 = new Object({name:'o2'});// 第二种方式:通过构造函数var M = function(name){this.name = name;}var o3 = new M('o3');// 第三种方式:Object.createvar p = {name:...原创 2019-04-09 07:27:32 · 417 阅读 · 0 评论 -
Web前端面试对new运算符的理解
大家都常用new运算符,但是new运算符背后的原理是什么?答:首先new运算符后面跟的是一个构造函数,new运算符的第一个步骤就是新的对象被创建,可以理解为一个字面量对象,就是一个空对象被创建了。它是怎么被关联到实例对象上面呢?然后这个新的对象是继承这个构造函数的原型对象的 foo.prototype的,这一点非常重要。这时候原型链已经被关联一部分了,就是关于原型对象已经...原创 2019-04-08 20:15:18 · 740 阅读 · 0 评论 -
如何判断一个对象是不是数组?--xyp_hf
方案一:constructor用法:判断一个对象是不是数组 <script> var arr = []; alert( arr.constructor == Array ); // true </script>方案二:用instanceof判断是不是数组<script> var arr = []; alert( arr instanc原创 2017-08-19 18:40:49 · 395 阅读 · 0 评论 -
Web前端面试必会内容
$HTML, HTTP,web综合问题常见排序算法的时间复杂度,空间复杂度前端需要注意哪些SEO1、合理的title、description、keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有所不同;description把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面description有所不同;key转载 2017-08-04 11:10:46 · 3597 阅读 · 0 评论 -
Web前端面试题 CSS部分问题与解答
1. Q: CSS 属性是否区分大小写?ul { MaRGin: 10px;}A: 不区分。 HTML,CSS都对大小写不敏感,但为了更好的可读性和团队协作一般都小写,而在XHTML 中元素名称和属性是必须小写的。2. Q: 行内(inline)元素 设置margin-top和margin-bottom 是否起作用? A: 不起作用。(答案是起作用,个人觉得不对。) html 里的元转载 2017-08-07 12:00:35 · 1021 阅读 · 0 评论 -
Web前端面试题 HTML 部分问题与解答
1. Q: < keygen > 是正确的HTML5标签吗? A: 是。 < keygen > 标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。是HTML5 标签。2. Q: < bdo > 标签是否可以改变文本方向? A: 可以。 < bdo >标签覆盖默认的文本方向。<bdo dir="rtl">Here is some text</bdo>3.转载 2017-08-07 14:38:45 · 876 阅读 · 0 评论 -
Web前端面试 面试官常问问题
面试官喜欢问的问题以下会列出一些我们面试官的问题,请提前做好准备。 需要注意的是,校招和社招的是不一样的,校招会更加关注基础知识,而社招会更加关注之前做过的项目情况。项目相关面试其实说白了就是根据一个人之前的经历,来判断出后续这人会做得怎样,如果你之前从没做成过一件事情,凭什么让别人相信你之后能做成呢?因此无论哪里的面试都会问你之前做过的项目项目可以是多人协助开发一个产品,也可以是自己个人做过的业转载 2017-08-07 15:07:03 · 17271 阅读 · 0 评论 -
Web前端面试常见问题
备注: Rebecca Murphey 的 Baseline For Front-End Developers 是你在准备面试前应该阅读的绝佳资源。记住: 很多问题都是开放的,可以引发有趣的讨论。这比直接的答案更能体现此人的能力。常见问题: ● Q: 你在昨天/本周学到了什么?● Q: 编写代码的哪些方面能够使你兴奋或感兴趣?● Q: 在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI转载 2017-08-07 15:32:17 · 6027 阅读 · 5 评论 -
深入浅出 妙用Javascript中apply、call、bind
apply、call在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。 JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。 先来一个栗子:function fruits() {} fruits.proto...转载 2018-03-19 21:41:34 · 209 阅读 · 0 评论 -
Promise面试题之Promise.all和Promise.race的区别
转载自:https://blog.youkuaiyun.com/xyphf/article/details/77925571一、Promise.all的使用Promise.all可以将多个Promise实例包装成一个新的Promise实例。同事,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候返回最先被reject失败状态的值。具体代码如下:let p1 = new ...转载 2019-03-28 09:57:47 · 1915 阅读 · 0 评论 -
为什么vue中data必须是一个函数
本文从JavaScript原型链角度来解释为什么vue中的data必须是一个函数VUE组件中的data必须是函数类别引用数据类型Object是引用数据类型,如果不用function返回,每个组件的data都是内存的同一个地址,一个数据改变了其他也改变了;JavaScript只有函数构成作用域(注意理解作用域,只有函数{}构成作用域,对象的{}以及if(){}都不构成作用域),dat...转载 2019-03-28 10:25:54 · 36901 阅读 · 9 评论 -
vue面试题vue中的data为什么用return返回
为什么vue中data需要使用return返回数据呢?答:因为不使用包裹的数据会在项目的全局可见,造成变量污染;使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件。1、在简单的vue实例中看到的Vue实例中data属性,如下所示:let app= newVue({ el:"#app", data:{ msg:'' }, ...转载 2019-03-28 10:33:37 · 2825 阅读 · 0 评论 -
JavaScript 什么是原型链?
原型链 : 实例对象与原型之间的链接,叫做原型链下面我们演示个小例子来说明原型链 function Aaa() { } Aaa.prototype.num = 10; var a1 = new Aaa(); alert(a1.num); // 10大家可能会想,为什么这个对象a1可以找到num 1、首先大家发现这个num并原创 2017-08-18 16:57:10 · 3265 阅读 · 1 评论