前端面试-javascript篇 前端面试-javascript篇VueVue的响应式原理中的Object.defineProperty有什么缺陷?为什么Vue3推出了Proxy?Vue为什么要在列表中写key,其作用是什么?React待续VueVue的响应式原理中的Object.defineProperty有什么缺陷?为什么Vue3推出了Proxy?Object.defineProperty无法监听到数组下标的变化,导致通过数据下标添加元素,不能实时响应;Object.defineProperty只能劫持对象的属性,从而需要对每
前端面试--CSS篇 前端面试--CSS篇介绍下BFC及其应用怎样让一个div水平垂直居中?介绍下重流和重绘,以及如何进行优化?分别比较opacity:0,visibility:hidden,display:none的优劣和适用场景?简述CSS盒模型简述rem及其转换原理简述伪类和伪元素行内元素的margin和paddingCSS中那些属性可以继承?CSS3新增伪类有哪些?用CSS创建一个三角形min-width/max-width和min-height/max-height属性间的覆盖规则?介绍下BFC及其应用BFC块级格
前端面试--HTML篇 HTML页面倒入样式时,使用link和@import有什么区别?简述浏览器的渲染原理HTML5的form的自动完成功能是什么呢?如何实现浏览器内多个标签页之间的通信?简述前端性能优化页面倒入样式时,使用link和@import有什么区别?从属关系区别。@import只能导入样式表,link还可以定义RSS、rel连接属性、引入网站图标等;加载顺序区别。加载页面时,link标签引入的CSS被同时加载;@import引入的CSS将在页面加载完毕后被加载。简述浏览器的渲染原理首先解析收到的文档,根
如何实现自适应布局 如何创建自适应布局百分比布局使用媒体查询(CSS3@media查询)rem响应式布局vw响应式布局flex弹性布局响应式网页设计是一种新的网站设计模式,从此构建的网站可自动适应不同的的访问设备,方便用户阅读和导航浏览,减少用户的放大/缩放/滑动的操作,提升良好的用户体验。百分比布局可以通过对属性的设置百分比来适配不同的屏幕,但是需要注意的是百分比是相对于父元素的。使用媒体查询(CSS3@media查询)利用媒体查询设置不同分辨率下的CSS样式,来适配不同的屏幕。body { backgro
前端性能优化----如何减短首屏加载时间? 为什么首屏加载会出现短暂几秒白屏呢?随着Vue、React等框架的出现,SPA单页面应用越来越广泛被开发者应用。但是呢,SPA应用页面打包之后的js文件是非常大的。要等这个js文件加载完成之后才能进行首屏渲染,这样就导致了白屏的问题。
函数绑定与函数柯里化 函数绑定与函数柯里化一、函数绑定(bind)什么是函数绑定?bind()二、函数柯里化利用柯里化实现复杂的bind()柯里化实现add(1)(2,3)(5)一、函数绑定(bind)什么是函数绑定?函数绑定需要创建一个函数,可以在特定的this环境中以指定参数调用另一个函数。常与回调函数及事件处理程序一起使用,以便在将函数作为变量传递的同时保留代码执行环境。var handler = { message: 'Event handled', handleClick: functio
Vue-router中的hash模式和history模式的区别 vue-router中的hash模式和history模式的区别拓展:history模式需要后台配置支持。比如:当我们进行项目的主页的时候,一切正常,可以访问。但是如果我们刷新页面或者直接访问路径的时候就会返回404,这是因为history模式下,只是动态的通过js操作window.history来改变浏览器地址栏的路径,并没有发起http请求。但是当我们直接在浏览器里输入这个地址的时候,就一定要对服务器发起http请求,但是这个目标在服务器并不存在,因此会返回404。这个时候我们需要把所有的请求都转发
小程序的生命周期 小程序的生命周期小程序实例(应用)的生命周期什么是前台后台?页面的生命周期应用和页面的生命周期触发顺序几个常见情况?小程序实例(应用)的生命周期小程序实例的生命周期必须在app.js中调用,在app.js中定义了一些实例的生命周期函数。onLauch:初始化小程序的时候触发,全局只能触发一次,可以在这个生命周期函数中进行小程序的版本检测。onShow:小程序初始化完成或用户从后台切换到前台显示时触发。onHide:用户从前台切换到后台隐藏时触发。onError:小程序发生脚本错误,或api调用
CSS常见面试题 常见面试题CSS实现宽度100%,高度为宽度一半的的盒子CSS实现宽度100%,高度为宽度一半的的盒子通过vw视口单位实现所谓视口单位是相对于视口(viewport)的尺寸而言,100vw等于视口宽度的100%,即1vw等于视口宽度的1%。这个方法有个优点就是,无论图片是否加载成功,容器高度始终是计算完成的,不会造成页面的抖动,也不会造成页面重绘,从而提升性能。 .box { width: 100%; height: 50vw; } .box img { wid
JS之手写XX JS之手写XX手动实现bind、apply及bind手动实现new手动实现浅拷贝、深拷贝手动实现节流、防抖手动实现instanceof原理手动实现Object.create原理手动实现数据双向绑定手动实现ajax手动实现bind、apply及bind实现call()// 实现call方法Function.prototype.myCall = function(obj) { const args = [...arguments].splice(1); //拿到除了第一个参数外的所有参数
实现Es5继承及Es6继承 // 继承function Person(name) { // 给构造函数添加了参数 this.name = name; this.sum = function() { alert(this.name); }}// 给构造函数添加了原型属性Person.prototype.age = 10;// 原型继承function Per() { this.name = 'ker';}Per.prototype = new Person
webpack基础入门 webpack基础一、核心概念详解Webpack核心概念(一)、Entry(二)、Output(三)、Module(四)、Resolve(五)、Plugin一、核心概念Entry:入口,Webpack执行构建的第一步是从Entry开始,可抽象为输入;Module:模块,在Webpack里一切皆模块,一个模块对应一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块;Chunk:代码块,一个Chunk由多个模块组合而成,用于代码合并与分割;Loader:模块转换器,用于将模块的原内
vue-cli+webpack搭建一个多页面应用 vue-cli+webpack搭建一个多页面应用什么是单页面应用和多页面应用?单页面和多页面的区别如何使用vue-cli+webpack初始化一个项目?vue-cli+webpack搭建多页面应用项目结构调整webpack配置更改什么是单页面应用和多页面应用?SPA单页面应用:指的是只有一个主页面的应用(只有一个html页面),项目启动时加载主页面时会一次性加载所有的js、css等相关资源(需要进行首屏优化)。所有内容都包含在主页面中,对每一个功能模块组件化。单页面的跳转实质上就是切换相关组件,仅仅刷新
原生js实现对某一个结点的拖拽 // HTMLElement.offsetLeft 是一个只读属性,返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。// HTMLElement.offsetParent 是一个只读属性,返回一个指向最近的(指包含层级上的最近)包含该元素的定位元素或者最近的 table,td,th,body元素。// MouseEvent.clientX 是只读属性, 它提供事件发生时的应用客户端区域的水平坐标 (与页面坐标不同)。window.onload =
原生js对DOM操作 原生js对DOM操作常见的添加、移除、复制、创建和查找节点。// 创建document.createElement('标签名');// 获取var div = document.querySelector('div');// 删除document.body.removeChild('标签名');// 移动document.body.replaceChild('标签名');// 复制document.body.cloneNode(true/false);// 查找document.g
javascript时间戳和日期字符相互转换 javascript时间戳和日期字符相互转换一、日期字符转换为时间戳// 日期字符转换为时间戳(以s为单位)二、时间戳转换为字符串一、日期字符转换为时间戳// 日期字符转换为时间戳(以s为单位)// 方法1 使用+new Date()// +new Date()相当于调用 Date.prototype.valueOf()方法;可返回日期的毫秒数;和Date.prototype.getTime()方法一样;var timestamps = new Date();var myDate = timest
JS的三大组成部分 JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。JavaScript的三大组成部分是:1、ECMAScript:JavaScript的核心,描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义),ECMAScript是一套标准,定义了一种语言(比如JS)
实现一个Event类 实现一个Event类使用ES6实现一个事件类Event,包含了下面功能:绑定事件、解绑事件和派发事件。on(eventName,func()):监听eventName事件,事件触发的时候调用func函数;emit(eventName, arg1,arg2,arg3....):触发eventName事件,并且把参数arg1、arg2、arg3...传给事件处理函数;off(eventName, func): 停止监听某个事件。实现Event类的核心其实就是发布订阅模式,即组件间通信使用事件监听和