所有由zhufenghua发布的文章

CSS cursor（鼠标样式）

留下评论

在浏览网页的过程中，当我们将鼠标移动到一些元素上时，鼠标的样式会发生相应的改变，例如当鼠标指向文本时，鼠标的样式会变成类似大写字母I的样子；当鼠标指向链接时，鼠标会变成一个小手的形状等。

除了这些默认的变化外，您还可以通过 CSS 中的 cursor 属性来改变网页中鼠标（光标）的样式，下表中列举了 cursor 属性的可选值：

属性值描述
auto默认值，由浏览器根据当前上下文确定要显示的光标样式
default默认光标，不考虑上下文，通常是一个箭头
none不显示光标
initial将此属性设置为其默认值
inherit从父元素基础 cursor 属性的值
context-menu表示上下文菜单可用
help表示有帮助
pointer表示一个链接
progress进度指示器，表示程序正在执行一些处理，但是您仍然可以在该界面进行一些操作（与 wait 不同）
wait表示程序繁忙，您应该等待程序指向完成
cell表示可以选择一个单元格（或一组单元格）
crosshair一个简单的十字准线
text表示可以选择的文本
vertical-text表示可以选择的垂直文本
alias表示要创建别名或快捷方式
copy表示可以复制某些内容
move表示可以移动鼠标下方的对象
no-drop表示所拖动的项目不能放置在当前位置
not-allowed表示无法完成某事
all-scroll表示对象可以沿任何方向滚动（平移）
col-resize表示可以水平调整列的大小
row-resize表示可以垂直调整行的大小
n-resize表示对象的边缘可以向上（向北）移动
e-resize表示对象的边缘可以向右（向东）移动
s-resize表示对象的边缘可以向下（向南）移动
w-resize表示对象的边缘可以向左（向西）移动
ne-resize表示对象的边缘可以向上和向右（北/东）移动
nw-resize表示对象的边缘可以向上和向左（北/西）移动
se-resize表示对象的边缘可以向下和向右（向南/向东）移动
sw-resize表示对象的边缘可以向下和向左（南/西）移动
ew-resize表示可以双向调整对象大小的光标
ns-resize
nesw-resize
nwse-resize
zoom-in表示可以放大某些内容
zoom-out表示可以缩小某些内容
grab表示可以抓取（拖动）某些东西
grabbing表示已经抓取到某些东西
url(“”) 自定义光标的样式，括号中的内容为光标图像的源文件路径

 提示：由于计算机系统的不同，鼠标的样式会存在一定的差异。

除了可以使用上表中介绍的光标样式外，您也可以使用图像文件来自定义光标的样式，如下所示：

cursor: url("custom.gif"), url("custom.cur"), default;

css让文字旋转90度

留下评论

transform: rotate(90deg);

默认顺时针方向。逆时针填负数

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>
        .box {

            width: 20px;

            height: 30px;

            transform: rotate(90deg);

            -ms-transform: rotate(90deg);

            /* Internet Explorer 9*/

            -moz-transform: rotate(90deg);

            /* Firefox */

            -webkit-transform: rotate(90deg);

            /* Safari 和 Chrome */

            -o-transform: rotate(90deg);

            /* Opera */

        }
    </style>

</head>



<body>

    <p class="box">123</p>

</body>



</html>

原生js操作css：obj.style.cssText

留下评论

js 修改 css 最简单的方法，就是直接修改 cssText

d.style.cssText='css属性1:css值1; css属性2:css值2;'

一次可以写多个值，每个值用 , 分割，就像在标签的 style 属性，无任何语法不同。

它也直接返回多个css，仍然是以 ; 分割：

<h2 id="hello" style="position:fixed;color:red;"></h2>

<script>

    let a = document.getElementById('hello');
    console.log(a.style.cssText);
    
</script>

打印结果：

position: fixed; color: red;

利用书签栏执行js脚本

留下评论

一个a链接 的 href 是 javascript 时，拖动到书签栏上，然后点击即可执行脚本：

脚本一般如下：

javascript: (function() {
    //你的执行逻辑
})()

查看布局：

    <p>
        实例：<a href="javascript: (function() {
    let color = () => Math.floor(Math.random()*255); 
    let list = document.body.getElementsByTagName('*'); 
    for (let item of list) { 
        let rgb='rgb('+color()+','+color()+','+color()+')'; 
        let { style } = item;
        style.outline = style.outline
            ?  ''
        : '1px solid ' + rgb; 
    };
})();" onclick="alert('请把按钮拖动到书签栏');return false;">查看布局</a>
    </p>

实例：

    

        点击我：查看布局

编辑页面：

javascript: (function() {
    document.designMode = document.designMode === 'on' ? 'off': 'on'
})()

百度网盘倍速：

javascript: (function() {
    var number = prompt("请输入百度云盘播放倍数"); 
    if (!isNaN(+number)) {
        videojs.getPlayers("video-player").html5player.tech_.setPlaybackRate(number);
    } else {      
        alert('输入非数字！')
    }
})()

跨站脚本，加载远程弹窗（示例）：

