cmyh-优快云博客

转载 First Interactive and Consistently Interactive

Author: dproy@Created: 11 April 2017Last updated: 28 August 2017 Update [2018 July 25]: We have renamed these metrics to simplify messaging to external developers. First Interactive is now First CPU Idle, and Time to Consistently Interact...

2020-10-15 03:43:30 691

原创网络信息API结合存储在性能方面的探索

网络信息 API 实现自适应能力在当下同时有2G、3G、4G、5G等网络条件的情况下，用户对网页的体验也出现了层出不穷的情况。例如在手机上浏览视频网站，能够根据用户当前使用的网络类型，在必要的时候给出提示，是一种很好的体验。从1G到5G的演进有兴趣的同学可以看一下，一部波澜壮阔的移动通信史简单的说就是：1G采用的技术是模拟通信系统。只能用于打电话，短信什么的都不可以；...

2020-05-07 22:05:34 548

原创前端逐帧动画性能探究和比较

什么是逐帧动画？首先看一下维基百科中的定义：定格动画，又名逐帧动画，是一种动画技术，其原理即将每帧不同的图像连续播放，从而产生动画效果。简单的来说就是：以一定的速度切换几张连续图像，让它动起来。人眼的物理性能能识别多少帧？理论上说，帧率越高，动画会越流畅，目前大多数设备的屏幕刷新率为 60 次/秒，所以通常来讲帧率为 60 帧时动画效果最好，也就是每帧的消耗时间为...

2020-03-30 18:48:18 2312

原创 CDN的原理及优缺点

CDN是一个非常重要的性能优化，掌握好它对于提高自身水平和优化思想非常重要。首先我们从一个简单的比喻入手一群朋友在一起嗑瓜子的时候（刚刚在嗑瓜子就拿这个比喻好了），大家都会从一大袋瓜子中取着吃，但是这样很麻烦。所以我们会用手先抓一把拿在手中，这样就不用每次都去大袋子中取，我们就可以很方便先吃手上的那部分。这样是不是对CDN有一些初步的了解，那我们回到概念上：Conten...

2019-11-12 18:58:34 1763

原创浏览器渲染层相关探索

浏览器渲染层是一把双刃剑，用的好可以让你的性能大大的提高，但是用的不好，却会导致页面更加的卡顿。打开chrome开发者工具，找到 More tools =》Layers，运行下面的代码，可以看到哪些情况下层级会进行提升<!DOCTYPE html><html> <head> <meta charset="utf-8"> &...

2019-10-09 11:47:43 218

原创关于浏览器渲染原理的相关文章

搜索关键词：RenderObject、光栅化、RenderLayer、Composite浏览器渲染流程&Composite（渲染层合并）简单总结https://blog.youkuaiyun.com/weixin_34268310/article/details/88859536How Rendering Work (in WebKit and Blink)https://blog...

2019-09-29 11:28:35 213

原创刨根问底，谈一谈requestAnimationFrame

开头引用一段 Google Developer Rendering Performance：当屏幕正在发生视觉变化时，您希望在适合浏览器的时间执行您的工作，也就是正好在帧的开头。保证 JavaScript 在帧开始时运行的唯一方式是使用requestAnimationFrame。框架或示例可能使用setTimeout或setInterval来执行动画之类的视觉变化，但这种做法的...

2019-09-29 02:19:41 315

原创基于NodeJS的视频网站爬虫工具

