![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
CS逍遥剑仙
孙府藏俊龙,剑出威四方,峰尖笑沧桑,情满散天下。
展开
-
浏览器原理学习笔记08—浏览器开发者工具
浏览器原理学习笔记08—浏览器开发者工具文章目录浏览器原理学习笔记08—浏览器开发者工具1. Chrome 开发者工具2. 网络分析工具2.1 Network 面板2.2 优化时间线上耗时项3. 性能分析工具概述4. Audits4.1 利用 Audits 生成 Web 性能报告4.2 性能报告解读4.3 根据报告优化 Web 性能4.3.1 性能分析相关重要时间节点4.3.2 针对报告六项指标进行优化5. Performance5.1 生成报告5.2 报告分析5.2.1 概览面板5.2.2 性能指标面板原创 2020-05-30 12:30:23 · 734 阅读 · 0 评论 -
浏览器原理学习笔记07—浏览器安全
浏览器原理学习笔记07—浏览器安全文章目录浏览器原理学习笔记07—浏览器安全1. Web 页面安全1.1 同源策略 (Same-origin policy)1.2 安全与效率的平衡1.3 XSS 攻击1.3.1 概念1.3.2 恶意脚本注入方式1.3.2.1 存储型 XSS 攻击1.3.2.2 反射型 XSS 攻击1.3.2.3 基于 DOM 的 XSS 攻击1.3.3 XSS 防范1.4 CSRF 攻击1.4.1 概念1.4.2 攻击方式1.4.3 CSRF 防范1.5 页面安全总结2. 浏览器系统安全原创 2020-05-30 12:29:03 · 364 阅读 · 0 评论 -
浏览器原理学习笔记06—浏览器中的网络
浏览器原理学习笔记06—浏览器中的网络文章目录浏览器原理学习笔记06—浏览器中的网络1. HTTP 发展1.1 HTTP/0.91.2 HTTP/1.01.3 HTTP/1.12. HTTP/22.1 HTTP/1.1 缺陷2.2 使用多路复用优化缺陷2.2.1 缺陷解决2.2.2 多路复用实现2.2.3 其他特性3. HTTP/3 & QUIC 协议3.1 HTTP/2 缺陷3.2 QUIC 协议3.3 HTTP/3 挑战Write By CS逍遥剑仙我的主页: www.csxiaoyao原创 2020-05-30 12:28:18 · 241 阅读 · 0 评论 -
浏览器原理学习笔记05—浏览器中的页面渲染
浏览器原理学习笔记05—浏览器中的页面渲染文章目录浏览器原理学习笔记05—浏览器中的页面渲染1. DOM 树1.1 DOM 树的生成1.2 JavaScript 阻塞 DOM 解析2. 渲染流水线与 CSSOM2.1 CSS 不会直接阻塞 DOM 构建2.2 CSS 会阻塞 JavaScript 执行2.3 白屏时间优化策略3. 分层与合成机制3.1 如何生成一帧图像3.2 分层和合成:CSS动画比JavaScript高效3.3 分块3.4 利用分层技术优化代码 will-change 优化动画4. 不同原创 2020-05-30 12:26:12 · 337 阅读 · 0 评论 -
浏览器原理学习笔记04—浏览器中的页面事件循环系统
浏览器原理学习笔记04—浏览器中的页面事件循环系统文章目录浏览器原理学习笔记04—浏览器中的页面事件循环系统1. 页面事件循环系统1.1 任务调度模型1.2 消息队列中的任务类型1.3 页面单线程缺点的优化2. 事件循环应用:WebAPI2.1 setTimeout2.1.1 实现方式2.1.2 一些细节2.2 XMLHttpRequest3. 宏任务和微任务3.1 宏任务(粗时间粒度)3.2 微任务3.2.1 微任务队列3.2.2 微任务的产生3.2.3 微任务的执行4. Promise4.1 Prom原创 2020-05-30 12:24:43 · 294 阅读 · 0 评论 -
浏览器原理学习笔记03—V8工作原理
浏览器原理学习笔记03—V8工作原理文章目录浏览器原理学习笔记03—V8工作原理1. JavaScript 的数据类型2. JavaScript 内存空间2.1 内存模型2.2 闭包对象产生过程3. 自动垃圾回收3.1 调用栈中的数据回收3.2 堆中的数据回收3.2.1 代际假说和分代收集3.2.2 副垃圾回收器3.2.3 主垃圾回收器3.2.4 全停顿4. 编译器和解释器4.1 V8 执行 JavaScript 代码总览4.2 生成抽象语法树(AST)和执行上下文4.2.1 AST 的应用4.2.2 A原创 2020-05-30 12:23:04 · 309 阅读 · 0 评论 -
浏览器原理学习笔记02—浏览器中的JavaScript执行机制
浏览器原理学习笔记02—浏览器中的JavaScript执行机制文章目录浏览器原理学习笔记02—浏览器中的JavaScript执行机制1. JavaScript 代码的执行流程1.1 编译阶段1.2 执行阶段2. JavaScript 调用栈2.1 创建执行上下文的场景2.2 调用栈执行过程2.3 利用浏览器查看调用栈信息2.4 栈溢出(Stack Overflow)3. 作用域(scope)4. 作用域链和闭包4.1 作用域连4.2 词法作用域确定 outer 指向4.3 块级作用域中(跨执行上下文)的变原创 2020-05-30 12:21:09 · 220 阅读 · 0 评论 -
浏览器原理学习笔记01—宏观视角下的浏览器
浏览器原理学习笔记01—宏观视角下的浏览器文章目录浏览器原理学习笔记01—宏观视角下的浏览器1. 起步2. Chrome架构演进2.1 2008年发布时的进程架构2.2 目前多进程架构2.3 未来面向服务(SOA)的架构3. TCP协议4. HTTP请求流程4.1 浏览器端发起 HTTP 请求流程4.2 服务器端处理 HTTP 请求流程4.3 浏览器资源缓存(cache)处理4.4 登录状态保持(cookie)5. 导航流程:从输入URL到页面展示6. 渲染流程6.1 DOM: 构建 DOM 树6.2 S原创 2020-05-30 12:17:20 · 362 阅读 · 0 评论 -
使用 requestAnimationFrame 替代 throttle 优化页面性能
使用 requestAnimationFrame 替代 throttle 优化页面性能文章目录使用 requestAnimationFrame 替代 throttle 优化页面性能1. throttle 的缺陷2. requestAnimationFrame 的使用2.1 概念2.2 使用 requestAnimationFrame 对 throttle 优化2.3 解决重复调用问题3. 兼容性4. 总结Write By CS逍遥剑仙我的主页: www.csxiaoyao.comGitHub: g原创 2020-05-30 12:07:00 · 521 阅读 · 0 评论 -
函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用
函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用文章目录函数防抖(debounce)和节流(throttle)在H5编辑器项目中的应用1. 为什么要防抖节流1.1 客户端性能瓶颈1.2 刷新率的必要性1.3 需求所迫2. 防抖 & 节流的概念2.1 函数防抖 (debounce)2.2 函数节流 (throttle)2.3 图示对比3. 实际工程应用场景3....原创 2020-02-01 03:17:28 · 636 阅读 · 0 评论 -
前端性能分析 Chrome Dev Tools 之 Performance
前端性能分析 Chrome Dev Tools 之 Performance文章目录前端性能分析 Chrome Dev Tools 之 Performance1. 属性字段2. 常用性能数据指标计算3. 其他 api3.1 performance.getEntries()3.2 performance.now() / performance.mark()3.3 performance.memory...原创 2020-02-01 03:15:10 · 1282 阅读 · 0 评论 -
团队技术文档构建利器vuepress上手实践
团队技术文档构建利器vuepress上手实践文章目录团队技术文档构建利器vuepress上手实践1. 环境搭建2. 目录结构3. 参数配置3.1 主题配置3.1.1 主页(homepage)3.1.2 导航栏(navbar)3.1.3 侧边栏(sidebar)3.1.4 搜索框(search box)3.1.5 最近更新3.1.6 Service Worker3.1.7 上一页 / 下一页链接(...原创 2019-10-12 17:48:46 · 888 阅读 · 0 评论 -
WebStudy02_jQuery
WebStudy02_jQuery前端学习WebStudy系列(00~06)的总结写在代码注释中代码上传在github中,链接 https://github.com/csxiaoyaojianxian原创 2017-05-09 20:49:53 · 280 阅读 · 0 评论 -
浏览器端用JS创建和下载文件
浏览器端用JS创建和下载文件1 需求前端需要把获取的数据生成文件让用户下载,按照以往生成 a 标签 href 指向目的文件,不仅需要有已经生成的文件服务器路径,而且很多浏览器支持类型的文件会默认加载而不提示用户选择路径下载2 解决方案2.1 下载取代加载:H5标签属性HTML5 中 a 标签增加了 download 属性,点击链接时浏览器不会打开链接指向的文件,而是改为下载(目前只有chrome、f原创 2017-06-24 22:12:25 · 4638 阅读 · 0 评论 -
Gulp学习笔记
Gulp学习笔记1. 安装 Gulp.jsnpm install -g gulp2. 配置2.1 创建 package.json 文件npm init2.2 安装依赖项npm install --save-dev gulp gulp-util2.3 安装需要的插件此处安装两个插件 gulp-uglify 和 gulp-concat,实现对 Javascript 文件压缩和合并,加上 –save-de原创 2017-08-14 19:36:50 · 404 阅读 · 0 评论 -
Webpack学习总结
Webpack学习总结Webpack学习总结Webpack 与 Gulp Grunt 对比安装1 创建packagejson文件2 安装Webpack作为依赖包3 创建目录文件夹使用1 编写基础代码2 命令行基本使用3 通过配置文件使用4 更快捷地执行打包任务功能扩展1 生成Source Maps简化调试2 构建本地服务器3 Loaders31 实例1配置读取 jso原创 2017-08-14 19:33:12 · 1116 阅读 · 0 评论 -
前端拾零01—checkbox&radio&select总结
前端拾零01—checkbox&radio&select总结前端拾零01—checkbox&radio&select总结1. checkbox2. radio3. select Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianx...原创 2018-08-28 19:26:19 · 275 阅读 · 0 评论 -
前端拾零02—H5原生拖放总结
前端拾零02—H5原生拖放总结前端拾零02—H5原生拖放总结1. 拖放总览2. 拖放元素2.1 拖放元素属性2.2 拖放元素监听事件2.3 demo3. 目标元素3.1 目标元素监听事件3.2 demo4. Event.preventDefault()5. Event.dataTransfer Write By CS逍遥剑仙 我的主页: ...原创 2018-08-28 19:27:05 · 292 阅读 · 0 评论 -
vue封装带提示框的单选/多选文本框组件
vue封装带提示框的单选/多选文本框组件文章目录vue封装带提示框的单选/多选文本框组件1. 组件化思想2. 接口参数设计3. 提示框显示隐藏交互实现3.1 尝试方案1: click事件主动聚焦3.2 尝试方案2: blur事件添加延时器 + 开关变量3.3 尝试方案3: 不使用blur,关闭方法改为事件委托3.4 尝试方案4: onfocus + onblur + mousedown + 开关...原创 2018-12-23 22:24:14 · 2955 阅读 · 0 评论 -
vue前端异常监控sentry实践
vue前端异常监控sentry实践文章目录vue前端异常监控sentry实践1. 监控原理1.1 onerror1.2 promise1.3 上报1.4 使用sentry1.5 与vue结合2. 安装raven3. 初始化sentry4. 手动上报5. 封装异常上报类 Report.js6. 调用 Report.js 类7. sourceMapWrite By CS逍遥剑仙我的主页: ww...原创 2019-03-23 12:25:14 · 1782 阅读 · 0 评论 -
跨域详解
跨域详解1. 概念协议、域名、端口有一个不同即被当作不同的域http://www.a.com/lab/a.jshttp://www.a.com/script/b.js 同一域名下不同文件夹 允许http://www.a.com:8000/a.jshttp://www.a.com/b.js 同一域名,不同端口 不允许http://www.a.com/a.jshttps://www.a.co原创 2017-05-10 00:55:50 · 483 阅读 · 0 评论 -
js中三种URI编码方式比较
js中三种URI编码方式比较js中三种URI编码方式比较实例1escape unescape2encodeURIComponent decodeURIComponent推荐3encodeURI decodeURI区别分析结论1. 实例数据传递常需要编码后传递,接收还需反编译,定义url:var url = "http://www.csxiaoyao.com?username='C原创 2017-05-10 00:55:00 · 3758 阅读 · 0 评论 -
onload与ready对比
onload与ready对比onload与ready对比windowonload documentready windowload区别1 执行时间2 数量3 简化写法原生JS实现 jQuery 的 ready 方法1 window.onload & (document).ready() &(document).ready() & (window).load()ready , onl原创 2017-05-10 00:54:29 · 578 阅读 · 0 评论 -
impress.js 源码分析
impress.js 源码分析 之前做展示用幻灯片,我一直热衷于使用PPT,刚开始学习PPT时总是强行使用各种页面特效,越做越复杂。现在看来,学技术大概都要经历一个从简到繁再到简的过程吧。后来,无意间接触到prezi,被它强大的展示逻辑所折服,但用了段时间,发现使用prezi破解版有诸多不便,最关键的是,除了很炫的转场特效,单页的设计感不及PPT,总感觉不尽如人意。 总结下,PPT的单页设计原创 2017-05-09 21:52:06 · 698 阅读 · 0 评论 -
js与form交互方式总结
js与form交互方式总结前言:刚开始接触web开发的时候,往往采用form表单直接提交的方式,但可能存在兼容问题,如:<form method="" action=""> ... <input type="submit" value="submit"/></form后来熟悉了js,更加倾向于使用ajax提交表单,有时甚至连form标签都不使用了。 然而,从HTML语义化的角度来原创 2017-05-09 21:51:17 · 1027 阅读 · 1 评论 -
WebStudy05_移动端+less+bootstrap+zepto
WebStudy05_移动端+less+bootstrap+zepto前端学习WebStudy系列(00~06)的总结写在代码注释中代码上传在github中,链接 https://github.com/csxiaoyaojianxian原创 2017-05-09 20:51:08 · 439 阅读 · 0 评论 -
WebStudy04_AngularJS
WebStudy04_AngularJS前端学习WebStudy系列(00~06)的总结写在代码注释中代码上传在github中,链接 https://github.com/csxiaoyaojianxian原创 2017-05-09 20:50:41 · 277 阅读 · 0 评论 -
WebStudy01_JavaScript
WebStudy01_JavaScript前端学习WebStudy系列(00~06)的总结写在代码注释中代码上传在github中,链接 https://github.com/csxiaoyaojianxian原创 2017-05-09 20:49:31 · 305 阅读 · 0 评论 -
Yahoo! 十三条 : 前端网页优化(13+1)条原则
Yahoo! 十三条 : 前端网页优化(13+1)条原则1. 减少HTTP请求次数 据统计,有80%的最终用户响应时间是花在前端程序上,而其大部分时间则花在各种页面元素,如图像、样式表、脚本和Flash等的下载上,减少页面元素将会减少HTTP请求次数,这是快速显示页面的关键所在。 CSS Sprites方法可以组合页面中的图片到单个文件中,并使用CSS的background-image和ba原创 2017-05-09 20:48:34 · 974 阅读 · 0 评论 -
Angularjs和jQuery的ajax的请求区别
Angularjs和jQuery的ajax的请求区别Angularjs和jQuery的ajax的请求区别原因分析测试效果解决方案我的主页 www.csxiaoyao.com原因分析 Angularjs和jQuery的ajax的请求是不同的。在jquery中,官方文档解释contentType默认是application/x-www-form-urlencoded; charset=UTF-原创 2017-04-02 23:06:05 · 3494 阅读 · 0 评论 -
UBUNTU 16.04 安装日记
UBUNTU 16.04 安装日记 之前曾经使用过rhel、centos、ubuntu-14等linux版本,最近整个系统重新分区,在SSD中划分了40G安装了Ubuntu 16.04。使用过程中发现Ubuntu可以看出Ubuntu在桌面系统上已经又向前跨越了一大步,甚至已经可以用作主要的移动生产力工具,特此记录关键十步,以备后查。一、安装QQ国际版安装: 1.解压 unzip wine-原创 2017-03-14 18:10:39 · 1728 阅读 · 0 评论 -
揭秘ECMAScript参数值传递与“引用”传递
揭秘ECMAScript参数值传递与“引用”传递 js红皮书中文版中(P66)说:“ECMAScript中的所有参数传递的都是值,不可能通过引用传递参数”,然众所周知,js中有object数据类型,虽然其他高级语言函数参数传递分为值传递和引用传递,但是js中object作为参数是以值传递的(P71)。1. 值传递function addNum(num){ num+=10; return原创 2017-05-09 21:54:20 · 832 阅读 · 0 评论 -
12种不宜使用的Javascript语法
12种不宜使用的Javascript语法《Javascript语言精粹》的附录B中,Douglas Crockford列出了12种应该避免使用的Javascript语法,现总结如下:1. ==尽量不要使用==和!=,只使用===和!==,因为==默认会进行类型转换,规则十分难记,例如:false == 'false'false == undefinedfalse == nullnull ==原创 2017-05-09 21:55:09 · 382 阅读 · 0 评论 -
JavaScript性能提升学习
JavaScript性能提升学习1 提升js加载与执行性能多数浏览器使用单一进程处理UI和js脚本执行,部分浏览器允许并行下载js文件,但仍会阻塞其他资源下载,比如图片,页面仍必须等到所有js代码下载执行完才能继续,内嵌脚本不要跟在后,将会导致页面阻塞等待样式表的下载减少<script>标签的数量,包括内嵌和外链脚本,最小化执行延迟会明显改善页面性能, 方式一:合并 方式二:<script原创 2017-05-10 00:53:21 · 483 阅读 · 0 评论 -
判断js中数据类型方法总结
判断js中数据类型方法总结1. 常用的方法与定义数据typeof、instanceof、constructor、prototype、$.type()/jquery.type() 定义数据 ~ var a = "csxiaoyao"; var b = 1993; var c = true; var d = undefined; var e = null; var f = new Dat原创 2017-05-10 00:51:45 · 488 阅读 · 0 评论 -
caller和callee的区别
caller和callee的区别caller返回一个函数的引用,这个函数调用了当前的函数;callee放回正在执行的函数本身的引用,它是arguments的一个属性callerfunctionName.caller : functionName是当前执行的函数caller返回一个函数的引用,这个函数调用了当前的函数(调用函数) 注意: 1. 此属性仅当函数执行时有效 2. 如果程序中原创 2017-05-10 00:49:43 · 710 阅读 · 0 评论 -
从setTimeout分析浏览器线程
从setTimeout分析浏览器线程[toc] 今天接到阿里的面试电话,面试官很和善,聊聊天的形式不知不觉就是一个小时。本人接触前端不深,面试的时候问的几个问题也让我发现自身学习过程中思考太少,其中一个就是问到了setTimeout的工作机理,当时简单讲了讲我自己的想法,面试官也指出了其中的问题,现查阅资料重新整理记录。1. setTimeout的表象 setTimeout的定义很简单,教科原创 2017-05-10 00:48:30 · 1276 阅读 · 0 评论 -
JavaScript 面向对象(封装、继承、多态)多种方式实现完全总结
JavaScript 面向对象(封装、继承、多态)多种方式实现完全总结JavaScript 面向对象封装继承多态多种方式实现完全总结封装继承多态性1 函数重载2 多态实现1. 封装封装就是把抽象出来的数据和对数据的操作封装在一起,数据被保护在内部,程序的其它部分只有通过被授权的操作(成员方法),才能对数据进行操作。 创建对象实现封装可以通过4种方式: 1. 对象字面量 {key:va原创 2017-05-10 00:47:49 · 1902 阅读 · 0 评论 -
解析js中的call、apply、bind
解析js中的call、apply、bind解析js中的callapplybindcall和apply改变上下文调用原生对象的方法实现继承bindcall和apply1. 改变上下文obj.call(thisObj, arg1, arg2, ...);obj.apply(thisObj, [arg1, arg2, ...]);call和apply作用相同,都是把obj(即this)绑定到t原创 2017-05-10 00:47:04 · 514 阅读 · 0 评论 -
ECMAScript数据类型关系总结
ECMAScript数据类型关系总结ECMAScript数据类型关系总结种原始类型typeof 运算符Undefined 类型Null 类型Boolean 类型Number 类型String 类型类型转换StringtoStringNumberparseIntparseFloat强制类型转换Boolean 函数Number 函数String 函数 自动转换规则O原创 2017-05-10 00:45:56 · 453 阅读 · 0 评论