![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web 前端
文章平均质量分 79
吴琼__Candice
通过每天一点点的总结,在养成好习惯的同时也能学习到更多的东西。
始终坚信你若盛开,清风自来。
展开
-
Chrome浏览器本地调试:阻止不安全、本地网络请求
今天打开Chrome浏览器,本地开发联调突然报错。Access to script at 'http://localhost:8001/xxx.js' from origin 'http://xxx.xxx.xxxx.com' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address spacelocal.报错说我本地的原创 2021-09-24 14:21:04 · 8845 阅读 · 2 评论 -
docker入门
准备工作到Docker官网下载并安装Docker客户端。安装成功后,在终端执行docker --version,成功看见下图信息说明docker安装成功。注册Docker账号国内从 DockerHub 拉取镜像有时会遇到困难,此时可以配置镜像加速器。Azure中国镜像(https://dockerhub.azk8s.cn)阿里云加速器(需登录账号获取)七牛云加速(https://reg-mirror.qiniu.com)设置成功之后,再在终端上执行docker i原创 2021-03-24 18:03:39 · 191 阅读 · 0 评论 -
怎么用纯css手画三角形&梯形
相信大家肯定在设计稿上面看见过三角形和梯形,大家是怎么做的?让设计师切一个图给你?哈哈哈,这个方法确实省时省力。不过我今天分享的是怎么用纯css来画一个。完整的代码,可以在这里查看。画三角形之前,我们先来给一个正方形加个边框,不同边为不同的颜色,看看能看出什么端倪?#square1 { width: 100px; height: 100px; border-top: 10px solid red; border-bottom: 10px solid yellow; border-l原创 2021-03-22 17:53:17 · 417 阅读 · 0 评论 -
一看就懂的防抖与节流
防抖和节流这两个词应该不陌生吧!防抖和节流就是为了解决不可控的高频触发和快速连续触发导致响应跟不上触发,造成页面卡顿,假死现象。lodash的_debounce、_throttle已经替我们封装好了这两个方法。如果你不想引用第三方库并且想知道个所以然,那下面的文章就很适合你。防抖(debounce)概念延时一段时间执行一个函数,如果在这个等待时间又触发了这个事件,那么上一个事件的延时失效,以新时间的延时为准。直到没有新的事件了,函数才可以真正的执行。生活中的类似场景防抖就好像我们生活中关电梯门,原创 2021-03-18 21:50:53 · 296 阅读 · 2 评论 -
解决跨域问题的n种办法
今天我们来聊聊跨域的事情,那我们先从浏览器的报错开始吧!见到这个报错信息,那么就要恭喜你,遇到了跨域这个磨人的小妖精了。关于这篇文章的代码,需要的自取。什么是跨域?那么说到跨域,我们就需要先搞懂什么是同源策略?同源策略是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。所谓"同源"指的是“三个相同”。协议相同域名相同端口相同当协议、域名、端口中任意一个不相同时,都算作跨域。需注意即使两个原创 2021-03-17 14:18:37 · 4255 阅读 · 10 评论 -
从输入url到页面渲染可以做哪些性能优化?
上一篇我们罗列了从输入url到页面渲染到底经历了什么?那我们今天再来说说这个步骤中,我们能做哪些的性能优化?DNS Prefetch上一篇文章只说了浏览器访问一个域名的时候需要经过DNS解析。其实DNS解析是有一个解析过程的,按浏览器缓存、系统缓存、路由器缓存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序,逐步读取缓存,直到拿到IP地址。通过主机名加载一个页面通常仅需要解析DNS一次,但是如果页面的资源文件比如:fonts、images、scripts等都是不同的主机名原创 2021-03-10 16:26:06 · 462 阅读 · 0 评论 -
从输入url到页面渲染到底经历了什么?
想知道从输入url到页面渲染到底经历了什么?就必须要知道浏览器的工作原理。下面我先用一个流程图简单的说一下从导航中输入url到页面渲染的几个重要步骤。正文正式开始啦!DNS解析对于一个web页面来说导航的第一步是要去寻找页面资源的位置。如果导航中输入一个域名地址,浏览器并不能通过域名找到对应的服务器,需要通过DNS解析成IP地址,一旦获取到服务器IP地址,浏览器接下来就要试图和服务器建立连接了。TCP三次握手浏览器通过TCP“三次握手”与服务器建立连接。所谓三次握手(Three-原创 2021-03-05 20:19:31 · 533 阅读 · 0 评论 -
css实现水平&垂直居中
项目中经常需要实现水平、垂直居中,一直想着整理一下居中的几种方法,拖拖拉拉到今天才有时间整理,下面话不多说就直接用多种方法实现div水平垂直居中吧!.container设置容器几何属性,.container_center设置容器的居中属性。 本文的背景是body是响应式的,没有固定宽高;同时子元素也不确定宽高和数量。<html> <body> <div class="container container_center">center</div&g原创 2021-02-26 17:13:52 · 246 阅读 · 1 评论 -
前端架构之babel(一)之基础认识
babel是一个javascript编译器。通过babel你可以使用下一代的Javascript,以及下一代的Javascript工具。babel可以为你做的以下的事情:语法转换:babel通过语法转换器来支持新版本的Javascript语法。增加垫片:通过polyfill方式在目标环境中添加缺失的特性(通过@babel/polyfill)js代码转换一、安装babelnpm install --save-dev @babel/core @babel/cli @babel/pre原创 2020-10-13 15:17:57 · 456 阅读 · 0 评论 -
前端架构之eslint(三)之 插件开发
前面两节已经对eslint的配置,eslint源码进行了详细的解释,那接下来我们就来手写一个plugin。该plugin包含自定义rule、自定义processor、共享配置信息。完整的项目请看eslint-project一、创建一个插件 - myPlugin初始化项目。每个插件是一个命名格式为 eslint-plugin-<plugin-name> 的 npm 模块,你也可以用这样的格式 @<scope>/eslint-plugin-<plugin-name&原创 2020-08-12 17:35:37 · 2373 阅读 · 0 评论 -
前端架构之eslint(二)之源码解析
上节对eslint的配置进行了详细的解释,这节再来对源码进行分析一波。执行eslint的流程图如下:eslint的入口:eslint/bin/eslint.js#maineslint.js是命令的执行文件,用来启动eslint,并向cli传递命令行参数。...await require("../lib/cli").execute( process.argv, // 命令行eslint后面的参数 process.argv.includes("--stdin") ? await readSt原创 2020-08-11 00:02:59 · 853 阅读 · 0 评论 -
前端架构之eslint(一)之基础配置
一、安装eslintnpm install eslint --save-devoryarn add eslint --save-dev二、eslint配置Configuration Comments - 使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。在javascript使用注释配置eslint信息。/* eslint-env node, mocha */ // 使用注释来指定环境/* global var1:writable, var2:rea翻译 2020-08-10 23:59:06 · 1057 阅读 · 0 评论 -
一看就懂的this指向问题
## 一看就懂的this指向问题 最近为了勉励自己对学习到的知识做个总结,最后决定写成博客分享给大家。欢迎大家指正,下面就进入正题。##### 一、this的指向 在es5中,this的指向只有在运行的时候才可以确定,也就是说创建的时候并不能确实指向。**this永远指向最后调用它的对象。**我们来举例说明:例子1:```var a = 1function tes...原创 2020-03-19 15:22:49 · 101 阅读 · 0 评论 -
快速理解JS闭包
快速理解JS闭包为了快速理解JS闭包,加强记忆,整理一下JS闭包知识变量的作用域如何外部读取函数内部的变量闭包的概念闭包的用途使用闭包的优缺点详细说明变量的作用域> 变量分为全局变量和局部变量,全局变量即:定义在函数外的变量;局部变量即:定义在函数内的变量。代码块 var num1 = 1; // 全局变量 function test() { var num2 = 2; //原创 2017-12-06 16:38:38 · 205 阅读 · 0 评论 -
angular-translate 的总结
angularJS 国际化模板 angular-translate简单方便翻译中英文等多语言环境原创 2016-08-22 15:49:31 · 15378 阅读 · 0 评论