Centos 安装使用puppeteer异常报错及解决方案 一、error while loading shared libraries: libatk-1.0.so.0报错：/home/work/node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libatk-1.0.so.0: cannot open shared object file: No such file or directory解决:yum install atk二、error while loading shared libraries: libatk-bridge-2.0.so.0报错:/home/work/node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libatk-bridge-2.0.so.0: cannot open shared object file: No such file or directory解决:yum install at-spi2-atk三、error while loading shared libraries: libxkbcommon.so.0报错:/home/work/node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libxkbcommon.so.0: cannot open shared object file: No such file or directory解决:yum install libxkbcommon-x11-devel四、error while loading shared libraries: libXcomposite.so报错:/home/work/node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libXcomposite.so.1: cannot open shared object file: No such file or directory解决:yum install libXcomposite五、error while loading shared libraries: libgtk-3.so.0:报错:/home/work/node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libgtk-3.so.0: cannot open shared object file: No such file or directory解决:yum install gtk3六、Running as root without --no-sandbox is not supported报错Running as root without --no-sandbox is not supported解决：启动参数添加 "args": ["--no-sandbox"]例如： const browser = await puppeteer.launch({ args: ["--no-sandbox"], headless: true, });七、Puppeteer中文显示方块乱码解决解决：这并不是Puppeteer的问题，实际上是Linux字体库对中文支持不好的原因。我们只需要给服务器的Linux系统安装支持的中文字体库即可。这里推荐文泉驿字体 :文泉驿是一个以开发开源、免费中文电子资源－－如汉字字体、词库等－－为目标的公益性组织。她的创办宗旨是实现“任何人在任何地方都可以自由使用汉字和汉语进行交流”。——摘自百度百科这里以CentOS为例，其他Linux系统也都有自己的包管理器，只是换个包管理器操作，安装步骤基本是一样的：安装文泉字体：yum install wqy-microhei-fonts.noarch -y yum install wqy-unibit-fonts.noarch -y yum install wqy-zenhei-fonts.noarch -y安装完成，再次执行 Puppeteer 的操作，一切都显示正常了。

纯css实现一个右边滑出，挥手n次的css动画 效果如下：直接见代码： <div class="box"> box body <div class="img"></div> </div>@keyframes leftIn { 0% { right: -100px; } 100% { right: 0; } } @keyframes handShake { 0% { transform: rotate(0deg); } 14.3% { transform: rotate(-9deg); } 25.7% { transform: rotate(-1deg); } 34.3% { transform: rotate(-10deg); } 42.9% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } .box { width: 300px; height: 300px; border: 1px solid red; margin: 0 auto; margin-top: 50px; position: relative; } .img { position: absolute; right: -20px; bottom: 100px; width: 0; height: 0; height: auto; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 100px solid red; transform-origin: 100px 50px; animation-name: leftIn, handShake; animation-duration: .8s, 1.6s; animation-timing-function: ease-in-out, ease-in-out; animation-delay: 1s, 2s; animation-iteration-count: 1, 8; animation-fill-mode: both, both; }

