全文共6511字/词，阅读大概需要13分钟，太长不看党请直接移步👉「开始优化」部分直接查看优化手段 背景 前段时间公司服务器网络波动，网站访问变慢，一些性能问题也随之暴露了出来。纷纷反馈在这样的弱网条件下，访问新项目时，加载了近1分钟都没加载出来，而访问其他页面顶多也就30-40s。 在网络恢复后，尝试访问了下页面，无缓存首次打开需要等待近11s的时间，最大的资源达到了3.7M... 在对项目做了一些优化处理后，再次无缓存打开可以发现网页几乎是秒开，平均耗时在1s以内 在这里总结记录一下，基本上都是一些
标签在Chrome，Firefox等浏览器下默认是有展开收起行为的，例如下面HTML：
这次实现的效果图如下： 二级菜单.gif 这个二级菜单实现的效果是： 当点击某一个框时，会将已经打开的框的内容收回，再展开现在点击的框的内容。 要如何实现这个效果呢？ 我们可以step by step 首先我们要将整个框架显示出来，即所有框展开的样子，因为其显示/不显示是拿overflow:hidden做的。 但是要注意不要所有的框都拿一种类型的盒子做，因为那样不方便写js代码，毕竟我们之后的操作是点击绿色的框=>使得收起或展开白色的框，所以我们需要为每一个天数+对应课程的框放在一个div父盒子下。然后为其
前言 折叠（Collapse）插件可以很容易地让页面区域折叠起来。如果您想要单独引用该插件的功能，那么您需要引用 collapse.js， bootstrap已经包含了这个插件。 可以直接引用 bootstrap.js 或压缩版的 bootstrap.min.js 折叠（Collapse） 以使用带有属性的链接href或带有属性的按钮data-target。在这两种情况下，data-toggle=”collapse”都是必需的。 单击下面的按钮以通过类更改显示和隐藏另一个元素： .collapse隐藏内容
新手帮助.gif 安装driver.js cnpm install driver.js -s 引入 import Driver from "driver.js" // 引入插件 import "driver.js/dist/driver.min.css" // 引入插件 import steps from "./dd" // 引入步骤 创建一个js文件，用于存放 step的提示, 内容如下 // 通过绑定元素 类名，id名的形式来 执行步骤， 注意第一个对象要写两次。 con
3.当自己处于全部显示的时候，点击其他的展开是，自己内容隐藏，原来的"收起"变为"展开"
在2017年相信ES6已经得到了很大的普及，如果你写过React或者Vue，相信在多年之前就已经体验过ES6的魅力了。言归正传，《深入理解ES6》阅读笔记并不会照搬书上的内容，因为我觉得那很无趣，这些读书笔记会贯穿我自己所积累的知识和理解，而今天要给大家写一写babel。
1.修改控制台输出内容样式 2.重写控制台输出格式(追加出错日期) 3.以表格的形式显示控制台输出内容 4.如何统计一个函数在程序中被调用的总次数 5.以便于阅读的形式输出打印内容 6.统计程序执行的时间 7.分组显示控制台输出内容 8.获取当前代码在堆栈中的调用路径 9.清除控制台显示的所有内容 10.断言输出
.xControl { font-size: 15px; font-weight: bold; padding: 5px 0; box-shadow:0 0 20px #d0d0d0;/* 阴影 */ background-color: #FFFFFF;/* 背景颜色 */ border-bottom: 2px solid #e74c3c;/* 边 */ transition: all 0.1s linear; text-align: center; border-radius: 0 0 5% 5%; border-radius:4px; } .xControl a{ text-decoration: none; display: block; }
本文介绍了Chrome开发者工具的一些小技巧，包括快速编辑HTML元素、快速定位行和列、展开所有子节点、多个光标编辑、触发伪类以及使用$0获取当前元素等。这些技巧可以帮助开发者更高效地调试和优化前端代码。
Chrome 开发者工具是一款Web开发者们公认的优秀的前端调试工具,本身功能强大，有了这个工具,你可以做很多有趣的事情。
义了一个currentNodeKey来存储当前选中节点的 key。每次点击节点时，我们首先检查是否已经有一个节点被选中，如果是，则通过this.$refs.tree.setCurrentKey(null)取消选中它。然后，我们更新currentNodeKey为新选中的节点 key。
ES6引入了很多新的语言特性和能力，这篇文章仅快速地做一个概览。包括let、解构、箭头函数、模块化、Spread运算符 等。ES6还有很多更深入的内容，有时间再单独总结。大部分的ES6新特性，最新版的Chrome浏览器都原生支持，所以下面大多数代码不需要使用Babel转码器即可直接运行。但是模块化的import和export则暂未支持，只能通过Babel经过webpack等工具打包后使用。
jQuery Mobile是jQuery 在手机上和平板设备上的版本。它不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。
作者：陆宣羽 CODING 技术布道师，主要负责传播 CODING 技术实践及愿景理念，宣讲 CODING 团队在研发过程中所运用的前沿技术 互联网时代，个人隐私安全问题正越来越受到重视。比如，在跟朋友聊天时，会经常因为担心聊天内容被无良公司从后台窥视而避免输入私密内容。面对这种情况，会有程序员建议自己搭一个聊天室以确保自己的隐私安全。 通常情况下，采取这种措施，你需要： ①自己架设一台服务器（软件+硬件），或者，在云时代，建立一台云服务器。 ②向域名提供商购买一个域名。 ③配置防火墙等安全条例以防止黑客
Bootstrap是一个非常不错的前端框架，但是在实际的使用过程中还需要根据实际的需要再微调整，比如我们默认使用Bootstrap框架下拉菜单的时候主导航是无法点击打开页面的，以及下拉展开需要单击主菜单，如果我们需要实现主菜单可以点击打开，而且下拉菜单实现悬停下拉的效果则需要进行调整JS脚本。
Firefox调试JS的功能真的很不错，推荐一下！ 在页面上点击右键，再点击“查看元素”，如图：
BootStrap 目前已经出了 4 个版本，每个版本都有对应的官网教程，先来看看不同版本里的宣传语：
HTML5 引入了很多新的标签，其中就包括 和 标签。使用这两个标签，我们可以很方便地实现内容的展开和折叠功能。下面我们来详细介绍一下它们的用法。
小技巧：不同类型的数据从 console 中打印出的颜色也不相同，可以借此判断数据类型
事情是这样的，项目最近有个需求。服务器有个图片空间，说白了就是个文件夹。文件夹的结构大家都知道，一层一层的。然后需要在前端以树形展示。
这是「进击的Coder」的第 592 篇技术分享 作者：崔庆才 “注：本文来自《Python3网络爬虫开发实战（第二版）》一书。 ” 现在越来越多的网站也已经应用了这些技术对其数据接口进行了保护，在做爬虫时如果我们遇到了这种情况，我们可能就不得不硬着头皮来去想方设法找出其中隐含的关键逻辑了，这个过程我们可以称之为 JavaScript 逆向。 既然我们要做 JavaScript 逆向，那少不了要用到浏览器的开发者工具，因为网页是在浏览器中加载的，所以多数的调试过程也是在浏览器中完成的。 工欲善其事，必先利
<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.js"></script> </head> <body> 点击我进行展开，再次点击我进行折叠。第 1 部分 Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. 点击我进行展开，再次点击我进行折叠。第 2 部分 Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. 点击我进行展开，再次点击我进行折叠。第 3 部分 Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </body> </html>
作者： M.S-Group.皮皮熊，M.S-Group组织主要成员之一，数通行业老兵，精通传统数通网络技术，SDN/NFV新技术的狂热拥护者！
目前使用的 next 版本是 5.1.4 ，文章左侧的目录一直不能跳转也不能展开，按网上的办法一直没法解决，今天自己琢磨了一阵总算搞定了。
在前不久的WWC22中，builder.io的CTO 「miško hevery」（同时也是Angular/AngularJS的发明者）发表了一段充满想象力的演讲。
自动邀请通常是在访客访问网站上的特定页面或访问时间达到一定时长后，使用 JavaScript 代码自动弹出邀请对话框。
貌似在面试中，你如何设计一个 react/vue 组件，貌似已经是司空见惯的问题了。本文不是理论片，更多的是自己的一步步思考和实践。文中会有很多笔者的思考过程，欢迎评论区多多交流和讨论。
上篇文章(webpack+vue项目实战（一,搭建运行环境和相关配置）)搭建了好了基本的一个项目目录，安好好了一些要用到的依赖，以及把项目跑了起来。接下来，我们就进行第二步的操作，第二步就是做好一个开发系统的主页面，这个页面主要也就是一个侧边栏，通过侧边栏的各个选项来进行操作（切换各个组件）。比如回款管理，订单管理，物流管理等等的操作。
修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改博客根目录的_config.yml
问题1 选中input 部分内容， 可以使用 selectionStart、 document.selection、 createRange、 createTextRange 等 API 来实现，具体不在此处展开说明。
以前写过一篇 collapse 的简单应用： Bootstrap.Collapse
可以从这个网站[1]下载个好看的图标,命名为default_icon字段对应的名称
这个bug其实很早就存在了，只不过一直没管它（Valine 官方于 v1.4.0~1.4.4（2020-04-11）版本修复），这篇笔记存在的目的在于那些仍在使用低于该版本需要单独修复该bug的同学（比方说还在用v1.3.10的我/doge）就需要手动修复该bug来确保点击折叠评论内链接直接跳转的问题..
Trigger.js onClick: function(e) { var me = this, handler = !me.getDisabled() && me.getHandler(), field = me.getField(), focusEl; ... // handler = 'onExpandTap' 触发combobox展开按钮点击处理函数 if (handler) { Ext.callback(handler, me.get
我们在开发web应用的时候经常美工会设计一些样式比较特殊的图表，这对于前端开发人员来说会增加开发量，如下图就是笔者开发过程中要求制作的带渐变色效果的柱状图：
在做管理系统时经常会用到点击展开，再次点击关闭的菜单效果，通常有很多的插件来实现，但是效果实现了，由于引入了大量的外部文件，导致项目本来内容就多，变得更多了，不利于项目的代码管理。下面我来介绍一个简单的方法来实现这种效果。
change事件的现象是，输入框失去焦点的时候才会触发。如果文本框内容超出高度然后用户还在输入的时候，体验就会很不好。而且如果用户一直不点击别的地方让textarea失去焦点，这个事件就永远不会触发，文本框的高度就不变。
VSCode是微软家一个非常轻量化的编辑器，体量虽轻，但是却有异常强大的功能。原因在于VSCode许多强大功能都是基于插件实现的，IDE只提供一个最基本的框架和基本功能，我们需要使用插件来丰富和扩展它的功能。
Awescnb 是一款基于 vite 和 webpack5 ，构建、安装、切换的博客园皮肤。界面简单干净，集成到 Cnblog 步骤也十分简便，只需要几步就能在你的博客园快速安装皮肤。
2）如何调用mutations.js中定义的setLeftAsideState为全局参数赋值？ 见一下示例：
google developers 官方文档: https://developers.google.com/web/tools/chrome-devtools/
在进行web前端开发中，会有一些关于介绍的页面，在这些页面里有类似名词解释的，如果直接将解释和名词放在页面上就会使整个页面显得东西凌乱，且不易于查看自己需要的名词，这时可以用到折叠的方式来解决。即点击名词，将名词的解释展开，再次点击名词，名词解释合上。下面我来说说通过jquery来实现折叠效果，来看代码：
最近在写一个商品分类管理的功能，本来想用layui的树形组件来写，但发现layui原生的tree只能展示title，而分类的其他字段无法展示，这就有点不适用了，无意中看到一位大神自定义写的一个树形表格组件，正好满足我的要求，特此将使用方法以及其中遇到的一些坑记录下来。。。
大家好，我是一个闲着没事热衷于重复造轮子的不知名前端，今天给大家带来的是一个代码在线编辑预览工具的实现介绍，目前这类工具使用很广泛，常见于各种文档网站及代码分享场景，相关工具也比较多，如codepen、jsrun、codesandbox、jsbin、plnkr、jsfiddle等，这些工具大体分两类，一类可以自由添加多个文件，比较像我们平常使用的编辑器，另一类固定只能单独编辑html、js、css，第二类比较常见，对于demo场景来说其实已经够用，当然，说的只是表象，底层实现方式可能还是各有千秋的。
了解使用IBM Blockchain Platform的VSCode扩展来简化开发，测试和部署智能合约的过程。完成本教程后，你将了解如何使用VSCode在本地Hyperledger Fabric网络上快速开发，演示和部署区块链应用程序。本教程假设你对Hyperledger Fabric有一些基本的了解。
本文不做任何编辑器的比较，只是我本人日常使用 vscode 进行开发，并且比较喜欢折腾 vscode ，会到处找这一些好玩的插件，于是越攒越多，今天给大家推荐一下我收藏的 60 多个 vscode 插件，据说插件装太多，编辑器会变卡，可能是我的电脑配置还顶得住，目前并没有感觉到卡卡的。
usr/themes/handsome/component/footer.php删代码至如图所示
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
