前端
前端相关知识
AldarLin
不积跬步,无以至千里
展开
-
烂梗面试题: 从输入url到页面加载完成,发生了什么
目录一、总体流程二、DNS 域名解析2.1 DNS 域名解析的过程三、建立TCP连接,发送Http请求资源3.1 建立 TCP 连接3.2 发送 HTTP 请求,并接收服务器响应结果,关闭 HTTP 连接四、浏览器解析HTML4.1 浏览器解析过程五、回流(Reflow)和重绘(Repaint)5.1回流5.2重绘5.3 性能影响5.4 回...原创 2020-01-03 18:50:56 · 385 阅读 · 0 评论 -
JS 存储功能详解
目录一、常用方式二、cookie 使用2.1 cookie 的作用2.2 cookie的安全隐患2.3 如何保证 cookie 的安全2.4 使用三、sessionStorage 和 localStorage 使用3.1 localStorage 的作用3.2 sessionStorage 和 localStorage 的选择3.3 使用方式四、inde...原创 2020-01-02 14:07:02 · 460 阅读 · 1 评论 -
JS 事件触发机制
目录一、JS 事件机制二、事件阶段划分三、注册事件四、取消事件传递五、为什么要阻止事件传递?六、e.preventDefault() 和 e.stopPropagation() 的区别七、事件解绑八、事件代理 (事件委托)一、JS 事件机制JS 的事件机制其实就是事件在 DOM 上的传递顺序,并且我们可以对应阶段对这些事件进行获取和处理。可以看到 l...原创 2020-01-01 15:26:59 · 2688 阅读 · 0 评论 -
ES6语法使用
1. 箭头函数// 通过箭头函数,当发生on订阅事件,发生favorites时就会触发回调事件。vm.$on( event, callback )this.$root.$on("favorites",list=>(this.favorites=list));2. Array.reduce 函数能遍历数组并将item逐个添加到obj中。同时用...item能...原创 2019-11-18 16:41:03 · 112 阅读 · 0 评论 -
【CDN】处理 cdn 缓存和 前端缓存
一、cdn 缓存问题问题:cdn 缓存问题是由于 cdn 节点缓存了页面文件,导致用户直接在 cdn 节点访问了对应文件,而不是通过节点,这就导致用户可能使用旧版页面,发送旧的请求到服务器,从而引发错误。解决:① 使用灰度发布,先更新静态资源文件(js,css),再更新页面文件(html,html中引用了静态资源文件)② 前端使用了文件指纹方式,本质上是每次打包出的文件名以及html中引用的文件名变化,去访问cdn上不存在的节点。由于新旧文件文件名不同,就不会有访问到旧文件的问题③ 除了原创 2020-08-09 17:26:05 · 3746 阅读 · 0 评论 -
【Vue】 Vue 项目创建和相关组件引入
一、Vue 项目创建vue init webpack 【项目名】二、ElementUI 引入##### 安装 ElementUInpm install element-ui -d##### 引入 ElementUIimport ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)三、引入 Axios# 安装npm install ..原创 2020-06-17 16:20:40 · 135 阅读 · 0 评论 -
【electron-vue】 一、elecron-vue 环境搭建
一、环境搭建1.1 创建项目# 安装脚手架npm install -g vue-cli# 安装脚手架样板项目vue init simulatedgreg/electron-vue elec-demo011.2 Webpack ReferenceError:process is not defined 错误处理在执行 npm install 命令时,可能会报错,需要修改 webpack 配置文件错误内容:ERROR in Template execution fa.原创 2020-06-08 09:42:53 · 459 阅读 · 0 评论 -
前端支付宝接口对接
由于后端返回的是个form表单格式的数据,需要前端接收到数据后,使用 js 代码插到 dom 树上。// 后端数据格式// 前端处理代码const form = res.data;const div = document.createElement('div')div.id = 'alipay'div.innerHTML = formdocument.body.appen...原创 2020-04-24 13:59:29 · 1745 阅读 · 1 评论 -
ionic和cordova安装
一、安装ionic和cordaovanpm install -g ionic cordovaionic start my-appionic serve插件安装内置浏览器https://zhuanlan.zhihu.com/p/55491444创建组件ionic g page button公共模块多个模块无法共用同一个组件,要将组件封装...原创 2019-11-11 09:58:58 · 370 阅读 · 0 评论 -
flex模型
一、box-sizingbox-sizing:content-box: 正常,即padding和border都会扩大盒子宽高border-box: 在当前的盒子模型内,往内部修改二、calc计算calc(100px-20px) x错的calc(100px - 20px) 对的三、弹性布局postCss webkit若父级用了display:f...原创 2019-11-17 00:59:28 · 375 阅读 · 0 评论 -
CSS经典布局分析
一、盒子模型布局,一般网络模块布局头部: 一行中div并列排布:1. 给每个div元素加上float:left2. 给每个div元素加上display:inline-block。 使用display设置并列时,由于div 和 div 之间的空格、Tab、换行符在浏览器里会被合并成一个空白符,所以就会出现缝隙需要将父容器设置:font-size: 0//index.h...原创 2019-11-16 17:31:24 · 217 阅读 · 0 评论 -
CSS3 学习笔记
1. display的使用和内容display有三个属性:block: 块元素总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制; 主要标签: address , blockquote , center , dir , div , dl , fieldset , f...原创 2019-11-15 16:53:01 · 110 阅读 · 0 评论 -
小知识手册
一、JS 原始类型js的原始类型有6种:boolean null undefined number string symbol原始类型是值,故而原始类型没有函数可以使用。问:那么为什么'1'.toString()可以正常使用呢? 答:此时'1'已经变成了String类型(对象) 问2:Number类型相加,存在0.1 + 0.2 !== 0.3 答:解决方式:1)...原创 2019-12-31 15:11:39 · 124 阅读 · 0 评论 -
常用的 VSCode 插件
一、koroFileHeader快捷创建函数头和文件头的插件。支持编辑想要的格式,并使用快捷键创建文件头和函数头"fileheader.customMade": { //此为头部注释 "Author": "tom", "Date": "Do not edit", "Version": "2.0", "Description": "",},"fi...原创 2020-01-19 14:15:24 · 109 阅读 · 0 评论 -
前端优化(一): 图片处理
图片处理是前端项目中无可缺少的一个重要环节,过大或过多的图片都会导致页面加载缓慢。常用的方式有:1. 图片压缩 2. 减少http请求 3. 图片懒加载 4.图片Base64压缩一、图片压缩1.1 解析1.2很好用的图片压缩网站:二、 减少 Http 请求2.1 使用精灵图(雪碧图)2.1.1 什么是精灵图2.1.2 精灵图的作用2.1.3 如何使用精...原创 2019-12-25 09:43:36 · 2621 阅读 · 0 评论 -
前端自适应布局
在前端开发中,我们不可避免要面临适配问题。本文将介绍几种适配方式:一、px和em1.1 px1.2 em二、rem2.1 rem原理2.2 rem如何计算的2.3rem使用三、使用插件px2rem转换3.1 原理和优点3.2 使用方式一、px和empx、em、rem都是计量单位,都能表示尺寸。1.1 pxpx表示的是绝对尺寸,是一个固定大...原创 2019-12-23 00:17:02 · 4294 阅读 · 1 评论 -
常用的js代码段
收藏常用的JS代码段,方便以后引用一、时间格式化const dateFormatter = (formatter, date) => { date = (date ? new Date(date) : new Date) const Y = date.getFullYear() + '', M = date.getMonth() + 1, ...原创 2019-12-21 10:56:54 · 128 阅读 · 0 评论 -
前端跨域的几种方式
由于同源策略的限制,在前端开发中我们经常会遇到跨域问题。本文将介绍:一、什么是同源策略1.1 定义1.2 同源策略限制了什么二、常见的几种跨域方式2.1 JSONP 跨域2.2 CORS跨域资源共享2.3Nginx代理2.4 Node.js中间件代理(本地代理)2.5 postMessage跨域2.6Websocket跨域2.7documen...原创 2019-12-17 00:34:25 · 998 阅读 · 0 评论 -
typescript 学习笔记
一、基础类型1.1 布尔类型let isTest: boolean = false;1.2 stringlet text: string = 'this is a text';// 模板字符串 ``let str = 'about template string!';let templateText: string = `this is a text ${str}`;...原创 2020-01-22 11:14:41 · 224 阅读 · 0 评论