- 博客(40)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 DOMContentLoaded和Load的区别
详解 DOMContentLoaded首先我们先直观地感受下什么是 DOMContentLoaded。打开 Chrome DevTools，切到 Network 面板，重新加载网页，得到如下截图：标记 1 指向的蓝线以及标记 2 指向的蓝色字 “DOMContentLoaded:1.29s” 均表示 DOMContentLoaded 这个事件触发的时间，只不过表现形式不同而已。直观地感受了 DOMContentLoaded，那它究竟是个什么东东呢？什么是 DOMContentLoaded我们先来
2021-11-11 19:26:08
1756
原创 defer和async
浏览器渲染原理HTML 文档被加载和解析完成之前，浏览器做了哪些事情呢？那我们需要从浏览器渲染原理来谈谈。浏览器向服务器请求到了 HTML 文档后便开始解析，产物是 DOM（文档对象模型），到这里 HTML 文档就被加载和解析完成了。如果有 CSS 的会根据 CSS 生成 CSSOM（CSS 对象模型），然后再由 DOM 和 CSSOM 合并产生渲染树。有了渲染树，知道了所有节点的样式，下面便根据这些节点以及样式计算它们在浏览器中确切的大小和位置，这就是布局阶段。有了以上这些信息，下面就把节点绘制到浏览
2021-11-11 19:21:38
801
转载 深入理解现代浏览器
各位，如果你的职业是开挖掘机，你说要不要深入理解挖掘机？通常来说，深入理解你操纵的机器才能最终达到人机一体的境界。当然，你可以说：不用，因为如果挖掘机不好使，我可以换一台。嗯，也有道理。不过，假如你同时又是一名前端开发者，那你要不要深入理解浏览器呢？注意，身为前端，你不太可能有机会因为浏览器不好使就强迫用户换一个你认为好使的。这时候，你好像别无选择了。不过也不用害怕，今天我们的现代浏览器深度游会非常轻松、快乐。这首先必须感谢一位名叫Mariko Kosaka（小坂真子，https://kosamari.
2021-10-25 00:00:48
350
原创 面试-JavaScript
JavaScript 面试知识点总结本部分主要是笔者在复习 JavaScript 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！目录1. 介绍 js 的基本数据类型。2. JavaScript 有几种类型的值？你能画一下他们的内存图吗？3. 什么是堆？什么是栈？它们之间有什么区别和联系？4. 内部属性 [[Class]] 是什么？5. 介绍 js 有哪些内置对象？6. undefined 与 undeclared 的区别？7. null 和 undefined 的区别
2021-10-24 23:18:59
309
原创 面试-HTML
HTML 面试知识点总结本部分主要是笔者在复习 HTML 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！目录1. DOCTYPE 的作用是什么？2. 标准模式与兼容模式各有什么区别？3. HTML5 为什么只需要写 <!DOCTYPE HTML>，而不需要引入 DTD？4. SGML 、 HTML 、XML 和 XHTML 的区别？5. DTD 介绍6. 行内元素定义7. 块级元素定义8. 行内元素与块级元素的区别？9. HTML5 元素的分类10.
2021-10-24 23:18:01
239
原创 面试-CSS
CSS 面试知识点总结本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！目录1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？2.CSS 选择符有哪些？3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。4.伪类与伪元素的区别5.CSS 中哪些属性可以继承？6.CSS 优先级算法如何计算？7.关于伪类 LVHA 的解释?8.CSS3 新增伪类有那些？9.如何居中
2021-10-24 23:17:14
2085
原创 面试-计算机网络知识总结
这里写自定义目录标题计算机网络知识总结目录应用层HTTP 协议概况HTTP 请求报文HTTP 响应报文首部行HTTP/1.1 协议缺点HTTP/2 协议二进制协议多路复用数据流头信息压缩服务器推送HTTP/2 协议缺点HTTP/3 协议HTTPS 协议HTTP 存在的问题HTTPS 简介TLS 握手过程实现原理DNS 协议概况域名的层级结构查询过程DNS 记录和报文递归查询和迭代查询DNS 缓存DNS 实现负载平衡传输层多路复用与多路分解UDP 协议UDP 报文段结构TCP 协议TCP 报文段结构TCP 三
2021-10-24 23:12:12
976
原创 Node.js-EJS模板
EJS是一个JavaScript模版库，用来将EJS模版结合着JSON数据转换为HTML 并且可以直接在模版中写JavaScript的语法安装ejs包//控制台输入npm i ejs简单示例let template = '<h1>Hello, <%= name %></h1>'let data = { name: 'World'}let renderStr = ejs.render(template, data)console.log(rend
2021-08-23 14:31:54
664
原创 Node.js-Http
引入http模块const http = require("http");简单的web服务器myserver.js// 引入http模块const http = require("http");// ipconst hostname = "127.168.1.1";// 端口号const port = 8000;//创建一个HTTP服务器const server = http.createServer((req, res) => { // 状态码 res.status
2021-08-23 14:30:59
124
原创 ES6-Promise, Async, Await的简单用法
首先我们看一个传统的程序的执行顺序function one() { return "i am one"; } function two() { return "i am two"; } function three() { return "i am three"; } function run() { console.log(one()); console.log(two()); c
2021-08-20 21:39:23
293
原创 Node.js-fs读写文件API
文件系统简单来说就是通过Node来操作系统中的文件使用文件系统，需要先引入fs模块，fs是核心模块，直接引入不需要下载文件的写入同步writeFileSync()将要写入的文件内容完整的读入缓存区，然后一次性的将缓存区中的内容写入都文件中（一次全部传完）writeFileSync(file, data[, options])使用同步的方式读取数据，且读取的内容通过返回值获取。file 要操作的文件的路径data 要写入的数据options 选项，默认为null 也可直接传.
2021-08-20 13:37:16
2122
原创 Node.js-fs 文件系统API
文件系统简单来说就是通过Node来操作系统中的文件使用文件系统，需要先引入fs模块，fs是核心模块，直接引入不需要下载权限位 mode因为 fs 模块需要对文件进行操作，会涉及到操作权限的问题，所以需要先清楚文件权限是什么，都有哪些权限。文件权限表：权限分配文件所有者文件所属组其他用户权限项读写执行读写执行读写执行字符表示rwxrwxrwx数字表示421421421在上面表格中，我们可.
2021-08-20 12:36:32
359
原创 Node.js-Buffer缓冲区
在 Node.js 中，Buffer 类是随 Node 内核一起发布的核心库。Buffer 库为 Node.js 带来了一种存储原始数据的方法，可以让 Node.js 处理二进制数据，每当需要在 Node.js 中处理I/O操作中移动的数据时，就有可能使用 Buffer 库。原始数据存储在 Buffer 类的实例中。一个 Buffer 类似于一个整数数组，但它对应于 V8 堆内存之外的一块原始内存。JavaScript 语言自身只有字符串数据类型，没有二进制数据类型。但视频、音频、等文件都是以二进制来.
2021-08-20 12:35:14
153
原创 Node.js-NPM
CommonJS包规范是理论，NPM是其中一种实践对于Node而言，NPM帮助其完成了第三方模块的发布、安装和依赖等。借助NPM，Node与第三方模块之间形成了很好的一个生态系统NPM命令：npm -v查看版本npm帮助说明npm search 包名搜索模块包npm install / i 包名在当前目录安装包npm install 包名 -g全局模式安装包（全局安装的包一般都是一些工具）npm remove / r 包名..
2021-08-20 12:34:34
89
原创 Node.js-CommonJS规范
CommonJS的介绍CommonJS：是Node.js使用的模块化规范。也就是说，Node.js就是基于CommonJS这种模块化规范来编写的。在 CommonJS 中，每个文件都可以当作一个模块：在服务器端：模块的加载是运行时同步加载的。在浏览器端: 模块需要提前编译打包处理。首先，既然同步的，很容易引起阻塞；其次，浏览器不认识require语法，因此，需要提前编译打包。验证模块内变量都是局部变量在node中有一个全局对象 global，它的作用和网页中window类似
2021-08-20 12:33:51
331
原创 Node.js-模块化
网站越来越复杂，js代码、js文件越来越多，就会出现一些问题：文件依赖全局污染、命名冲突程序模块化包括：日期模块数学计算模块日志模块登录认证模块报表展示模块等所有这些模块共同组成了程序软件系统。一次编写，多次使用，才是提高效率的核心。什么是模块化？概念：将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并组合在一起模块的内部数据、实现是私有的，只是向外暴露一些接口（方法）与外部其他模块通信。最早的时候，我们会把所有的代码都写在一个js
2021-08-20 12:32:14
99
原创 Node.js-介绍
什么是Node？简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动、非阻塞式I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。Node可以在后台来编写服务Node编写服务器的都是单线程的服务器进程：就是一个一个的工作计划（工厂中的车间）线程：是计算机最小的运算单位（工
2021-08-20 12:30:23
288
原创 【字节跳动青训营】- 如何写好JS？
各司其职HTML/CSS/JS各司其职应当避免不必要的由JS直接操作样式可以用class来表示状态纯展示类交互寻求零JS方案（可以用CSS实现）例如：实现一个网页的“夜间模式”方法一：const btn = document.getElementById('modeBtn');btn.addEventListener('click', (e) => { const body = document.body; if(e.target.innerHTML ==
2021-08-19 15:17:08
751
3
原创 【字节跳动青训营】- css布局
常见布局方式一、静态布局（Static Layout）既传统web设计 就是不管浏览器尺寸多少，网页布局就按当时写代码的布局来布置;块级元素：每个块级元素会在上一个元素下面另起一行，他们会被设置好的margin分离。块级元素是垂直组织的。内联元素：不会另起一行，只要在其父级块级元素的宽度内有足够的空间，他们与其他内联元素被安排在同一行。如果空间不够，溢出的文本或元素会转移到新的一行**1. 优点：**一般采用css2之前的写法，不存在浏览器兼容性。布局简单。**2. 缺点：**移动端和p
2021-08-17 12:28:29
890
原创 【字节跳动青训营】- HTML
HTML简介HTML（HyperText Markup Language，超文本标记语言），用于构建网页基本结构及其内容的标记语言超文本：文本中包含只想其他文本的链接标记语言：将文本以及文本相关的其他信息结合起来，展现出关于文档结构，如：HTML、XML、KML、MarkdownHTML结构<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" />
2021-08-17 10:34:57
1702
原创 ES6-迭代器和生成器
迭代器 iterator迭代从一个数据集合中按照一定的顺序，不断的取出数据的过程迭代与遍历的区别迭代强调的是依次取出，不能确定取出的有多少，也不能保证把数据全部取完迭代器对迭代过程的封装，通常为对象，不同的语言中，表现出来的迭代形式不一样特点迭代器有得到下一个数据的能力判断是否有后续数据的能力数组存储的数据是有限的，迭代器只关心下一个迭代模式一种设计模式，用于统一迭代的过程，并且规范迭代器的规格js中的迭代器js规定
2021-08-13 11:06:47
127
原创 ES6-基本对象的定义
对象（object）是 JavaScript 最重要的数据结构。ES6 对它进行了重大升级<script> let title = "ES6从入门到学会"; let price = 25; let publish = "小马出版社"; let book = { title, //等同于title: title price: price, publish, toS.
2021-08-12 19:43:36
512
原创 ES6-类class
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。静态方法：不会被实例继承，而是直接通过类来调用<script> class peopler { constructor(name, age) { this.name = name; this.age = age; } show() { console.lo
2021-08-12 19:42:03
153
原创 ES6-箭头函数
箭头函数提供了一种更加简洁的函数书写方式参数 => 函数体基本用法var f = v => v;//等价于var f = function(a){ return a;}f(1); //1当箭头函数没有参数或者有多个参数，要用 () 括起来。var f = (a,b) => a+b;f(6,2); //8当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。var
2021-08-12 19:40:12
149
原创 ES6-...运算符
可变长参数定义函数时，可以将参数指定为可变数组 function sum(...args) { let result = 0; args.forEach((val) => { result += val; }); return result; } console.log(sum(1, 2, 3)); // 6 console.log(sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));
2021-08-12 19:39:31
195
原创 ES6-数组循环(for...of)
ES 5for…in作用：遍历数组的所有属性ES 6for…of作用：只遍历数组的值for-of 可以用来遍历的类型：for-of 循环用来遍历数据—-例如数组中的值for-of 循环不仅支持数组，还支持大多数类数组对象for-of 循环也支持字符串遍历，它将字符串视为一系列的 Unicode 字符来进行遍历它同样支持 Map 和 Set 对象遍历 let list = [10, 20, 30]; Array.prototype
2021-08-12 19:38:40
884
原创 ES6-变量的解构赋值
解构赋值：ES6 允许我们，按照一一对应的方式，从数组或者对象中提取值，再将提取出来的值赋值给变量。解构：分解数据结构；赋值：给变量赋值。解构赋值在实际开发中可以大量减少我们的代码量，并且让程序结构更清晰。数组的解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。基本用法从数组中提取值，按照对应位置，对变量赋值。 let [a, b, c] = [10, 20, 30]; a // 10 b // 20 c
2021-08-12 19:32:03
285
原创 ES6-Symbol新类型
作用：表示独一无二的值，最大的用法是用来定义对象的唯一属性名。ES5对象属性名都是字符串容易造成属性名的冲突。eg:var a = { name: 'lucy'};a.name = 'lili';//这样就会重写属性ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。基本数据类型有6种：Undefined、Null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。这里新添加了一种：Symbol基本用法Symbol函.
2021-08-12 19:30:17
126
原创 ES6-字符串模板
字符串嵌入方式包裹在``中字符串拼接 ${表达式1}${表达式2}${表达式3}字符串模版定义实战演习<script> /* * 字符串嵌入方式 */ let name = "lmx"; let mystr1 = "你好，${name}"; let mystr2 = `你好，${name}!再见`; // console.log(mystr1); //你好，${name}..
2021-08-12 19:28:56
107
原创 ES6-进制的转换
0b:二进制0o:八进制0x:十六进制toString(X)作用：X进制的转换console.log(0b10); //2console.log(0o10); //8console.log(0x10); //16console.log(0b11 === 3); //trueconsole.log(0o10 === 8); //trueconsole.log(0x10 === 16);//truelet num = 10;console.log(num.toSt..
2021-08-12 19:25:43
493
原创 ES6-变量let、const和块级作用域
ES5 中，使用 var 定义全局变量ES6 中，新增了 let 和 const 来定义变量：let：定义局部变量，替代 var。const：定义常量（定义后，不可修改）。1、var：定义全局变量看下面的代码：{ var a = 1;}console.log(a); //这里的 a，指的是 区块 里的 a上方代码是可以输出结果的，输出结果为 1。因为 var 是全局声明的，所以，即使是在区块里声明，但仍然在全局起作用。也就是说：使用 var 声明的变量不具备块级作
2021-08-12 19:13:37
369
原创 JQuery-文档处理
文档处理添加节点内部插入append(content|fn)appendTo(content)作用：将元素添加到指定元素内部的最后 // 1.创建一个节点 var $li = $("<li>新增的li</li>"); // 2.添加节点 $("ul").append($li); $li.appendTo("ul");prepend(content|fn)prependTo(content)作用：将元素添加到指定元素内部的最前面 // 1.创建一个
2021-08-03 19:39:39
79
原创 JQuery-动画效果
事件处理事件绑定eventName(fn);编码效率略高，部分事件JQuery事件没有实现，所以不能添加。（只能用JQuery定义的事件） $("button").click(function () { alert("hello word"); });on(eventName,fn);编码效率略低，所有js事件都可以添加 $("button").on("click", function () { alert("hello word2S"); });注
2021-07-31 19:18:21
194
1
原创 JQuery-css相关方法
csscss(name|pro|[,val|fn])作用：设置/获取css样式逐个设置$("div").css("width", "200px");$("div").css("height", "200px");$("div").css("background", "red");链式设置$("div") .css("width", "200px") .css("height", "200px") .css("background", "blue");批量设置
2021-07-30 19:28:43
71
原创 JQuery-属性相关
什么是属性?属性就是对象身上的变量只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象 )<script> // 1.自定义一个对象 var obj = {}; console.log(obj); // 2.动态给自定义对象添加属性 [obj.name](http://obj.name) = "lmx; // name就是对象obj的一个属性 obj.age = 33; // age就是对象obj的一个属性 console.log
2021-07-30 16:54:21
54
原创 JQuery-选择器
选择器基础选择器名称用法描述ID选择器$(“#id”);获取指定ID的元素类选择器$(“.class”);获取同一类class的元素标签选择器$(“div”);获取同一类标签的所有元素并集选择器$(“div,p,li”);使用逗号分隔，只要符合条件之一就可。交集选择器$(“div.redClass”);获取class为redClass的div元素通配符选择器$("*")获取所有元素层次选择器名称用法描述
2021-07-30 16:11:38
160
原创 JQuery-静态方法
什么是静态方法?静态方法对应的是对象方法,对象方法用实例对象调用,而静态方法用类名调用 <script> // 定义一个类 function AClass() {} // 给函数A添加静态方法 // 直接添加给类的就是静态方法 AClass.staticMethod = function () { alert("静态方法"); }; // 静态方法的调用 AClass.class(); // 给..
2021-07-29 22:51:26
309
原创 JQuery-核心函数
jQuery核心函数jQuery(callback)当DOM加载完成后执行传入的回调函数<script> $(function () { alert("123"); });</script>jQuery([sel,[context]])接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素,并包装成jQuery对象<script> $(function () { // 利用jquery
2021-07-29 22:44:56
90
原创 JQuery-入口函数
JQuery入口函数jQuery与JavaScript加载模式对比在多个入口函数情况下多个window.onload只会执行一次,后面的会覆盖前面的<script> window.onload = function (ev) { alert("hello word1");//不会显示 } window.onload = function (ev) { alert("hello word2");//会显示
2021-07-29 22:09:21
306
原创 jQuery-初识jQuery
看此文章前必须先掌握JavaScriptJQuery 是什么？jQuery 是一款优秀的 JavaScript 库，从命名可以看出 jQuery 最主要的用途是用来做查询（jQuery=js+Query）.在 jQuery 官方 Logo 下方还有一个副标题（write less, do more）, 体现了 jQuery 除了查询以外,还能让我们对 HTML 文档遍历和操作、事件处理、动画以及 Ajax 变得更加简单体验 JQuery原生 JS 设置背景window.on.
2021-07-29 21:45:38
178
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人