挺久以前就有网友给我的 GitHub Pages 博客模板提 Issue，说希望能增加 CDN 用于加速静态资源的加载，由于懒，一直没有动。...改造前加载 耗时最长的两个请求时间达到了 12 秒左右，而且很多资源的加载时间在 1 秒以上，页面完成加载时间长达 15 秒多……估计一般的访客是没这个耐心等待的。...改造后的效果可以打开 https://mazhuang.org 体验。...其中 2 和 3 我不想考虑，还是期望只在 GitHub 上管理博客，所以 1 和 4 是优化方向，本文对应的就是 4 的部分。...； 可以访问 https://purge.jsdelivr.net/gh/mzlogin/mzlogin.github.io@1.2.0/assets/js/main.js 来清除指定文件的缓存；（将引用的
挺久以前就有网友给我的 GitHub Pages 博客模板提 Issue，说希望能增加 CDN 用于加速静态资源的加载，由于懒，一直没有动。...可以看到耗时最长的两个请求时间达到了 12 秒左右，而且很多资源的加载时间在 1 秒以上，页面完成加载时间长达 15 秒多……估计一般的访客是没这个耐心等待的。...改造后加载 image.png 这样一对比效果还是很明显的。...改造后的效果可以打开 https://mazhuang.org 体验。...； 可以访问 https://purge.jsdelivr.net/gh/mzlogin/mzlogin.github.io@1.2.0/assets/js/main.js 来清除指定文件的缓存；（将引用的
既然能跨域，我们直接双击打开1.html，发现还是可以，这个例子双击打开和服务器打开都能达到目的 2.2 父调用子页面的js或者反过来调用 父调子：还是基于前面的条件 var i = document.querySelector...，有效果的。...data from html1', '*'); } 子窗口：2.html window.onmessage = function (e) { console.log(e.data) } 可以跨域，所以能直接双击打开可以看见效果...非同域的两个tab页面通信 也就是两个毫无关系的tab页面通信（比如我打开一个baidu和一个github），怎么通？ 当然baidu和github能不能通信，我们不知道，得问他们家的开发。...环引用？怎么做到特别容易的深拷？
1.首先将css文件引用放在head标签中，js文件引用放在页面代码的末尾； 2.分别合并css文件引用和js文件引用的请求（具体方法请参考：网页优化系列一：合并文件请求（asp.net版））； ...3.压缩css文件和js文件，主要就是去空白行、缩写变量名；（注意：这里要分发布版和开发版，因为压缩后的css和js文件真的是无法维护的） 现在优化效果不大，没办法控件多、页面体积大嘛！...思路：打开的子页面均有名字，关闭时先以这些名字打开窗口并获取打开窗口的引用对象（var win=window.open("name","_blank","url")），因同名窗口只能存在一个，所以之前打开的同名子窗口将被覆盖...然后使用打开窗口的引用对象.close()，删除所有窗口。 优点：真的实现了该功能； 缺点：1.能打开的子窗口数有限。...名字要规定好，该项目就规定了5个，也就是说最多只能打开5个子窗口。 2.关闭系统时会先出现空白页面然后它又自动关闭。如果要关闭的窗口多那也挺突兀的。
前言 事情是这样的，最近忙着软件测试没注意博客园的消息，今天无意间点开看到这个： ? 非常感谢这位盆友能发现这个问题，奖励鸡腿，这是那篇博文：要嫁就嫁程序员，因为。。。 恩？...，博客园的目录设置在手机端居然有问题，一直都用电脑没注意，我赶紧用手机点开一看 ?.../9290075.html 也就是我现在用的这个目录，我让目录在侧边栏显示，这样手机端不受任何影响，只是网页端的美化效果没有之前的好； 方法： 在页首HTML中加入： 1 <link href="http...3.右下角增加目录 也<em>就是</em>手机端目录会拦住内容<em>的</em>那种；网页端倒是挺漂亮<em>的</em>； 方法： 3.1. ..."> 赶快看看你的博客在手机端能很好的工作么
每次修改、上传了新代码，都要重复一遍第六步的点「启动」。也就是说代码并不能实时自动同步，GitHub 没这个问题。 Gitee 有些关键词违规的文件不能打开在线编辑，需要下载到本地修改后再上传。...注意：只有 GitHub 页面可以自定义域名，Gitee 没这个功能，下面开始教程。 第一步：打开你的电脑Win + R输入cmd确认。...另外就是 rzfyu.github.io/xxx 页面下的css、js引用地址不能再写成/xxx.css了，这样相当于引用了 rzfyu.github.io 下的文件，但很明显它下面没有这个文件，所以要写成.../xxx.css，这样表示引用当前页面的文件。...唯一不好的地方，假设你有 500 篇文章管理起来就比较麻烦。但既然它能够存在一定有优点，虽然我不知道。 Gitee/GitHub 能运行网页，Hexo 博客实质是网页所以能搭建成功。
既然能跨域，我们直接双击打开1.html，发现还是可以，这个例子双击打开和服务器打开都能达到目的 2.2 父调用子页面的js或者反过来调用 父调子：还是基于前面的条件 var i = document.querySelector...，有效果的。...html1', '*'); } 复制代码 子窗口：2.html window.onmessage = function (e) { console.log(e.data) } 复制代码 可以跨域，所以能直接双击打开可以看见效果...非同域的两个tab页面通信 也就是两个毫无关系的tab页面通信（比如我打开一个baidu和一个github），怎么通？ 当然baidu和github能不能通信，我们不知道，得问他们家的开发。...环引用？怎么做到特别容易的深拷？
我们将使用React先构建一个简单的Monkey代码编译器，没有感性认识的知识讲解都是bullshit,就像你没摸过水就跟你讲解游泳理论一样。...在生成的monkey-compiler项目中，有一个目录叫src/,该目录用于存放项目的所有代码文件，在开发过程中，我们只要关注src目录中的内容，打开其中的index.js,可见内容如下： import...就是一个组件，它被加载后，效果就是我们前面看到的那样。...这些代码遵循的标准叫ES6,是最新版的js代码语法格式，实际上当前主流浏览器并不支持这种格式代码的解析和执行，但为何他们仍然能运行在各大浏览器中呢？...Button,（上面左下角的红色按钮就是由Button组件创建的），那么我们可以通过bootstrap.Button来引用，这跟我们很类似与从一个类中引用它的公有成员变量。
这篇文章中有一个操作，就是修改缓存文件，从而达到 getshell 的目的，而其中修改缓存文件的功能是写在 /adminxxx/save.php 中的 editfile() 函数。...于是有一个大胆的想法，是否能修改这些 JS 文件，只要这些文件在 HTML 页面中被引用即可触发 XSS 呢？ ?...我们观察一下 /zzz17/template/pc/cn2016/js/img.js 文件, 可以发现代码成功被注入进去了。 我们只要找到引用了这个文件的页面即可触发 XSS: ?...可以看到此处引用了 /zzz17/template/pc/cn2016/js/img.js 文件: ? 第一次打开页面加载 JS 文件时会触发弹窗，效果如下： ?...总结 这个漏洞的起因是由于 CSRF，而达到的效果是存储型 XSS。由于 CSRF 需要和管理员交互，因此可能利用起来的效果会大打折扣。
没太多连续的时间来研究SignalR，所以我把这篇文章分了三个阶段： 第一个阶段，简单使用，熟悉并认识SignalR 第二个阶段，实现上图的单聊效果 第三个阶段，实现类似QQ群发的功能 扩展阶段，如果有时间...就是让客户端（Web页面）和服务器端可以互相通知消息及调用方法，当然这是实时操作的。...SignalR将使用其它技术来保证达到相同效果。...一会演示好处在哪）最小引用 ? 创建一个web的Client，引用一下 SignalR的js包，其实你会发现就是多了几个js包并没有引用任何dll（必须的，不然岂不是太臃肿？） ?...下面说一下上面的好处： webclient我就单独拿出来了（一个js包，一个index.html），控制台的程序我也单独拿出来了，下面先运行一下服务端，再打开index.html ?
(3) 实现动态窗口的效果 打开网页时经常会看到一些浮动的广告窗口，可以通过JavaScript脚本语言来实现如图所示的广告窗口。...3编写工具 (1) 常用编辑器 由于JS程序可以嵌入HTML文件中，因此可以使用任何一种能编辑HTML文件的工具软件作为JS的文本编辑器，如Windows中的记事本、写字板、Adobe Dreamweaver...> 和 部分中，引用的外部JS文件一般写在头部部分。...在浏览器打开页面，效果如下所示： (2) 引用外部JS文件 如果脚本代码比较复杂，或是同一段代码可以被多个页面所使用，那么可以将这些脚本代码放置在一个单独的文件中（保存文件的扩展名为.js），之后在需要使用该代码的页面中链接该.../> 在浏览器打开页面，效果如下所示： 以上就是今天的分享，持续更新JavaScript系列。
也就是说，可以完整地将图片显示出来。 aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。...(4) swiper 这个组件，是小程序页面中的一个轮播图的效果 swiper 是轮播图的一个总的容器，swiper-item 代表其中的每一个内容，配合其属性，能很方便的达到需要的样式 同样摘了几个常见的属性...打开App，是在 app 中 通过 app 的某个链接打开小程序，然后在小程序 再通过这个功 重新打开 app 当前版本的微信小程序，在.wxss文件里设置Button宽度无效，网络上的一种解决方案就是把...文件中声明组件，如果没有需要自己手动修改component 为 true { "component": true, } 接着在组件WXML中随便写点东西，然后打开想要引用组件的页面，首先在 json...js文件，在 properties 中的内容，就是接收到父（页面）的数据，也就是一个关于导航的数组，其中包括首页测试关于等等导航文字内容 headerTabs的位置：要接受的名称，自己定 type：要接收的数据的类型
此文主讲全家桶的搭建，在此我就不详细解说。简单说下引用，做个小型计数器。...touch store.js touch actions/counter.js touch reducers/counter.js 增加文件的别名 打开webpack.dev.config.js...经排查，发现是node版本的问题，我用nvm来作node版本管理工具，从原本的4.7切换到9.0的版本，运行正确。 ? 我们试用了一下redux，对于在项目熟用的童鞋来说，简直是没难度吧。...src/index.js中，我们传入store 注：我们引用react-redux中的Provider模块，它可以让所有的组件能访问到store，不用手动去传，也不用手动去监听。...正常我们去发起一个请求时，给用户呈现的大概步骤如下： 页面加载，请求发起，出现loading效果 请求成功，停止loading效果，data渲染 请求失败，停止loading效果，返回错误提示。
什么意思呢，就是在你的安卓手机上安装这个 APP，然后通过编写 JS 脚本的方式实现自动化操作。...而 Auto.js 通过写代码的方式定制，那不用多说，灵活性肯定是没的说，关键的是，竟然写 JS 就可以，不用懂 Java，也不用懂 kotlin，是不是有点儿优秀呢。...打开 Auto.js 的无障碍模式 Auto.js 的实现就是依靠的无障碍模式，但是这个模式需要对应用单独打开。仍然在 APP 的左侧抽屉框中打开。 ?...调试，查看效果 当你写好了一部分代码后，肯定要看一下效果，也很简单，通过菜单“查看”->“命令面板”->"Auto.js: Run On Device "来运行，当然，前提是你已经安装上面的步骤操作过，...如何确定坐标 大部分的操作其实都是对坐标的模拟手势操作，虽然 Auto.js 也支持更复杂的控件操作，甚至能直接连接 Java。
Profile面板就是这么简单，我们接下来的关注点在如何查找js中的“内存泄露”或定为“内存膨胀”的原因！...DevTools工具的Timeline面板能帮你分析提供数据支撑，Memory视图能显示出当前页面的Dom节点数，JS事件监听器个数等（性能优化的首要准则：避免持续引用太多DOM元素，注销掉过期的事件监听器...Retained Size 这一列代表着只有当前对象所引用的其他对象占用的内存大小（稍微有点绕口，这已经我能翻译出来的最简单的解释了）！...，包括内存使用率，特别是能查看JS的内存消耗，如下图： ?...#leaf节点会持有指向它的父节点#li的引用（一直递归到根节点#tree），所以只要#leaf还处于活跃状态（没释放）,那么整棵DOM树都不会释放。
一张图片和对应的拍摄位置如果没那么多可能性，那一系列照片和位置呢？...这里用Leaflet框架和 marker-clustering.js 实现坐标点展示和缩小时点聚合的效果，这样能适应各种缩放层级。效果如下： ?...基于1中提取的坐标，保存为js文件，然后在浏览器打开html文件，就是上图中的效果了。另外需要说明的是，这些标记点(marker)点击之后都是能看到具体的文本的，展示的文本就是title里的内容。...所调用文件及结构展示 而把这些坐标放到百度地图的效果如下： ? 百度地图的点坐标可视化 坐标多的话就是密密麻麻的红点。...用到的插件是storymap.js，同样引用js之后，改变其中的坐标数据，因为是讲一个故事，具体内容当然按自己想讲述的写，将 中的bodo和js代码中
1M的网，打出来的js文件最大的有4M+导致，因自己并非前端开发，只处于刚刚能应付数据展示再前台的地步，所以这个问题让我甚是苦恼； 解决方法： 0、工具使用查看各个js占用的大小 工具使用webpack.prod.conf.js...localhost:8888，即可看到各个文件占用比例，针对文件处理即可 1、网上普遍答复都是懒加载组件（实际测试中效果不是特别明显） main.js 中修改组件引用写法： const...2、改为cdn引用（强烈推荐） 因为我自身的服务器只有1M的网速，文件大的问题有时候就算压缩也是解决不了的，有些非常公用的插件bootstrap vue jquery css之类的建议使用...cdn外部引用，如图 image.png 我本身构建vue的包后，最大的文件快5M，实在太大了，使用cdn公共服务器引入后，大概能缩小到1m，但是这样也不是我们 最终的大小，继续优化...}), 对js及css进行压缩处理，效果是立竿见影的，直接将250kb文件压缩到了50kb image.png 4、nginx配置修改 nginx部署必备（强烈推荐） server中增加
按需加载 我们打包后，页面统一生成bundle.js，当我们进入Home页面时，因为加载的文件过多会导致页面慢。我们想要达到跳转到对应页面时按需加载文件的效果，就需要用到bundle-loader。...日常开发中，我们是通过打包修改文件名（比如加hash），使客户端能识别新的文件，重新加载。...由于我们在dist/index.html中引用的还是bundle.js，所以我们要改成每次编译后自动插入到index.html中，可以用到HtmlWebpackPlugin。...公共代码提取 我们打包生成的文件js文件中，都包含了react,redux,react-router这样的代码。然而这些依赖代码我们在很多文件都引用了，而不需要它自动更新。...[hash].js和vendor.[chunkhash].js一样都更新了名字，这不就和没拆分是一样的吗？ 别着急，看官网介绍 ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
