- 博客(44)
- 资源 (40)
- 收藏
- 关注
RSS订阅原创 一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载？
一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载？1、使用 Sprites 图片技术它将一个页面涉及到的所有零星图片都包含到一张大图中去，然后利用 CSS 技术展现出来。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了，可以减少了整个网页的图片大小，并且利用 CSS Sprites 能很好地减少网页的 http 请求，从而大大的提高页面的性能。2、压缩文本和图片压缩技术如 gzip 可以有效减少页面加载的时间。压缩率都可以在大小 70%左右。虽然文本压缩用
2021-05-28 22:49:43
8701
2
原创 前端如何优化网站性能？
前端如何优化网站性能？1、减少HTTP的请求数量在浏览器与服务器进行通信的时候，主要是通过HTTP进行通信，浏览器与服务器需要经过三次握手，每次握手需要花费大量的时间，而且不同浏览器对资源文件并发请求的数量有限（不同浏览器允许的并发数），一旦HTTP请求数量达到一定的数量，资源请求就存在等待状态，这是很致命的，因此减少HTTP的请求数量可以很大程度上对网站进行优化。(一）、CSS Sprites CSS Sprites俗称精灵图，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通
2021-05-28 22:33:39
982
1
原创 【计算机专业】岗位方向细分与发展提升建议
【计算机专业】岗位方向细分与发展建议很多刚接触计算机或者编程语言的小伙伴都会有同样的一些问题，计算机都有哪些方向和岗位呢，他们的要求是什么呢？前景怎么样？我到底适合什么？今天我们就来好好聊一聊这个问题废话不多说 见下图一、开发方向开发方向：学习现有的技术、运用已有的技术实现需求和解决问题，重点在于实现和解决，非常强调实践能力，在面试的时候能有拿的出手的项目往往能够事半功倍开发方向的现状：跨度大，涵盖大专转行到本硕985毕业生中小型公司更加要求编程技能的熟练，直接上手的那种大型公司
2021-05-23 15:03:05
4051
32
原创 怎样做好前端的交互
怎样做好前端的交互做好交互需要时刻注意的四大概念: 行为，状态，数据，效果。行为:用户在使用程序的所发出的动作，当用户在做动作的时候js会有对应的事件对应的钩子产生，需要特别注意。状态:指页面元素在用户发生动作后，页面元素不再是发生动作前的页面元素了，而是附带了状态的页面元素，是赋值或赋能过的元素。数据:在用户发出动作后与给后端发送请求获取到的结果。效果:当用户进行各种各样的行为，改变了页面元素的状态，发送请求后将数据进行展示，进而达到用户看到的界面的变化，称为效果...
2021-05-22 18:05:28
758
1
原创 解决VScode在保存less文件时，自动生成对应的css文件以及安装Easy less之后，计算式子不显示结果的问题
VScode在保存less文件时，自动生成对应的css文件下载安装插件：Easy LESS
2021-05-19 11:32:28
1628
7
原创 移动开发—Less基础与安装
移动开发—Less基础与安装一、维护CSS的弊端CSS是一门非程序式语言、没有变量、函数、SCOPE（作用域）等概念CSS需要书写大量看似没有逻辑的代码、CSS的冗余度是比较高的不方便维护扩展、不利于复用CSS没有很好地计算能力对于非前端开发工程师来讲、往往会因为缺少CSS编写经验而很难写出组织良好且易于维护CSS代码项目二、Less介绍Less（Leaner Style Sheets的缩写）是一门CSS扩展语言，也称为CSS预处理器它扩展了 CSS 语言，增加了变量、Mixin、函数等
2021-05-19 10:49:26
200
6
原创 移动开发—媒体查询(Media Query)
移动开发—媒体查询(Media Query)1、使用@media，可以针对不同的媒体类型定义不同的样式2、@media可以针对不同的屏幕尺寸设置不同的样式3、当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面语法规范：一、mediatype查询类型可以将不同的设备划分成不同的类型，称为媒体类型二、关键字语法规范关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件三、媒体特性每种媒体类型都具有各自不同的特性，根据不同的媒体类型设置不同的展示风格，我们暂且了
2021-05-19 10:12:20
574
1
原创 移动开发—详解flex布局之携程网首页案例制作
移动开发—详解flex布局之携程网首页案例制作学习内容一、flex的布局原理二、flex布局父项常见的属性三、flex布局子项常见的属性四、携程网首页案例制作一、flex的布局原理总结flex布局的原理：就是通过给父盒子添加flex属性，来控制盒子的位置和排列顺序二、flex布局父项常见的属性（一）、flex-direction设置主轴的方向主轴与侧轴在flex中，是分为主轴和侧轴两个方向：同样的叫法有：行和列、x轴和y轴默认主轴方向就是x轴方向，水平向右默认侧轴方向就是y轴
2021-05-18 14:54:26
1001
8
原创 DPG图片压缩技术和webp图片格式
DPG图片压缩技术和webp图片格式一、DPG图片压缩技术京东自主研发推出的DPG图片压缩技术，经测试该技术，可以直接节省用户近50%的浏览量，极大地提升了用户的网页打开的速度。能够兼容JPEG，实现全平台，全部浏览器的兼容支持，经过内部和外部上万张图片的人眼浏览测试后发现，压缩后的图片的webp的清晰度对比没有差距。二、webp图片格式谷歌开发的一种旨在加快图片加载速度的图片格式，图片的压缩体积大概只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。...
2021-05-17 08:32:34
1002
1
原创 移动端开发——京东首页制作（流式布局）
移动端开发——京东首页制作（流式布局）项目准备初始化基本文件夹创建index.html设置视口引入基本公共样式引入自己的css样<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
2021-05-17 08:18:20
1300
4
原创 移动端开发—流式布局
移动端开发选择一、单独制作移动端页面(主流)通常情况下，网址域名前加m(mobile)可以打开移动端，通过判断设备，如果是移动端设备打开，则跳转到移动端页面二、响应式页面兼容PC端移动端(其次)通过改变屏幕的宽度来改变屏幕的样式制作麻烦，需要花很大的精力去调兼容性问题...
2021-05-16 16:23:31
318
1
原创 JavaScript学习（七十五）—图解浅拷贝和深拷贝
JavaScript学习（七十五）—图解浅拷贝和深拷贝浅拷贝浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用 Object.assign(target, ...sources);ES6新增方法可以浅拷贝深拷贝
2021-05-16 10:51:57
376
7
原创 JavaScript学习（七十四）—递归函数
JavaScript学习（七十四）—递归函数一、什么是递归？如果一个函数可以在内部调用其本身，那么这个函数就是递归函数，简单地说，函数内部自己调用自己,这个函数就是递归函数由于递归很容易发生“栈溢出”错误，所以必须要加退出条件return递归函数的作用和循环效果一样...
2021-05-16 09:53:22
340
1
原创 JavaScript学习（七十三）—高阶函数
JavaScript学习（七十三）—高阶函数高阶函数：高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出，函数也是一种数据类型，同样可以作为参数，传递给另外一个参数使用，最典型的就是回调函数...
2021-05-15 15:29:37
237
2
原创 JavaScript学习（七十二）—严格模式
JavaScript学习（七十二）—严格模式JavaScript除了提供正常模式外，还提供了严格模式，ES5的严格模式是采用具有限制性JavaScript变体的一种方式，即在严格条件下运行JS代码， 严格模式对正常的JavaScript语义做了一些修改1、消除了JavaScript语法的一些不合理性、不严谨之处、减少了一些怪异的行为2、消除了代码的一些不安全之处，保证代码的运行安全3、提高编译器效率，增加运行的速度4、禁用了ECMAScript的未来版本可能会定义的一些语法，为未来新版本Ja
2021-05-15 14:53:47
239
原创 JavaScript学习（七十一）—call、apply、bind学习总结
一、call方法call方法调用一个对象，简单的理解为调用函数的方式，但是它可以改变函数的this指向二、
2021-05-15 11:43:03
287
原创 JavaScript学习（七十）—函数中this的指向问题
JavaScript学习（七十）—函数中this的指向问题一、这些this的指向，是当我们调用函数的时候确定的，调用方式的不同决定了this的指向不同，一般指向我们的调用者二、改变函数内部this指向JavaScript为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部的this指向问题，常用的方法有bind（）、call（）、apply（）...
2021-05-15 10:45:34
245
2
原创 ES6学习（十）—async 函数
ES6学习（十）—async 函数ES2017 标准引入了 async 函数，使得异步操作变得更加方便。概念：真正意义上去解决异步回调的问题，同步流程表达异步操作本质： Generator 函数的语法糖。语法：async function foo(){ await 异步操作 await 异步操作}foo();特点：1、不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行2、返回的总是Promise对象，可以用then方法进行
2021-05-14 14:34:44
207
1
原创 ES6学习（九）—Generator 函数的语法
ES6学习（九）—Generator 函数的语法Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。Generator函数是一个状态机，内部封装了不同状态的数据用来生成遍历器对象，可暂停函数(惰性请求),yield可暂停，next方法可以启动，每次返回的是yield后的表达式结果Generator函数的特点：function函数与函数名之间有一个星号内部用yield表达式来定义不同的状态generator函数返回的是指针对象 而不
2021-05-14 14:05:53
208
2
原创 ES6学习（八）—Promise对象 超鸡重要
ES6学习（八）—Promise对象，超鸡重要 必须要会Promise对象：代表了未来某个将要发生的事情(通常是一个异步操作)有了Promise对象，可以将异步操作以同步的流程表达出来，避免了层层嵌套的回调函数(俗称’回调地狱’)ES6的Promise是一个构造函数，用来生成promise实例一、promise的三种状态pending：初始化状态fullfilled：成功状态rejected：失败状态二、应用使用promise实现超时处理使用promise封装处理ajax
2021-05-14 10:23:10
265
4
原创 ES6学习（七）—Set 和 Map 数据结构
ES6学习（七）—Set 和 Map 数据结构 挑重点 文章只列举了一部分 完整版请看阮一峰ES6入门教程 点我查看阮一峰ES6入门教程一、ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。四个操作方法：add(Value):添加某个值，返回 Set 结构本身。delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。has(value)：返回一个布尔值，表示该值是否为Set的成员。clear()：清除所有成员，没有返回值。
2021-05-13 15:25:34
235
1
原创 ES6学习（六）—函数的扩展
ES6学习（六）—函数 挑重点 文章只列举了一部分 完整版请看阮一峰ES6入门教程 点我查看阮一峰ES6入门教程一、函数参数的默认值二、rest 参数ES6 引入 rest 参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。三、箭头函数ES6 允许使用“箭头”（=>）定义函数。箭头函数有几个使用注意点。（1）箭头函数没有自己的this对象。（2）不可
2021-05-13 13:02:48
253
1
原创 ES6学习（五）—数组的扩展
ES6学习（五）—数组的扩展 挑重点 文章只列举了一部分 完整版请看阮一峰ES6入门教程 点我查看阮一峰ES6入门教程一、扩展运算符扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。...
2021-05-13 11:24:34
225
1
原创 ES6学习（四）—字符串的新增方法
ES6学习（四）—字符串的新增方法 挑重点 文章只列举了一部分 完整版请看阮一峰ES6入门教程 点我查看阮一峰ES6入门教程实例方法：includes(), startsWith(), endsWith()传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。includes()：返回布尔值，表示是否找到了参数字符串。startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。end
2021-05-12 23:51:58
211
1
原创 ES6学习（三）—字符串的扩展
ES6学习（三）—字符串的扩展挑重点 文章只列举了一部分 完整版请看阮一峰ES6入门教程 点我查看阮一峰ES6入门教程
2021-05-12 18:30:04
193
1
原创 ES6学习（二）—变量的解构赋值
ES6学习（二）—变量的解构赋值文章只列举了一部分 完整版请看阮一峰ES6入门教程 点我查看阮一峰ES6入门教程一、数组的解构赋值二、对象解构赋值三、函数参数的解构赋值
2021-05-12 11:23:54
190
2
原创 ES6学习（一）— Babel转码器的使用和配置
JavaScript学习（七十）—ES6之 Babel转码器** Babel转码器**Babel是一个广泛使用的ES6转码器，可以将ES6代码转化为ES5代码从而在老版本的浏览器进行。这意味着，你可以使用ES6的方式编写程序，又不用担心现有的环境是否支持...
2021-05-11 14:38:40
527
2
原创 解决VScode安装Babel转码器报错：无法将“cnpm“项识别为cmdlet\函数、脚本文件或可运行程序的名称的问题
解决VScode安装Babel转码器报错：无法将"cnpm"项识别为cmdlet\函数、脚本文件或可运行程序的名称的问题报错结果如下：解决方案第一步：安装npm点我安装npm第二步：在cmd中输入以下命令 出现下面图片中的内容就说明已经安装成功了。第三步：打开Vscode中的项目终端:输入该命令：npm install --save-dev @babel/core（如果你之前VScode没有关掉记得关闭之后再重启一下执行此命令不然还是会显示报错）奥利给 安装成功 撒花撒花
2021-05-11 12:33:51
1113
3
原创 如何在PC端快速下载B站视频，不是唧唧Down，学不会来打我！！！
如何在PC端快速下载b站视频，亲测可用哔哩哔哩如今已经从开始小众网站，慢慢进入了越来越多的人的视野和生活中。现在除了看动漫，我们还可以在上面看纪录片、电影、连续剧、科普、以及各种学习资源等！百度了几种方法，感觉都不太好，今天，推荐一个超级好用的在PC端快速下载b站视频的方法，不是唧唧Down，学不会来打我！！步骤一：安装星愿浏览器...
2021-05-10 19:45:47
7318
17
原创 jQuery学习（四）— jQuery的ready事件和原生JS的load事件的区别
jQuery学习（四）— jQuery的ready事件和原生JS的load事件的区别jQuery的ready事件和原生JS的load事件的区别：页面中可以有多个ready事件，而load事件会出现覆盖现象ready事件的执行时间早于load事件，因为ready事件需要在页面的DOM树渲染完毕后马上触发，而load事件需要将页面中的所有元素加载完毕后触发，如需要等页面所有的图片都正常显示后再触发。...
2021-05-10 15:50:54
478
原创 jQuery学习（三）—jQuery使用步骤以及注意事项
jQuery学习（三）—jQuery使用步骤以及注意事项jQuery的使用步骤：第一步：利用script标签将jQuery文件引入到当前的HTML中第二步：在文档中插入一个新的script标签在该标签中书写jQuery代码注意事项编辑jQuery代码的script标签的位置可以是任意的，但是通常将它放在被操作元素的后面如果要将jQuery代码放在被操作元素的前面，此时需要编辑入口函数1)方式1：$(document).ready(function(){jQuery代码});
2021-05-10 15:14:36
614
原创 JavaScript学习（六十八）—表单校验案例
七）、(一)、如何获取页面的元素—利用id获取格式：var 变量名称 =document.getElementById('要获取的元素的id的值');(二)、如何获取或者设置页面中元素里面的内容a)获取格式：元素.innerHTML;b)设置格式：元素.innerHTML =值;(三)、如何获取或者设置页面中表单元素的值a)获取值：表单元素.value;b)设置值：表单元素.value=值;(四)、focus事件： 当失去焦点时触发(五)、blur事件：当失去焦点时触发(六)、
2021-05-10 09:09:44
356
1
原创 JavaScript学习（六十七）—正则表达式学习总结
JavaScript学习（六十七）—正则表达式知识点总结学习内容一、什么是正则表达式二、如何创建正则表达式三、正则表达式的常用方法四、正则表达式的匹配模式五、 字符串对象中和正则表达式结合使用的方法六、正则表达式常用的修饰符一、什么是正则表达式正则表达式也称为规则表达式，就是普通字符和特殊字符构成的一个表达式作用就是用来检验字符串是否符合格式要求，或者在字符串中查找是否有符合格式要求的字符串。二、如何创建正则表达式利用构造方法创建：var 正则表达式的名称=new RegExp
2021-05-09 23:24:19
1588
23
原创 JavaScript学习（六十六）—字符串对象常用的属性和方法总结以及数组元素的排序问题
JavaScript学习（六十六）—字符串对象常用的属性和方法总结以及数组元素的排序问题学习内容一、数组去重问题二、二维数组的定义三、二维数组的元素操作四、二维数组的遍历五、关联数组六、字符串对象七、字符串常用的属性和方法八、数组元素的排序九、沙场练兵一、数组去重问题二、二维数组的定义与元素操作二维数组的定义格式：var 数组名称=[[值1，值2，值3]，[值1，值2，值3],[值1，值2，值3]....];一维数组的图解二维数组的图解三、二维数组的元素操作1
2021-05-09 17:11:00
409
3
原创 2021年5月9日，是第108个母亲节，祝福所有的母亲节日快乐
2021年5月9日，是第108个母亲节，祝福所有的母亲节日快乐2021年5月9日，是第108个母亲节，放下你手里的所有事情，哪怕是几分钟，给妈妈打一个电话吧，分享一下你最近的酸甜苦辣。 或许你忙到没有准备礼物，或许你不擅表达说不出肉麻的话，但只是简短地唠唠家常就是给她们最好的礼物了。用一通电话告诉她们你的爱意，用一段家常告诉她们 你的想念。去感恩这个赐予我们生命的人，不要忘了，她曾经也是美少女战士呢~~~~小时候 您总对我说“陌生人给的东西不要吃，陌生人说的话不要信。”“生病了必须跟我说，去
2021-05-08 19:44:50
1990
11
原创 JavaScript学习（六十五）—数组知识点总结
JavaScript学习（六十八）—数组学习内容一、什么是数组二、数组的分类三、数组的创建方式四、数组元素五、数组的操作一、什么是数组数组：所谓数组就是指内存中开辟出来的用来存储大量的数据的连续的存储空间二、数组的分类从下标的个数分类：一维数组、二维数组、多维数组从下标的类型分：索引型数组(下标为数值型)、关联数组(下标为字符型)三、数组的创建方式方式1：利用构造方法创建 var 数组名称=new Array(值,值,...);方式2：利用字面
2021-05-08 16:13:52
988
5
原创 人总要彻底的绝望一次 才能脱胎换骨涅槃重生
人总要彻底的绝望一次 才能脱胎换骨 涅槃重生这世界那么大，值得我们去奋斗去热爱。我们都在追求幸福，以及想要的自由。不存在彻底的失望，就像不存在彻底的绝望一样，我也曾是一个无可救药的人，但是只要去努力奋斗，我们终将上岸，阳光万里。我不确定未来还能走多远，但已经不缺少从头再来的勇气，灵感所致，把这些话写下来，希望我们都能审视、剖析、反省自己，知道自己该做什么，要做什么，要怎么做，才能更加坚定自己的目标。至此，共勉 ——来自机械科学与工程学院一位学长的投稿，献给正在努力奋斗的你们以前我时
2021-05-07 15:18:26
2626
4
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人