- 博客(37)
- 收藏
- 关注
RSS订阅原创 http的通用头部有哪些？
1. Request Headers请求头Accept：客户端可以接受的媒体资源类型，如text/html, application/xhtml+xml, application/xml;Accept-encoding：客户端可以接受的编码方法，即压缩方法，如gzip、deflateAccept-Language：客户端可以接受的语言，如en-US、zh-ChCookie：告诉服务器关于 Session 的信息，存储让服务器辨识用户身份的信息。User-agent：向服务器发送关于浏览器版本的一些
2020-11-07 09:54:38
885
原创 JS：关于闭包
闭包（Closure）：指有权访问另一个函数作用域中变量的函数。（这个变量所在的函数即为闭包函数）。闭包的主要作用：延伸了变量的作用范围。
2020-11-07 01:35:23
156
原创 CSS：关于px、em、rem、vw和vh的理解
px：像素，绝对单位；em：相对单位，以父元素字体大小font-size为基准计算的，因此整个页面内1em并不是一个固定的值。浏览器默认的font-size是16px；rem：相对单位，以根节点html的大小为基准计算的，CSS3新属性，可以实现只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合，避免了em单位所带来的弊端。vw / vh：相对于视口的宽度viewpoint width和高度viewpoint height；1vw等于视窗宽度的1%；1vh等于视窗高度的1%。vmi.
2020-10-24 11:27:37
368
原创 CSS：实现多行文本垂直居中的四种方法
对于单行文本，可以使用行高等于高度来设置垂直居中，但多行文本不适用。实现多行文本垂直居中的四种方法1. 利用表格元素table+vertical-align实现将父元素设置为块级表格来显示，再将子元素设置为一个表格单元格显示后，设置vertical-align: middle;即实现效果。<body> <div class="text"> <span>扩展： Vue.js 是一套构建用户界面的渐进式框架。 它与其他重量级框架不同的是，Vue
2020-10-15 19:07:35
11121
原创 CSS：对盒模型的理解，以及CSS中如何设置盒模型来使浏览器辨别盒模型
1. 对盒模型的理解盒模型有两种，分别是W3C定义的盒模型和IE定义的盒模型。W3C定义的盒模型包括margin、padding、border、content，其中width = contentIE定义的盒模型与W3C盒模型的区别：width = content + padding + border相比之下，IE盒模型较为合理。2. CSS中如何设置这两种模型？默认情况下，为W3C盒模型，可以通过CSS3的新属性box-sizing来设置。W3C盒模型：box-sizing: content-
2020-10-15 15:56:07
440
原创 JS：关于事件轮询（event loop）机制
因为js是单线程语言，所以只有一个主线程来执行代码。那么遇到异步任务的时候，js是如何实现非阻塞，或事件循环的（event loop）？浏览器环境下js引擎的事件循环机制js顺序执行代码，遇到同步代码，将代码推入执行栈（call stack）；执行完成后清空调用栈，再执行下一行代码；遇到异步任务，将异步任务放到Web API里面；然后继续执行接下来的同步代码，直到同步代码执行完毕。期间若异步事件返回结果（如定时器时间已到的情况），将异步任务推入回调队列（callback queue）中。当执
2020-10-12 12:01:22
504
原创 JS：js如何实现继承？
实现继承的方式使用ES6 的class关键字，使用class / extends / super 关键字，基类的构造函数必须调用super()，才能获取父类中的所有方法和属性。使用原型继承，改变基类的原型，指向超类的实例，进而实现继承。即将基类的prototype属性设置为父类的实例，就可以获得父类构造函数的所有方法和属性。...
2020-10-12 11:16:16
117
原创 JS算法：关于冒泡排序和快排
冒泡排序比较所有相邻元素，如果第一个比第二个大，则交换它们。执行n-1轮，则完成排序。Array.prototype.bubbleSort = function() { for(let i = 0; i < this.length - 1; i++){ for(let j = 0; j < this.length - 1 - i; j++){ if(this[j] > this[j+1]){ const t
2020-10-12 10:26:56
162
1
原创 跨域的几种解决方案
一、跨域问题背景浏览器的同源政策：A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。同源是指：协议相同、域名相同、端口相同。但凡有一个不同，则不同源。同源政策的目的：是为了保证用户信息的安全，防止恶意的网站窃取数据。其中，同源政策规定，AJAX请求只能发给同源的网址，否则就报错。那么前后端分离如何实现跨域请求？二、实现跨域的解决方案1. JSONP网页通过添加一个<script>元素，由它向跨源网址发出请求，即向服务器请求JSON数据，这种做法不受同源政策限制；服
2020-10-11 22:33:30
255
原创 JS：关于事件触发机制
事件触发经历三个阶段：捕获阶段->目标阶段->冒泡阶段事件捕获：从外层一层一层往内部直至传递到目标元素；事件冒泡：从目标元素开始一层层向外传递至根节点；DOM事件流，是先调用捕获阶段的处理函数，其次调用目标阶段的处理函数，最后调用冒泡阶段的处理函数；若使用 addEventListener 监听事件，默认是监听冒泡阶段的事件，但可以通过 useCapture 参数，来指定在什么阶段触发事件。设置useCapture为true则在捕获阶段触发，为false则在冒泡阶段触发。而默认情况
2020-10-11 21:04:08
880
1
原创 微信小程序：小程序组件间的通讯与vue组件通讯的区别
VUE组件通讯父向子传值：父组件通过属性传值给子组件（可动态绑定属性），子组件通过内部的props接收父组件传递过来的值，可以在模板中使用；子向父传值：子组件通过自定义事件$emit ( ‘自定义事件名’，‘附加参数’ ) 向父组件传值，父组件通过监听子组件的事件，及 $event 接收信息;微信小程序组件通讯先将子组件在父组件中注册，到父组件中的.json文件中，在"usingComponents"中进行注册；{ "usingComponents": { "my-musicl
2020-10-11 20:17:37
375
原创 面试题总结：说一下对回流和重绘的理解
关于回流和重绘，需要先了解浏览器渲染页面的过程。解析HTML，生成DOM树，解析CSS，生成CSSOM样式结构体将DOM树和CSSOM结合，生成渲染树(Render Tree)Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素Display:将像素发送给GPU，展示在页面上。1. 什么是回流？当渲染树中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重
2020-09-30 15:48:40
1471
2
原创 VUE：如何实现组件异步加载？
1. 什么是异步组件？即只在组件需要渲染的时候进行加载渲染并缓存。2. 为什么需要异步加载组件？当项目功能越来越多，所包含的子组件也越来越多，导致页面加载，访问速度过慢，所以需要优化页面加载的性能。3. 异步加载组件方法可以使用懒加载，即 () => import ( 地址)关于路由懒加载：VUE：实现路由懒加载使用require// 全局组件注册Vue.component('Home, function (resolve) { // 这个特殊的 `require`
2020-09-28 12:03:10
1361
原创 VUE：实现路由懒加载
安装插件：npm i @babel/plugin-syntax-dynamic-import在babel.config.js文件中配置：plugins: [ [ 'component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' } ], .
2020-09-28 11:51:46
357
原创 CSS：实现自适应三栏布局的方法及双飞翼和圣杯布局的区别
两边固定，中间自适应三栏布局的实现方法1. 利用flex弹性盒子模型将父元素设置为弹性布局，则其子元素全自动成为容器成员，将中间部分子元素设置flex占比为1，则可填满剩余空间，两边设置固定宽度，即实现两边固定中间自适应。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device
2020-09-26 13:12:43
176
原创 CSS：BFC是什么以及BFC的相关应用
1. 什么是BFCBFC：是一个独立的布局环境，其中的元素布局是不受外界的影响。如果一个元素符合了成为BFC的条件，那么该元素就成为了一个隔离的独立容器，BFC的区域不会与外部浮动元素重叠，且在同一个BFC内的两个相邻块级元素的外边距会重叠，但不同 BFC外边距不会重叠；在计算BFC高度时，将它内部的浮动元素也包含在内。2. 触发BFC的方法(常用overflow:hidden;)float属性不为noneposition为absolute或fixedoverflow的值不为visible
2020-09-26 08:54:50
193
原创 CSS：清除浮动的方法
为什么需要清除浮动？因为一旦父元素没有设置高度，而子元素设置了浮动，那么浮动元素会脱离文档流，包含它的父元素并不会因为这个浮动元素的存在而自动撑高，造成高度塌陷。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2020-09-25 12:59:04
139
原创 CSS：实现自适应两栏布局的四种方法
实现两栏布局的方法1. 什么是BFCBFC：是一个独立的布局环境，其中的元素布局是不受外界的影响。如果一个元素符合了成为BFC的条件，那么该元素就成为了一个隔离的独立容器，BFC的区域不会与外部浮动元素重叠，且在同一个BFC内的两个相邻块级元素的外边距会重叠，但不同 BFC外边距不会重叠；在计算BFC高度时，将它内部的浮动元素也包含在内。2. 触发BFC的方法(常用overflow:hidden;)float属性不为noneposition为absolute或fixedoverflow的值
2020-09-25 10:56:05
2634
原创 CSS：margin纵向重叠和负值问题
margin纵向重叠问题相邻元素的margin-top和margin-bottom会发生重叠 ；空白内容的<p></p>也会重叠margin负值问题margin-top和margin-left设置负值的话，元素会分别向上或向左移动；margin-right设置负值，右侧元素左移，自身不受影响；margin-bottom设置负值，下方元素上移，自身不受影响；...
2020-09-24 21:18:18
442
原创 Vue：如何理解MVVM？
MVVMMVVM：即Model-View-ViewModel的缩写。背景：传统组件，只是静态渲染，通过拼接数据进行渲染，更新需要依赖于DOM操作。而Vue—MVVM：数据驱动视图。只需要更改数据，不需要自己操作DOM，Vue框架本身会根据数据重新渲染视图。Model：数据模型，进行数据的业务逻辑处理；VIew：视图，将数据模型转化为视图；ViewModel：监听数据模型的改变和控制视图行为、处理用户交互，连接Model和View。总结：在MVVM架构下，View 和 Model 之间并没有直
2020-09-22 00:01:07
207
原创 Vue：描述Vue的生命周期以及相关面试题
Vue的生命周期Vue实例从创建到销毁的过程，即开始创建，初始化数据，编译模板，挂载DOM，渲染，更新，渲染，卸载等一系列过程。Vue生命周期图示（转载）Vue生命周期钩子即指生命周期函数（事件）Vue生命周期有四个阶段，八个过程create(初始化)，mount（挂载），update（更新），destroy（销毁）Vue生命周期往细地说，有八个过程（8个钩子函数）：生命周期钩子详细发生beforeCreate在实例初始化之后，数据观测(data observer) 和
2020-09-21 21:03:30
826
原创 Vue：兄弟组件间如何通信？
兄弟组件间如何通信？非父子组件间无法直接通信，通过单独的事件中心管理组件间的通信。事件中心：可以单独创建一个Vue的实例对象，来进行事件的监听，触发和销毁。监听Hub.$on('事件名', fn)触发Hub.$emit('事件名', args)销毁Hub.$off('事件名')一、创建事件中心在外部创建一个js文件Hub.jsimport Vue from 'vue'var Hub = new Vue()export default Hub二、借助父组件来引用两个兄弟
2020-09-21 01:24:01
3172
原创 Vue：父子组件如何利用props和$emit通信
父组件向子组件传值——利用props子组件怎么接收？通过子组件内部的props接收父组件传递过来的值，可以在模板中使用注意：如果props使用驼峰式命名，则父组件传值的属性需使用短横线。因为HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。<template> <div>{{msg}}:{{title}}</div> </template><script>export defa
2020-09-20 22:18:18
251
1
原创 CSS：关于 link 和 @import 的区别
语法link：<link href="CSS路径" rel="stylesheet" type="text/css" />@import：在HTML中，<style type="text/css"> @import url(CSS文件路径);</style>在CSS中@import url(CSS文件路径);link 和 @import 的共同点都是用于外部引入CSS的方式link 和 @import 的区别link是在页面载入时同时加载
2020-09-18 12:01:35
124
原创 HTML面试题：对HTML语义化的理解
对HTML语义化的理解有利于SEO：和搜索引擎简历良好沟通，有助于爬虫抓取更多有效信息，确定上下文以及关键字；更具可读性，便于开发和维护。
2020-09-18 11:06:08
193
原创 对HTML5的了解以及其新特性
HTML5的了解HTML5是html的新版本，减少了web应用对插件的依赖，让用户体验更好。HTML5的新特性新增了更具语义化的标签，如header、footer、nav、aside、section等新增了更多input类型和属性，如email、search、tel、time、week、color等新增了多媒体标签音频audio，视频video新增了拖拽属性draggable，为true则可以拖拽，为false则不可拖拽新增了图形标签canvas、svgcanvas通过脚本动态绘制图形，s
2020-09-18 10:41:38
215
原创 Vue：v-if 和 v-show 的区别和使用场景
v-if 和 v-show 的区别和使用场景Vue文档中对 v-if 和 v-show 的解释：实例：<template> <div id="app"> <div> <p v-if="msg === 'a'">v-if: a</p> <p v-else-if="msg === 'b'">v-if: b</p> <p v-else>other</p>
2020-09-15 23:34:10
163
原创 性能优化：手写防抖和节流以及二者的区别
防抖（debounce）防抖（debounce）：限制事件被频繁触发。（涉及定时器和闭包）触发事件时，在一定时间内，若没有再次触发事件，则事件处理函数在时间到达时执行一次；若在一定时间内，又触发事件，则清除上一次的计时，重新开始计时，直到时间到了再执行函数。应用：输入框校验，百度搜索出现提示文字功能等场景：监听输入框，一旦文字变化，即触发keyup事件，则触发change事件，打印出输入框的内容。防抖效果：用户输入结束或暂停时，才触发change事件。<input type="text"
2020-09-13 18:14:31
944
1
原创 运行环境：关于前端性能优化的原则及方法
性能优化目的让网页加载更快，渲染更快，运行更流畅性能优化原则多使用内存、缓存或其他方法；减少CPU计算量，减少网络加载耗时性能优化方法1. 让加载更快减少资源体积：压缩代码（利用 webpack ）减少访问次数：合并代码（利用 webpack ），SSR服务器端渲染，缓存使用更快的网络：CDN2. 让渲染更快CSS 放在 head 中，JS 放在 body 最下面尽早开始执行JS，即用 DOMContentLoaded 触发事件懒加载（图片懒加载、上滑加载等）
2020-09-13 11:59:24
224
原创 JS：window.onload 和 DOMContentLoaded 的区别
window.onload事件当页面的资源（包括图片、视频等）全部加载完才会执行DOMContentLoaded事件只要DOM渲染完即可执行，此时图片、视频等可能还没有加载完因此两者主要是触发时机不同，会先触发DOMContentLoaded，再触发window.onload事件。...
2020-09-13 10:53:37
658
原创 运行环境：从输入url到渲染整个页面的过程
加载资源的形式html、css、js、媒体文件如图片、视频等加载资源的过程输入url之后，进行：DNS解析：根据域名查询IP地址浏览器根据IP地址向服务器发送HTTP请求（利用TCP协议通过三次握手与服务器建立连接）服务器处理HTTP请求，并返回响应数据包给浏览器浏览器渲染页面过程根据HTML代码生成DOM Tree根据CSS代码生成CSSOM（类似DOMTree）将DOM Tree和CSSOM整合形成Render Tree渲染树根据Render Tree渲染页面遇到<s
2020-09-13 10:44:09
130
原创 CSS：移动端设置文字超过某个行数用省略号表示
设置文字超过某个行数用省略号表示利用弹性伸缩盒子模型 /* 将对象设置为弹性伸缩盒子模型 */ display: -webkit-box; /* 设置对象的子元素的排列方式：从上到下垂直排列子元素 */ -webkit-box-orient: vertical; /* 限制块元素显示的文本行数 */ -webkit-line-clamp: 2; overflow: hidden; /* 多行文本溢出显示省略号 */ text-overflow: ellipsis;
2020-09-08 12:50:28
735
原创 JS：Promise总结及关于then和catch的面试题解析
Promise定义Promise：一个对象，是异步操作的一种处理方案，主要解决了回调地狱callback hell问题。Promise将处理程序与异步操作的最终成功值或失败原因关联起来，让异步方法像同步方法一样返回值，但不是立即返回最终值，异步方法返回一个Promise，在将来的某个时候提供该值。Promise对象有三种状态：pending：进行中resolved：完成rejected：失败Promise只有两种状态变化：（创建Promise时，PromiseStatus将处于pend
2020-08-23 15:20:06
2925
原创 JS算法：LeetCode557-反转字符串中的单词 III
题目描述：给定一个字符串，你需要反转字符串中每个单词的字符顺序，同时仍保留空格和单词的初始顺序。示例：输入：“Let’s take LeetCode contest”输出：“s’teL ekat edoCteeL tsetnoc”提示：在字符串中，每个单词由单个空格分隔，并且字符串中不会有任何额外的空格。知识点：字符串的split()：将一个字符串分割为子字符串，并返回一个字符串数组数组的map()：通过指定函数对数组中每个元素进行处理，并返回一个处理后的新数组数组的join()：将数
2020-08-22 16:51:32
276
原创 JS—创建10个a标签，点击弹出相应1-10的序号
创建10个a标签，点击弹出相应1-10的序号错误做法：弹出均为11，当触发事件时，for循环已经结束，i为11let i, a;for (i = 1; i < 11; i++) { a = document.createElement('a'); a.innerHTML = i + '<br>'; a.addEventListener('click', function(e) { // 阻止默认行为 e.preventDefau
2020-08-18 12:22:02
685
原创 JS的call、apply以及手写bind函数
call和apply函数call()语法：call (thisObj, arg1, arg2);apply()语法：apply (thisObj, [arg1, arg2]);共同点：改变this指向，并立即执行区别：bind函数的参数为列表形式，apply参数为数组形式bind函数bind()语法：bind (thisObj, arg1, arg2);不会立即执行，而是返回一个新函数，调用新函数才执行改变this的指向为指定的值参数为列表形式方法挂载在Function.proto
2020-08-18 11:48:00
185
原创 JS中的浅拷贝与深拷贝实现
关于JS中的深拷贝与浅拷贝浅拷贝在复制引用类型，例如对象的时候，浅拷贝只复制地址值，两个对象指向同一个堆内存中的数据，一旦改变后者的数据，被拷贝的对象的数据同样被修改。深拷贝不同于浅拷贝指向同一地址，深拷贝则是在堆内存中重新创建了一个空间来存放相同的数据，二者指向的堆内存的地址是不同的。此时，后者数据修改不影响前者的数据。JS深拷贝实现let obj1 = { name: 'aaa', age: 20, address: { city: '广州'
2020-08-17 14:28:58
169
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人