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 {/*滚动条整体样式*/
} .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
} //.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>
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.最后就是最重要的——页面响应速度优化
这是个大工程，而且网上的资料也很多，需要的就自行查找吧。