javascript: (function(a, b, c, d) {



    a[c] ? a[c].init() : (d = b.createElement('script'), d.setAttribute('charset', 'utf-8'), d.src = '//bp3.52dixiaowo.com/include/plugins/5/index.js?v=' + Math.floor(+new Date), b.body.appendChild(d))


})(window, document, 'BP3_PLUGINS_REPRINT_GLOBAL');

跨站脚本，也就是动态创建 script ，而这个 script 是远程的，在这个远程 script 里，包含一个obj对象，调用 init 创建页面，然后加载远程数据，进行一些操作，关闭弹窗等。

linux oom_killer占用内存过大，程序被kill

留下评论

Linux 内核有个机制叫OOM killer(Out Of Memory killer)，该机制会监控那些占用内存过大，尤其是瞬间占用内存很快的进程，然后防止内存耗尽而自动把该进程杀掉。内核检测到系统内存不足、挑选并杀掉某个进程的过程可以参考内核源代码linux/mm/oom_kill.c，当系统内存不足的时候，out_of_memory()被触发，然后调用select_bad_process()选择一个”bad”进程杀掉。如何判断和选择一个”bad进程呢？linux选择”bad”进程是通过调用oom_badness()，挑选的算法和想法都很简单很朴实：最bad的那个进程就是那个最占用内存的进程。

grep "Out of memory" /var/log/messages

查看系统日志方法：

egrep -i -r 'killed process' /var/log

也可运行dmesg命令

解决方法：

一是增加系统内存，二是优化进程，使其占用内存降低。三是可以使用oom_score_adj参数，
这个参数会被计算入oom_score，可以避免进程被杀死(不推荐使用)。

  • 为了保护重要进程不被oom-killer掉，运行：
    • echo -17 > /proc/48277/oom_adj      -17表示禁用OOM

jvm设置新生代和老年代的比例

留下评论

堆大小设置

JVM 中最大堆大小有三方面限制：

1. 相关操作系统的数据模型（32-bt还是64-bit）限制；

2. 系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；

3. 64为操作系统对内存无限制。

经典型设置：

java -Xmx3550m -Xms3550m -Xmn2g -Xss128k
  • -Xmx3550m：设置JVM最大可用内存为3550M。
  • -Xms3550m：设置JVM促使内存为3550m。此值可以设置与-Xmx相同，以避免每次垃圾回收完成后JVM重新分配内存。
  • -Xmn2g：设置年轻代大小为2G。整个JVM内存大小=年轻代大小 + 年老代大小 + 持久代大小。持久代一般固定大小为64m，所以增大年轻代后，将会减小年老代大小。此值对系统性能影响较大，Sun官方推荐配置为整个堆的3/8。
  • -Xss128k：设置每个线程的堆栈大小。JDK5.0以后每个线程堆栈大小为1M，以前每个线程堆栈大小为256K。更具应用的线程所需内存大小进行调整。在相同物理内存下，减小这个值能生成更多的线程。但是操作系统对一个进程内的线程数还是有限制的，不能无限生成，经验值在3000~5000左右。
java -Xmx3550m -Xms3550m -Xss128k -XX:NewRatio=4 -XX:SurvivorRatio=4 -XX:MaxPermSize=16m -XX:MaxTenuringThreshold=0
  • -XX:NewRatio=4:设置年轻代（包括Eden和两个Survivor区）与年老代的比值（除去持久代）。设置为4，则年轻代与年老代所占比值为1：4，年轻代占整个堆栈的1/5
  • -XX:SurvivorRatio=4：设置年轻代中Eden区与Survivor区的大小比值。设置为4，则两个Survivor区与一个Eden区的比值为2:4，一个Survivor区占整个年轻代的1/6
  • -XX:MaxPermSize=16m:设置持久代大小为16m。
  • -XX:MaxTenuringThreshold=0：设置垃圾最大年龄。如果设置为0的话，则年轻代对象不经过Survivor区，直接进入年老代。对于年老代比较多的应用，可以提高效率。如果将此值设置为一个较大值，则年轻代对象会在Survivor区进行多次复制，这样可以增加对象再年轻代的存活时间，增加在年轻代即被回收的概论。 回收器选择

堆内存大小与jvm调优

留下评论

堆内存太大，则gc时间过长。

堆内存太小，容易造成堆内oom。

堆内存太大，而系统内存不足时，容易触发堆外oom（java一些对象申请的是堆外地址，堆外地址默认和堆内地址一样大，受操作系统管理，以减少jvm对内存的影响）

堆内存足够用，但比较小，此时会频繁触发gc，每次时间教短。如果希望教短的响应时间，则堆内存小比堆内存大较好。

堆内存大容易触发堆外oom的原因：

堆外oom用于降低jvm对内存的影响，一些情况是为了避免gc，一些情况是提高io性能（减少堆内对外的反复复制），还有一些情况是为了线程共享（减少jvm复制）。

快速回顾一下堆内的GC机制，当新生代满了，就会发生young gc；如果此时对象还没失效，就不会被回收；撑过几次young gc后，对象被迁移到老生代；当老生代也满了，就会发生full gc。

堆外内存，在堆内实际仅仅保留堆外内存的基本信息（开始地址、大小和容量），所以这些对象很小，每撑过几次young gc后，就进入老生代，但又很难把老生代撑满，从而导致占用一大片堆外内存不释放，这就是堆内存大而导致堆外oom。