优化与兼容
关注
分享
扫一扫
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 阅读 · 0 评论 -
网络信息API结合存储在性能方面的探索
网络信息 API 实现自适应能力在当下同时有2G、3G、4G、5G等网络条件的情况下，用户对网页的体验也出现了层出不穷的情况。例如在手机上浏览视频网站，能够根据用户当前使用的网络类型，在必要的时候给出提示，是一种很好的体验。从1G到5G的演进有兴趣的同学可以看一下，一部波澜壮阔的移动通信史简单的说就是：1G采用的技术是模拟通信系统。只能用于打电话，短信什么的都不可以；...原创 2020-05-07 22:05:34 · 548 阅读 · 0 评论 -
前端逐帧动画性能探究和比较
什么是逐帧动画？首先看一下维基百科中的定义：定格动画，又名逐帧动画，是一种动画技术，其原理即将每帧不同的图像连续播放，从而产生动画效果。简单的来说就是：以一定的速度切换几张连续图像，让它动起来。人眼的物理性能能识别多少帧？理论上说，帧率越高，动画会越流畅，目前大多数设备的屏幕刷新率为 60 次/秒，所以通常来讲帧率为 60 帧时动画效果最好，也就是每帧的消耗时间为...原创 2020-03-30 18:48:18 · 2314 阅读 · 0 评论 -
CDN的原理及优缺点
CDN是一个非常重要的性能优化，掌握好它对于提高自身水平和优化思想非常重要。首先我们从一个简单的比喻入手一群朋友在一起嗑瓜子的时候（刚刚在嗑瓜子就拿这个比喻好了），大家都会从一大袋瓜子中取着吃，但是这样很麻烦。所以我们会用手先抓一把拿在手中，这样就不用每次都去大袋子中取，我们就可以很方便先吃手上的那部分。这样是不是对CDN有一些初步的了解，那我们回到概念上：Conten...原创 2019-11-12 18:58:34 · 1763 阅读 · 0 评论 -
浏览器渲染层相关探索
浏览器渲染层是一把双刃剑，用的好可以让你的性能大大的提高，但是用的不好，却会导致页面更加的卡顿。打开chrome开发者工具，找到 More tools =》Layers，运行下面的代码，可以看到哪些情况下层级会进行提升<!DOCTYPE html><html> <head> <meta charset="utf-8"> &...原创 2019-10-09 11:47:43 · 218 阅读 · 0 评论 -
刨根问底，谈一谈requestAnimationFrame
开头引用一段 Google Developer Rendering Performance：当屏幕正在发生视觉变化时，您希望在适合浏览器的时间执行您的工作，也就是正好在帧的开头。保证 JavaScript 在帧开始时运行的唯一方式是使用requestAnimationFrame。框架或示例可能使用setTimeout或setInterval来执行动画之类的视觉变化，但这种做法的...原创 2019-09-29 02:19:41 · 315 阅读 · 0 评论 -
浅谈JavaScript垃圾回收机制
1、为什么要垃圾回收？程序在执行的时候，会在内存中占用一系列的资源，例如js里的变量，函数，对象等等。这些占用内存却没有再次使用的，我们称之为“垃圾”，而对“垃圾”占用的内存的回收，就是垃圾回收。如果没有垃圾回收，那么只能人工去做清除，这样很容易导致内存泄漏等问题。2、什么是标记清除？早在C语言诞生之前的1960年，图灵奖得主John McCarthy就在Lisp语言中实现了自动垃圾回...原创 2019-08-25 11:52:01 · 273 阅读 · 0 评论 -
npm脚本运行与命令行直接输入命令的区别
从案例中寻找到答案问题：我们时常会在package.json里配置npm命令，例如："serve": "webpack-dev-server"每当我们用命令npm run serve的时候，用的美滋滋但是如果直接使用webpack-dev-server敲在上面的时候，有时候是不是会出现下面的图呢？原因：命令行直接输入的方式这种方式使用必须全局安装，在全局安装了的情况下，命令...原创 2019-06-19 16:21:29 · 3216 阅读 · 0 评论 -
用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 阅读 · 0 评论 -
基于nodejs的excel表格合并工具
背景：博主最近在搞基于NodeJs的爬虫抓取数据（后续会写一篇关于NodeJs爬虫的文章）（文章链接地址：https://blog.youkuaiyun.com/cmyh100/article/details/101312723）为了让抓取数据更加稳定且不导致nodejs线程阻塞，所以进行了分段抓取例如抓取1万条数据，分成了20个excel文件但是几十个excel文件分别导入到数据库中，操...原创 2019-04-04 13:13:43 · 1979 阅读 · 0 评论 -
关于海外访问网页慢的解决方案
问题原因：目前公司的教师海外基地在菲律宾，访问教师中心和PC上课平台会出现白屏现象优化1：tomcat部署在香港服务器，静态资源存放香港地区的CDN中优化2：编写H5模板，内嵌PC端上课平台，通过JS与C++的Hybird交互，达到离线能力最强，达到秒开无任何延迟问题...原创 2018-09-07 10:29:32 · 10168 阅读 · 0 评论 -
解决input、textarea里使用disable属性文字变灰问题
今天用ios测试了移动web项目，发现textarea里明明设置了文字颜色，但是却非常看不清楚仔细找了一下，发现是disable的问题找了一下替代的属性，找到了下面这个属性readonly="readonly"引用一段定义和用法：readonly 属性规定输入字段为只读。只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本原创 2017-12-23 11:18:02 · 7002 阅读 · 0 评论 -
解决用户在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 阅读 · 0 评论 -
关于input中type为number的坑
如果使用了你会发现它并无法限制11位的长度解决办法是11)value=value.slice(0,11)"/>原创 2017-09-28 15:25:48 · 6763 阅读 · 0 评论 -
tr:hover 背景变色的坑
问题原因：tr下的td有白色的背景色，导致了hover没效果解决办法：在tr:hover下边加上一句：tr:hover td{background:none;}原创 2017-08-30 11:01:13 · 1284 阅读 · 1 评论 -
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 阅读 · 0 评论 -
CSS3的calc()
单刀直入，calc用法如下calc()的运算规则：calc()使用通用的数学运算规则，但是也提供更智能的功能使用“+”、“-”、“*” 和 “/”四则运算；可以使用百分比、px、em、rem等单位；可以混合使用各种单位进行计算；表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；表达式中有“*”和原创 2017-08-25 15:23:11 · 607 阅读 · 0 评论 -
移动web开发之DPR
设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值DPR = 设备像素 / CSS像素(某一方向上) 在早先的移动设备中，并没有DPR的概念。随着技术的发展，移动设备的屏幕像素密度越来越高。从iphone4开始，苹果公司推出了所谓的retina视网膜屏幕。之所以叫做视网膜屏幕，是因为屏幕的PPI(屏幕像素密度)太高，人转载 2017-08-09 16:05:01 · 3519 阅读 · 0 评论