前端体验优化小贴士

1.img的 onerror 事件

onerror 事件会在文档或图像加载过程中发生错误时被触发，可以给用户提示，或者改变图片的地址为占位图：

<img src="image.gif" onerror="alert('图片不能被加载。')">

2. css 设置文字不能被选中

有时候点击的时候会不小心选中文字，增加这个设置可以避免此问题：

　　-webkit-user-select:none;

   -moz-user-select:none;

   -ms-user-select:none;

   user-select:none;

3.修改滚动条默认样式

默认的滚动条样式太丑了，前端可以进行修改，在用到滚动条的地方可以都用此代码，示例代码如下

<!DOCTYPE html>
<html>
<head>
    <title>修改滚动条样式</title>
</head>
<body>
<style type="text/css" media="screen">
    .inner{
        width: 300px;
        height: 400px;
        overflow:hidden;
        margin: 0 auto;
    }
    .innerbox{
        overflow-x: hidden;
        overflow-y: auto;
        color: #000;
        height: 100%;
    }
    /*滚动条样式*/
    .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
        width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 5px;
    }
    .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.2);
    }
    .innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0;
        background: rgba(0,0,0,0.1);
    }
</style>
<div class="inner">
    <div class="innerbox">
        <p style="height:300px;">这是内容111</p>
        <p style="height:300px;">这里是内容222</p>
        <p>这里是内容333</p>
    </div>
</div>
</body>
</html>

View Code

4.textarea的调整

textarea 右下角会有个拖动的标志，如果不想让用户进行缩放，可以增加 style="resize:none;" 或者使用 contenteditable="true" 将div变成编辑器进行输入。

5.禁止重复提交

比如用户点击一次就是一次提交，那么多次点击的时候就是多次提交，有可能造成页面卡主或者长时间没反应，此时就需要禁止用户的多次提交

方法一：

给所点击的区域设置 pointer-events: none; 该属性会让该区域的所有点击事件失效，请求结束之后去掉该属性即可；不过该属性有兼容性限制（大部分浏览器都支持了，几乎可以忽略兼容性），如下：

方法二：

点击完之后，给点击区域增加一个透明的遮罩层，再次点击的时候就是在遮罩层上，点击就无效，请求结束之后把遮罩层移除。

6.记住账号密码

记住密码，可以方便用户再次登录的时候不用重新输入：

方法：使用cookie，将登录信息存入cookie，存储在用户本地（存入cookie最好加密，不然就是裸奔了）

cookie说明：

如果不设置过期时间，则表示这个cookie生命周期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失了。这种生命期为浏览会话期的cookie被称为会话cookie。会话cookie一般不保存在硬盘上而是保存在内存里。
如果设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再次打开浏览器，这些cookie依然有效直到超过设定的过期时间。
存储在硬盘上的cookie可以在不同的浏览器进程间共享，比如两个IE窗口。而对于保存在内存的cookie，不同的浏览器有不同的处理方式。

7.避免<input>自动填充数据

<input>默认是自动填充账号密码的，之前就遇到过登录的时候记住密码，但是网站其他位置的表单填写区域也有的也出现了自动填充数据了，为了避免此问题，做如下设置：

<input type="text" autocomplete="off" />

autocomplete 默认是 on， 开启状态， 设置成 off 就关闭了。

8.最后就是最重要的——页面响应速度优化

这是个大工程，而且网上的资料也很多，需要的就自行查找吧。