Mac vscode快捷键 全局Command + Shift + P / F1 显示命令面板 Command + P 快速打开 Command + Shift + N 打开新窗口 Command + W 关闭窗口 基本Command + X 剪切（未选中文本的情况下，剪切光标所在行） Command + C 复制（未选中文本的情况下，复制光标所在行） Option + Up 向上移动行 Option + Down 向下移动行 Option + Shift + Up 向上复制行 Option + Shift + Down 向下复制行 Command + Shift + K 删除行 Command + Enter 下一行插入 Command + Shift + Enter 上一行插入 Command + Shift + \ 跳转到匹配的括号 Command + [ 减少缩进 Command + ] 增加缩进 Home 跳转至行首 End 跳转到行尾 Command + Up 跳转至文件开头 Command + Down 跳转至文件结尾 Ctrl + PgUp 按行向上滚动 Ctrl + PgDown 按行向下滚动 Command + PgUp 按屏向上滚动 Command + PgDown 按屏向下滚动 Command + Shift + [ 折叠代码块 Command + Shift + ] 展开代码块 Command + K Command + [ 折叠全部子代码块 Command + K Command + ] 展开全部子代码块 Command + K Command + 0 折叠全部代码块 Command + K Command + J 展开全部代码块 Command + K Command + C 添加行注释 Command + K Command + U 移除行注释 Command + / 添加、移除行注释 Option + Shift + A 添加、移除块注释 Option + Z 自动换行、取消自动换行 多光标与选择Option + 点击 插入多个光标 Command + Option + Up 向上插入光标 Command + Option + Down 向下插入光标 Command + U 撤销上一个光标操作 Option + Shift + I 在所选行的行尾插入光标 Command + I 选中当前行 Command + Shift + L 选中所有与当前选中内容相同部分 Command + F2 选中所有与当前选中单词相同的单词 Command + Ctrl + Shift + Left 折叠选中 Command + Ctrl + Shift + Right 展开选中 Alt + Shift + 拖动鼠标 选中代码块 Command + Shift + Option + Up 列选择 向上 Command + Shift + Option + Down 列选择 向下 Command + Shift + Option + Left 列选择 向左 Command + Shift + Option + Right 列选择 向右 Command + Shift + Option + PgUp 列选择 向上翻页 Command + Shift + Option + PgDown 列选择 向下翻页 查找替换Command + F 查找 Command + Option + F 替换 Command + G 查找下一个 Command + Shift + G 查找上一个 Option + Enter 选中所有匹配项 Command + D 向下选中相同内容 Command + K Command + D 移除前一个向下选中相同内容 进阶Ctrl + Space 打开建议 Command + Shift + Space 参数提示 Tab Emmet插件缩写补全 Option + Shift + F 格式化 Command + K Command + F 格式化选中内容 F12 跳转到声明位置 Option + F12 查看具体声明内容 Command + K F12 分屏查看具体声明内容 Command + . 快速修复 Shift + F12 显示引用 F2 重命名符号 Command + Shift + . 替换为上一个值 Command + Shift + , 替换为下一个值 Command + K Command + X 删除行尾多余空格 Command + K M 更改文件语言 导航Command + T 显示所有符号 Ctrl + G 跳转至某行 Command + P 跳转到某个文件 Command + Shift + O 跳转到某个符号 Command + Shift + M 打开问题面板 F8 下一个错误或警告位置 Shift + F8 上一个错误或警告位置 Ctrl + Shift + Tab 编辑器历史记录 Ctrl + - 后退 Ctrl + Shift + - 前进 Ctrl + Shift + M Tab 切换焦点 编辑器管理Command + W 关闭编辑器 Command + K F 关闭文件夹 Command + \ 编辑器分屏 Command + 1 切换到第一分组 Command + 2 切换到第二分组 Command + 3 切换到第三分组 Command + K Command + Left 切换到上一分组 Command + K Command + Right 切换到下一分组 Command + K Command + Shift + Left 左移编辑器 Command + K Command + Shift + Right 右移编辑器 Command + K Left 激活左侧编辑组 Command + K Right 激活右侧编辑组 文件管理Command + N 新建文件 Command + O 打开文件 Command + S 保存文件 Command + Shift + S 另存为 Command + Option + S 全部保存 Command + W 关闭 Command + K Command + W 全部关闭 Command + Shift + T 重新打开被关闭的编辑器 Command + K Enter 保持打开 Ctrl + Tab 打开下一个 Ctrl + Shift + Tab 打开上一个 Command + K P 复制当前文件路径 Command + K R 在资源管理器中查看当前文件 Command + K O 新窗口打开当前文件 显示Command + Ctrl + F 全屏、退出全屏 Command + Option + 1 切换编辑器分屏方式（横、竖） Command + + 放大 Command + - 缩小 Command + B 显示、隐藏侧边栏 Command + Shift + E 显示资源管理器 或 切换焦点 Command + Shift + F 显示搜索框 Ctrl + Shift + G 显示Git面板 Command + Shift + D 显示调试面板 Command + Shift + X 显示插件面板 Command + Shift + H 全局搜索替换 Command + Shift + J 显示、隐藏高级搜索 Command + Shift + C 打开新终端 Command + Shift + U 显示输出面板 Command + Shift + V Markdown预览窗口 Command + K V 分屏显示 Markdown预览窗口 调试F9 设置 或 取消断点 F5 开始 或 继续 F11 进入 Shift + F11 跳出 F10 跳过 Command + K Command + I 显示悬停信息 集成终端Ctrl + ` 显示终端 Ctrl + Shift + ` 新建终端 Command + Up 向上滚动 Command + Down 向下滚动 PgUp 向上翻页 PgDown 向下翻页 Command + Home 滚动到顶部 Command + End 滚动到底部

