- 博客(41)
- 收藏
- 关注
RSS订阅原创 Web Worker、Service Worker 和 Worklet
Web worker，service worker和worklet，这些都是“JavaScript Workers”，虽然它们在运行方式上有一些相似的地方，并且它们在使用上也有一些重叠的地方。一般来说，一个worker是一个脚本在浏览器主线程之外的单独的线程上运行。如果你想要在HTML文档中引用一个Web worker，service worker和worklet都是让脚步运行在单独的线程上的，下面讲一下三者的区别。Web workersWeb workers是最常用的worker类型。它不像另外两种
2020-10-26 16:44:30
2964
2
原创 HTML5 Performance
简介performance是html5的新特性之一，通过它，页面的开发者们可以非常精确的统计到自己页面的表现情况，从而有针对性的进行优化，提升用户体验。下面是对performance相关API的学习总结，一起上车吧～performance.timing返回一个PerformanceTiming对象，用来获取完整的页面加载信息。是时候祭出这张图了：页面完整加载过程我们会比较关注的几个时间段及其耗时的计算方法如下：DNS解析：timing.domainLookupEnd - timing.d
2020-10-26 10:14:55
396
原创 vue2.6.11版本源码运行报错问题处理
1、源码下载git clone http://github.com/vuejs/vue.git2、安装npm依赖包npm install3、运行报错D:\workspace\html5\everyday2\vue>npm run dev> vue@2.5.0 dev D:\workspace\html5\everyday2\vue> rollup -w -c build/config.js --environment TARGET:web-full...
2020-09-17 11:10:18
1537
1
翻译 带你彻底弄懂Event Loop
我在学习浏览器和NodeJS的Event Loop时看了大量的文章，那些文章都写的很好，但是往往是每篇文章有那么几个关键的点，很多篇文章凑在一起综合来看，才可以对这些概念有较为深入的理解。于是，我在看了大量文章之后，想要写这么一篇博客，不采用官方的描述，结合自己的理解以及示例代码，用最通俗的语言表达出来。希望大家可以通过这篇文章，了解到Event Loop到底是一种什么机制，浏览器和NodeJS的Event Loop又有什么区别。如果在文中出现书写错误的地方，欢迎大家留言一起探讨。Event .
2020-09-07 09:39:20
353
原创 前端性能优化
前端性能优化是个比较大的概念，目前比较规范的说法是雅虎前端优化的35条军规阅读目录内容部分 css部分 js部分 javascript, css 图片 cookie 移动端 服务器摘要：无论是在工作中，还是在面试中，web前端性能的优化都是很重要的，那么我们进行优化需要从哪些方面入手呢？可以遵循雅虎的前端优化34条军规，不过现在已经是35条了，所以可以说是雅虎前端优化的35条军规。已分类，挺好的，这样对于优化有一个比较清晰的方向回到顶部内容部分...
2020-08-28 09:17:58
469
1
原创 commander
node.js命令行界面的完整解决方案，受RubyCommander启发。原理:当一个Nodejs程序运行时,process对象中有一个叫做argv的属性。命令行程序的第一个重头戏就是解析这个process.argv属性。定义一个hello脚本,打印一下process.argv #!/usr/bin/env node console.log('hello ', process.argv);复制代码 在终端输入$ hello a b c看...
2020-08-27 14:48:43
450
原创 node程序调试
作为一位前端工程师，习惯了基于浏览器的调试模式，本地代码断点。但是node程序是跑在node环境的服务器上8，这时可以基于chrome的inspect来进行调试，其调试模式和之前的浏览器模式调试一致。步骤：1.node脚本运行模式中添加inspect其他默认端口为9229，可以通过--inspect=9221修改端口为92212.谷歌浏览器新开窗口输入chrome://inspect，在页面可以看到调试页面，点击就可以进入调试阶段这样就完成了node服务端代码调试，后续学习中会继
2020-08-27 14:06:46
262
原创 Semver
本文讨论的是一个nodejs工具，你需要对node/npm有最基本的了解。Semantic Version是当下被大多数软件/库使用的一套版本命名规范。Semver是一个专门分析Semantic Version（语义化版本）的工具，“semver”其实就是这两个单词的缩写。Npm使用了该工具来处理版本相关的工作。semver可以作为一个node模块，同时也可以作为一个命令行工具。功能包括：比较两个版本号的大小验证某个版本号是否合法提取版本号，例如从“=v1.2.1”体取出"1.2.1"
2020-08-26 09:51:50
2600
原创 vscode常用的插件
综合：Path Intellisense:智能提示文件名，这可是开发时必须的助力：vscode-great-icons：显示文件图标，一眼看清是什么后缀的文件vscode-fileheader:自动给文件添加头部注释，快捷键为ctrl+alt+i，头部内容在settings中添加： "fileheader.Author": "app.frontend.Alan", "fileheader.LastModifiedBy": "app.frontend.Alan".
2020-08-26 09:43:50
786
原创 js中几种实用的跨域方法原理详解
js中几种实用的跨域方法原理详解这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。下表给出了相对http://store.company.com/dir/page.html同源检测的结果:要解决跨域的问题，我们可以使用以下几种方法：一、通过jsonp跨域在js中，我们直接用XMLHttpRequest请求不同域上的数据时
2020-08-19 14:43:22
100
转载 10个前端经常遇到的问题解决方案
作为一个开发了多个 H5 项目的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。由此来做一个阶段性的总结。移动端 H5 相关基础技术概览转存失败重新上传取消转存失败重新上传取消iOS 滑动不流畅表现上下滑动页面会产生卡顿，手指离开页面，页面立即停止运...
2020-04-09 16:44:37
24503
原创 js执行顺序之Even Loop
event loop都不陌生，是指主线程从“任务队列”中循环读取任务，比如 例1： setTimeout(function(){console.log(1)},0); console.log(2) //输出2,1 在上述的例子中，我们明白首先执行主线程中的同步任务，当主线程任务执行完毕后，再从event loop中读取任务，因此先...
2019-11-29 13:59:00
384
原创 git常见操作
设置用户名以及邮箱: git config --global user.name "Your Name" git config --global user.email "email@example.com"git仓库初始化: git init查看有推送权限的远程库 git remote详细查看有推送权限的远程库 git remote -vadd 添...
2019-11-05 09:38:04
89
原创 js 中对象的get Set的使用方法
console.log('.......obj1.........')// 第一种设置对象的存取器属性var obj1 = {a:1,b:2,// c为存取器属性set c(x){this.b = xconsole.log('设置c的值:',x)},get c(){console.log('获取c的值:',this.b)return this.b...
2019-10-22 14:02:56
1491
原创 本地拉去github的分支生成ssh-key
1） 检查SSH key是否已经存在：用这个命令 ls ~/.ssh/ 进行检查 id_rsa.pub 是否存在，如果存在，就不用生成一个新的SSH key了，直接跳到下面的第3步。2）如果第1步中的SSH key不存在，生成一个新的SSH key命令如下：ssh-keygen -t rsa -b 2048 -C “youremail@example.com” 其中，yourema...
2018-12-24 10:40:10
172
原创 借助chrom浏览器调试h5
1.手机通过数据线连接电脑2在chrome中输入chrome://inspect/#devices3.手机通过浏览器打开需要访问的页面，选择inspect之后便可抓取移动端的数据包**在连接过程中会出现几种常见问题1.点击inspect后跳转窗口报404.这种一般都是需要翻墙解决 ...
2018-11-16 15:34:25
576
原创 前段常用算法
虽说我们很多时候前端很少有机会接触到算法。实际上学习数据结构与算法对于工程师去理解和分析问题都是有帮助的。如果将来当我们面对较为复杂的问题，这些基础知识的积累可以帮助我们更好的优化解决思路。 Q1 判断一个单词是否是回文？回文是指把相同的词汇或句子，在下文中调换位置或颠倒过来，产生首尾回环的情趣，叫做回文，也叫回环。比如 mamam redivider .很多人拿到这样的题目...
2018-11-08 09:55:04
237
原创 js中的闭包之我理解
闭包是一个比较抽象的概念,尤其是对js新手来说.书上的解释实在是比较晦涩,对我来说也是一样. 但是他也是js能力提升中无法绕过的一环,几乎每次面试必问的问题,因为在回答的时候.你的答案的深度,对术语的理解以及js内部解释器的运作方式的描述,都是可以看出你js实际水平的.即使你没答对,也能让考官对你的水平有个评估.那么我先来说说我对js中的闭包的理解. 闭包是很多语言都具备的特性,在js...
2018-10-18 15:11:16
136
原创 常用正则
IDcard: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/, // 身份证 mobile: /^1([3|4|5|7|8|])\d{9}$/, // 手机号码 telepho...
2018-09-26 15:49:27
457
原创 react开发脚手架create-react-app
1、首先基于npm在全局安装create-react-app$ npm install -g create-react-app2、在指定目录中创建一个react项目工程$ create-react-app my-appmy-app是自己设置的项目名称（遵循npm模块发布时的要求，例如：名字中不能出现大写字母或者汉字以及特殊字符等）3、进入到指定的项目文件，启动项目...
2018-09-11 08:59:57
738
转载 http请求资源下载还是打开显示
1、浏览器通过url请求资源的原理和实质,我们先看一个url地址。http://localhost/download.php?Content-Dispositon=attachment（以下简称url1）我们以php为例解释下在web浏览器输入这个地址后服务器上的apache服务器是怎么运作的。首先，浏览器设计的初衷就是请求资源，url的意思就是统一资源定位器。url1 就是请求local...
2018-08-29 09:01:44
1158
转载 webpack务虚扫盲
webpack务虚扫盲打包工具的角色所谓打包工具在web开发中主要解决的问题是：（1）文件依赖管理。毕竟现在都是模块化开发，打包工具首先就是要梳理文件之间的依赖关系。（2）资源加载管理。web本质就是html、js和css的文件组合，文件的加载顺序（先后时机）和文件的加载数量（合并、嵌入、拆分）也是打包工具重点要解决的问题。（3）效率与优化管理。提高开发效率，即写最少的代码，做...
2018-08-01 11:35:05
483
原创 sass封装常见的@mixin
1.常用三角封装@mixin triangle($direction, $size, $borderColor ) { content:""; height: 0; width: 0; @if $direction == top { border-bottom:$size solid $borderColor; border-left:$size dashed transparent; bor...
2018-07-19 09:32:06
1672
原创 ie9下不存在console兼容解决
在入口文件中为glob添加没有声明的属性// There are no console bugs in the browser. window.console = window.console || (function() { var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.di...
2018-05-24 10:51:06
506
原创 构建工具-webpack
在开始之前，请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。1.安装webpack分为默认安装最新版本以及安装固定版本npm install --save-dev webpack //默认安...
2018-05-21 10:21:55
273
转载 Webpack 中 file-loader 和 url-loader 的区别
转自：http://blog.csdn.net/qq_38652603/article/details/738351531.前言 如果我们希望在页面引入图片（包括img的src和background的url）。当我们基于webpack进行开发时，引入图片会遇到一些问题。 其中一个就是引用路径的问题。拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个...
2018-05-18 16:27:15
3074
原创 eslint常用配置
'rules': { // no-var 'no-var': 'error', // 要求或禁止 var 声明中的初始化 'init-declarations': 2, // 强制使用单引号 'quotes': ['error', 'single'], // 要求或禁止使用分号而不是 ASI 'semi': ['error', 'ne...
2018-04-19 15:22:45
792
原创 对象可枚举和不可枚举属性
在JavaScript中，对象的属性分为可枚举和不可枚举之分，它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查找遍历到。一、怎么判断属性是否可枚举 js中基本包装类型的原型属性是不可枚举的，如Object, Array, Number等，如果你写出这样的代码遍历其中的属性：1234
2017-12-04 15:12:40
3627
原创 js操作cookie
JavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。而cookie是运行在客户端的，所以可以用JS来设置cookie.假设有这样一种情况，在某个用例流程中，由A页面跳至B页面，若在A页面中采用JS用变量temp保存了某一变量的值，在B页面的时候，同样需要使用JS来引用temp的变量值，对于JS中的全局变量或者静态变量
2017-05-31 16:19:46
216
原创 bom
1. window常用子对象： history: window对象中保存当前窗体访问过的url的历史记录栈 history.go(1): 前进1次 go(-1): 后退1次 go(0): 刷新当前页 go(n): 前进/后退n次 location：当前窗口正在打开的u
2017-04-24 17:13:56
312
原创 打开新链接方式总结
html> charset="utf-8"/> 打开新链接方式总结 // 打开新链接方式总结：//1. 在当前窗口打开，可后退function fun(){ open("http://www.baidu.com","_self")}//2. 在当前窗口打开，不可后退function fun1(){ location.
2017-04-18 16:26:50
396
原创 bom操作
1. Form对象： 如何找到：document.forms[序号|name] 如何找到数据采集的元素： document.forms[序号|name].elements[序号|name] 让元素获得或失去焦点：elem.focus() elem.blur() 获得/失去焦点的事件
2017-04-18 16:16:52
1671
原创 表单验证案列
html> charset="UTF-8"> 实现带样式的表单验证 rel="Stylesheet" href="css/3_2.css" /> window.$=HTMLElement.prototype.$=function(selector){ return (this==window?document:this).querySelectorAll(s
2017-04-17 17:41:28
262
原创 css兼容处理
一、ie下nth-child选择器的兼容处理/*父元素下的第1个，第n个，最后一个td子元素*/td:first-child{width:60px}/*IE不支持nth-child*/td:nth-child(2){width:200px}/*IE*/td:first-child+td{width:200px}/*IE不支持--可以靠总宽度来调节td:last-ch
2017-04-17 15:39:05
212
原创 多级联动菜单
HTML>联动菜单charset="utf-8" /> /*使用 HTML DOM 的方式实现联动菜单*/ var categories=[{"id":10,"name":'男装',"children":[ {"id":101,"name":'正装'}, {"id":102,"name":'T恤'}, {"id":103,"name":'裤衩'}]},
2017-04-17 14:27:10
259
原创 封装jquery的$方法
html>lang="en"> charset="UTF-8"> 封装jquery的$方法 window.$=HTMLElement.prototype.$=function(selector){ return (this==window?document:this).querySelectorAll(selector) }
2017-04-14 16:59:15
1567
原创 Dom操作实现二级联动下拉选择省份
HTML>二级联动列表charset="utf-8" />.hide{ display: none; } /*实现“省”和“市”的级联下拉列表*/ var cities=[[], /*0号下标没有元素*/[{"name":'东城区',"value":101}, {"name":'西城区',"value":102}, {"name":'海淀区',"value
2017-04-14 15:31:10
614
原创 动态创建表格
HTML>动态创建表格charset="utf-8" /> table{width:600px; border-collapse:collapse; text-align:center; } td,th{border:1px solid #ccc} //假如从服务端收到json字符串如下： var json='[' +'{"ena
2017-04-14 14:39:11
229
原创 Dom操作
1. DOM树： 节点树：网页中每一个元素，属性，文本，注释都是节点对象 同一网页中的所有节点对象通过父子关系形成树结构 树根：document对象 节点数中：节点间关系：6个属性父子关系4种：parentNode childNodesfirstChild lastChild兄弟关系2种：previousSiblingnextSibl
2017-04-14 09:52:38
224
原创 微信小程序开发
微信小程序开发1.官放文档网站访问https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html开发文档并下载微信开发者工具2.进入之后需要企业认证并配置appid用于上传本地开发好的项目，同时用于发布3.开发过程：a.首先选好本地的一个文件夹，可以创建一个（任意）用于存储项目，如果没有创建存储目录，那么你创建的项
2017-01-11 13:52:59
488
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人