闲暇时间写了一个基于nodejs的爬虫工具，可以对视频网址等站点进行爬取数据示例站点为dilidili动漫网http、cheerio用于获取网站Dom数据exceljs用于生成excel文件Code：[https://github.com/cmyh100/dilidiliSpider]使用方法可以在src/index.js文件修改相关初始化参数(例如调整endTime: 2...

2019-09-24 21:11:43 1682

原创浅谈JavaScript垃圾回收机制

1、为什么要垃圾回收？程序在执行的时候，会在内存中占用一系列的资源，例如js里的变量，函数，对象等等。这些占用内存却没有再次使用的，我们称之为“垃圾”，而对“垃圾”占用的内存的回收，就是垃圾回收。如果没有垃圾回收，那么只能人工去做清除，这样很容易导致内存泄漏等问题。2、什么是标记清除？早在C语言诞生之前的1960年，图灵奖得主John McCarthy就在Lisp语言中实现了自动垃圾回...

2019-08-25 11:52:01 273

原创 ES6解构赋值，了解这些可以解决80%业务场景

什么是解构？在ES5的时候，如果对象中提取某个字段，得进行申明变量后赋值的操作，步骤较为繁琐。ES6通过解构赋值操作,可以将属性/值从对象/数组中取出，快速赋值给其他变量。简单的例子：// 对象const author = { name: 'cmyh',};const {name} = author; // 等同于 const name = user.name;con...

2019-08-18 06:38:30 248 2

原创 npm脚本运行与命令行直接输入命令的区别

从案例中寻找到答案问题：我们时常会在package.json里配置npm命令，例如："serve": "webpack-dev-server"每当我们用命令npm run serve的时候，用的美滋滋但是如果直接使用webpack-dev-server敲在上面的时候，有时候是不是会出现下面的图呢？原因：命令行直接输入的方式这种方式使用必须全局安装，在全局安装了的情况下，命令...

2019-06-19 16:21:29 3216

原创用webpack写一个自己的loader（案例：webpack图片不打包问题）

遇到的问题：webpack搭建项目的时候，因为使用file-loader将图片打包，但是index.html的模板中的图片，因为没有被依赖并不会被一并打包。解决方案：（偷懒可以直接 npm ihtml-reqimg-loader --save-dev ）找到了一个html-withimg-loader，它似乎可以解决这个问题但是用上了之后发现，它不支持我通过resolve.alia...

2019-05-17 21:06:16 856

原创基于nodejs的excel表格合并工具

背景：博主最近在搞基于NodeJs的爬虫抓取数据（后续会写一篇关于NodeJs爬虫的文章）（文章链接地址：https://blog.youkuaiyun.com/cmyh100/article/details/101312723）为了让抓取数据更加稳定且不导致nodejs线程阻塞，所以进行了分段抓取例如抓取1万条数据，分成了20个excel文件但是几十个excel文件分别导入到数据库中，操...

2019-04-04 13:13:43 1977

原创 onload和DOMContentLoaded区别理解

当onload事件触发的时候，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。当DOMContentLoaded事件触发的时候，仅当DOM加载完成，不包括样式表，脚本，图片，flash。...

2019-01-04 15:21:48 1355

原创事件生命周期——捕获和冒泡有感

IE8以前只支持事件冒泡，所以我们会为了兼容，尽量去使用事件冒泡。流程从事件捕获开始，父节点到子节点，逐层往下捕获，再从子节点到父节点，逐层往上冒泡。优点：1.外部dom更快的访问到，例如需要动态创建的节点，在父节点进行绑定事件，往内部冒泡即可。2.减小代码量，只需一次绑定。3.减小内存开销。...

2019-01-02 11:34:32 223

原创图片转base64跨域以及阿里云OSS跨域规则配置后不生效的原因

场景：公司使用OSS存储图片等静态资源，我获取图片资源并且将它转为base64的时候发生了跨域问题于是到OSS进行配置但是仍然报了跨域问题最后发现，因为启用了CDN缓存，所以得到CDN处添加HTTP头 Access-Control-Allow-Origin 参数的取值为 * （表示全部域名）感谢qianghong000的分享，详细问题分析可以看这里：http:...

2018-09-26 15:15:44 5002

原创巧记OSI七层网络模型（前端）

网络七层协议，乍看之下非常的笼统，看得人云里雾里。但真正了解清楚了它的本质，对于整个计算机网络以及日常的工作会带来非常大的帮助。以下就是个人的一些理解，分享给大家。物理层：通过硬件设备将模拟信号转换为数字信号，于是有了0/1数据流，叫做比特流。数据链路层：可以发比特流但是没有格式就会乱七八糟，于是就有了”帧”。采用了一种”帧”的数据块进行传输，为了确保数据通信的准确，实现数据有效的...

2018-09-19 12:02:43 23270 7

原创移动端后台预加载HTML页面，setTimeout定时器线程跑完问题

在兼容IOS8的时候遇到一个有趣的问题：IOS预加载了页面，在页面中我写入了一个setTimeout（差容、缓冲的作用），其作用是为了兼容老版本的设备无Hybird交互仍然能使用功能。结果发现，页面后台加载完，计时器线程便开始跑了，这让我满头黑线于是我加入的setInterval、documen.hidden（页面前台状态为false，后台状态为true），让它每隔2秒检测一次情况...

2018-09-07 17:11:40 1030

原创关于海外访问网页慢的解决方案

问题原因：目前公司的教师海外基地在菲律宾，访问教师中心和PC上课平台会出现白屏现象优化1：tomcat部署在香港服务器，静态资源存放香港地区的CDN中优化2：编写H5模板，内嵌PC端上课平台，通过JS与C++的Hybird交互，达到离线能力最强，达到秒开无任何延迟问题...

2018-09-07 10:29:32 10166

原创关于JS函数参数的原理理解

1：函数所接受的参数，始终是一个数组2：该数组可以通过函数里访问arguments对象来访问（自己测试的时候console.log一下就一目了然）例如：function sayHi(hi) { alert(hi)}function sayHi() { alert(arguments[0])}执行sayHi('hi arguments')，两个写法得到的东西相同...

2018-07-04 17:29:31 777

原创 Javascript解决音频audio在IOS系统下无法播放问题

ios中使用audio，日常踩坑必须！！！点击后即调用xxx.play()这个方法但是我们音频链接数据如果是网络请求而来的，那我们可以这样做：1.在无播放链接的情况下先调用一次xxx.play()，然后暂停xxx.pause()2.请求到数据以后，替换链接3.判断readyState的值0 = HAVE_NOTHING - 没有关于音频是否就绪的信息1 = HAVE_METADATA - 关于音频...

2018-06-14 17:06:39 22790 5

原创关于WebViewJavascriptBridge消息互通三方库的js封装（干货）

废话不多说，直接上代码注册与app的桥接// 注册事件监听 function connectWebViewJavascriptBridge (callback) { if (window.WebViewJavascriptBridge) { callback(window.WebViewJavascriptBridge) } else { ...

2018-04-13 11:04:44 1746

原创 css实现文字颜色渐变

懒得码字了，实现如下：/* color: transparent;全透明色彩 *//* background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff696a), to(#ffe57f));渐变色背景 *//* -webkit-background-clip: text;设置背景的绘制的范围 *//* -webkit-text-...

2018-03-15 14:16:41 2655

原创 vue路由只变化参数页面组件不更新问题

形如：http://localhost:8080/#/xxx?a=1&b=1如果只是变化？后面的参数，页面组件并不会响应解决办法：使用watch监听路由$route对象属性的变化watch: { '$route' (to, from) { // data数据操作 }}...

2018-02-27 14:46:43 8456

原创 vue中的$route和$router

vue中同时有这两个属性

2018-02-01 21:58:28 999

原创解决input、textarea里使用disable属性文字变灰问题

今天用ios测试了移动web项目，发现textarea里明明设置了文字颜色，但是却非常看不清楚仔细找了一下，发现是disable的问题找了一下替代的属性，找到了下面这个属性readonly="readonly"引用一段定义和用法：readonly 属性规定输入字段为只读。只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本

2017-12-23 11:18:02 7002

原创解决用户在ios中Date出现NAN问题

因为喜欢用xxxx-xx-xx xx:xx:xx的时间格式，遇到了一个奇怪的问题在ios中用new Date（）.getTime()，然后做计算的时候出现NAN解决办法：把时间格式改为xxxx/xx/xx xx:xx:xx 具体实现：time.replace(/ - /g, '/')

2017-12-13 12:02:15 780

原创用循环数组的方式自主配置需要调用的函数

最近总监让我把公司的业务逻辑抽象出来，方便以后调用并且说看看能不能简约到配置一下脚本即可写个小demo先实验一下 var arr = ['mya', 'myb']function mya () {return 1}function myb () {return 2}function myc () {return 3}function

2017-11-15 11:45:42 281

原创关于input中type为number的坑

如果使用了你会发现它并无法限制11位的长度解决办法是11)value=value.slice(0,11)"/>

2017-09-28 15:25:48 6761

原创 Js 动态添加、删除对象属性

var obj = {} 或 var obj = new Object()//1.对象.属性 = 赋值obj.aaa = 1//2.对象[属性] = 赋值 obj["aaa"] = 1;方法2中的属性可以为变量，例如var a = "aaa";obj[a] = 1;==================== 删除delete obj.aaadel

2017-09-20 18:43:44 1160

转载 js之iframe子页面与父页面通信

方法调用父页面调用子页面方法：FrameName.window.childMethod();子页面调用父页面方法：parent.window.parentMethod();DOM元素访问获取到页面的window.document对象后，即可访问DOM元素注意事项要确保在iframe加载完成后再进行操作，如果iframe还未加载完成就开始调用里面的方法

2017-09-20 16:33:46 1254

原创 js 利用html2canvas实现截图功能

需要导入的文件：jquery.min.js，html2canvas.js，canvas2image.js，jquery.qrcode.min.js（如需二维码）var shareContent = document.getElementById("imgmodel"); //需要截图的包裹的（原生的）DOM 对象var width = shareContent.offsetWidth; /

2017-09-19 13:51:54 1869

原创 js的三种自带对话弹框

1.alert() 警示对话框使用方法：alert("xxxxxxxx"); 2.confirm() 确认对话框使用方法：confirm("xxxxxxxxx");点击确定返回true，点击取消返回false3.prompt() 提示对话框使用方法：prompt("问题","默认值")var answer = prompt("问题","默认值");if

2017-09-19 10:50:31 494

原创如何给webAPP加上一个apk外壳

webAPP打包成apk流程（原理：webapp手机本地解压缩包打开）1.首先你需要一个Android开发软件，推荐Android Studio。下载地址：http://www.android-studio.org/安装过程默认即可，会遇到的问题就一些环境变量，sdk路径选择什么的，这里不详细介绍。2.创建一个项目进入软件界面我们开始新建一个项目，项目名自取，项目路径选

2017-09-06 10:18:27 7926

原创 CSS 相邻兄弟选择器

今天遇到一个问题，某dom使用hover，让其相邻的兄弟节点显示与隐藏解决办法举例(节点类名分别为：dom和sibling)：.sibling{display:none;}.dom:hover +.sibling{display:block;}

2017-09-01 20:15:30 1141

原创 tr:hover 背景变色的坑

问题原因：tr下的td有白色的背景色，导致了hover没效果解决办法：在tr:hover下边加上一句：tr:hover td{background:none;}

2017-08-30 11:01:13 1284 1

原创 JavaScript计算周期时间

今天一同事项目出了一个bug，她有两个时间，必须判断出这两个时间的属于哪周，并做出不同的逻辑处理首先她自然想到了new Date().getTime()获取到了时间戳，然后new Date().getTime()/1000/60/60/24/7然而里面的坑却慢慢的浮现出来。。。。首先是getTime()拿到的时间戳，我很好奇的打印出来看了看new Date('1970/1/1 00

2017-08-28 11:44:00 799

转载 REM手机屏幕适配

rem 的官方定义『The font size of the root element.』，即以根节点的字体大小作为基准值进行长度计算。head 中我们设置了：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

2017-08-28 09:57:03 287

原创 CSS3的calc()

单刀直入，calc用法如下calc()的运算规则：calc()使用通用的数学运算规则，但是也提供更智能的功能使用“+”、“-”、“*” 和 “/”四则运算；可以使用百分比、px、em、rem等单位；可以混合使用各种单位进行计算；表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；表达式中有“*”和

2017-08-25 15:23:11 607

原创 js消息通知Notification

想要让自己的通知消息出现在桌面？看这里。最近写的消息提醒，主要是某需求要用到，感觉很不错，美中不足就是浏览器兼容性并没有非常的好自己电脑里的Google、Firefox没有问题但是搜狗、360、欧朋等等没有作用Edge提示在了点击后想要直接弹出相应的页面，这里取巧用了个alert更多大家去发掘吧代码如下：//参数1：title

2017-08-09 16:56:33 4381