解决键盘弹出后挡表单的问题 解决键盘弹出后挡表单的问题 window.addEventListener('resize', function() { if( document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA' ) { window.setTimeout(function() { if('scrollIntoView' in document.activeElement) { document.activeElement.scrollIntoView(); } else { document.activeElement.scrollIntoViewIfNeeded(); } }, 0); } });

highcharts 数据量过大，几万条数据，怎么解决显示问题呢？实例剖析异步加载 170 万条数据 hightcharts使用的范围应该很广了，但是因为他的渲染方式是svg，当数据量达到成千上万条的时候，那么问题就来了，浏览器会卡死，渲染不出来。这个问题官方已经给了解决实例。但是很少被人注意到，我遇到这个问题的时候，网上查了半天才发现。 下面实例总结一下，先说一下Highcharts、Highstock的区别：Highcharts的数据量理论是万级，默认是1000，可以通过 turboThreshold 来指定。 Highstock的数据量可以达到十万甚至是百万级，通过异步加载等优化手段可以轻松胜任百万数据。html代码<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DPUv2 Profiler</title> <script src="./jquery-3.1.1.min.js"></script> <script src="./highstock.js"></script> <script src="./modules/xrange.js"></script> <script src="./modules/exporting.js"></script> <style type="text/css"> #container { width: 100%; height: 600px; margin: 1em auto; } </style> </head> <body> <div id="container"></div> </body> </html> js部分 var chartData = []//所有数据 var options = { chart: { type: 'xrange', renderTo: "container", zoomType: 'x' }, title: { text: 'DPUv2 Profiler' }, yAxis: { title: { text: '' }, categories: ['LOAD', 'SAVE', 'CONV', 'MISC'], reversed: true }, xAxis : { events : { afterSetExtremes : afterSetExtremes } }, navigator: { adaptToUpdatedData: false, enabled: true, height: 120, xAxis: { visible: false }, yAxis: { reversed: true, visible: false }, series: { type: 'xrange', dataGrouping: { enabled: true } } }, keyboardNavigation: { mode: 'normal' }, scrollbar: { enabled: true }, rangeSelector: { enabled: false }, tooltip:{ headerFormat: '<small>partialFill</small>: ', pointFormatter: function(){ let html = '<b>' + this.partialFill + '</b><br/>' html += "currentLine: "+this.sort for(key in this.info){ html += '<br/><p><span>' + key + ': </span>' + '<span style="text-align: right"><b>' + this.info[key] + '</b></span></p><br/>' } return html }, valueDecimals: 2 }, series: [{ turboThreshold: 0, name: '', borderColor: '#E0E0E0', pointWidth: 30, pointPadding: 0, showInLegend: false, allowPointSelect: true, showInNavigator: true, data: [{}], dataLabels: { enabled: false }, states: { select: { color: '#888888' } } }] } function dataHandle(data){ var dest = [] data.forEach((item,index)=>{ var color switch(item.name) { case 'LOAD': color = '#90EE90' break case 'SAVE': color = '#FF69B4' break case 'END': color = '#000000' break case 'CONVINIT': color = '#BA55D3' break case 'CONV': color = '#6495ED' break case 'POOL': color = '#FFD700' break case 'ELEWINIT': color = '#FFA07A' break case 'ELEW': color = '#FF6347' break default: color = "#999999" } dest.push({ x: parseInt(item.x), x2: parseInt(item.x2), y: parseInt(item.y), name: item.name, color: color, info: item.info, partialFill: 1 - parseFloat(item.efficiency), dpd: item.dpd, id: index + 1, sort:item.sort }) }) return dest } function afterSetExtremes(e) { var chart = $('#container').highcharts() chart.showLoading('Loading data from server...') var dest = [] chartData.forEach((item,index)=>{ if((item.x2 >= (e.min)) && (item.x <= e.max)){ dest.push(item) } }) console.log(dest) var data = dataHandle(dest) chart.series[0].setData(data) chart.hideLoading() } function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null)return unescape(r[2]); return null; } function JsonCount(jsonArr){ var JsonOBj = [] var tempArr = []//记录分类 JsonOBj.all = jsonArr.length jsonArr.forEach((item,index)=>{ jsonArr[index].sort = index + 1 //给原始数据加个序号 if(tempArr.indexOf(item.name) < 0){ //还没这项 JsonOBj[item.name] = 1 tempArr.push(item.name) }else{ JsonOBj[item.name] ++ } }) return JsonOBj } function renderCount(countData){ let html = "" console.log(countData) for(var key in countData){ html += "<li><b>"+key+": </b>"+countData[key]+"</span></li>" } $(".info_list").html(html) } $(function(){ var filename = GetQueryString('file') $.getJSON('/gantt/'+filename, function(data) { chartData = data var countData = JsonCount(chartData) renderCount(countData) var loadData = dataHandle(data.slice(0,200)) options.series[0].data = loadData new Highcharts.Chart(options) }) }) 根据官网demo改造的，原文链接https://www.hcharts.cn/demo/highstock/lazy-loading 其中dataHandle是把我们的json数据处理成highcharts期望渲染的数据结构。 核心原理就是首次渲染的时候，先渲染了数据的前200条。区间选取的时候会触发afterSetExtreme()函数，我们根据e.min&&e.max过滤我们的数据然后重新渲染。