1. 压缩源码和图片(js采用混淆压缩，css进行普通压缩，jpg图片根据具体质量压缩为50%到70%，png用来源软件压缩24色变成8色，去掉一些png格式信息等)
选择合适的图片格式(颜色数多用jpg，颜色少用png，如果能通过服务器端判断浏览器支持WebP就用WebP或SVG格式)
照片用 JPG。
动画用 GIF。
Logo、Icon 等小图用 PNG-8。
非特殊情况，尽量不要用 PNG-24 和 PNG-32。
2. 使用CDN(对公开库，能和其他网站共享缓存)
3. 延长静态资源缓存时间
4. 把css放页面头部，js放底部(这样不会阻塞页面渲染，让页面出现长时间的空白)
5. 对于较大的文本资源，必须开启gzip压缩
6.margin-top和margin-bottom对于一个内联元素是根不起作用的。简单的理解，margin-top和margin-bottom就是让元素离远离自身顶部和底部的元素。
7.CSS属性不区分大小写。
8.css自适应
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/><meta name="applicable-device"content="pc,mobile"/>
从上面我们可以看出有几个临界点的分辨率，那么我们就可以轻松的来写自己的自适应代码了
@media (min- 768px){ //>=768的设备 }
@media (min- 992px){ //>=992的设备 }
@media (min- 1200){ //>=1200的设备 }
注意下顺序，如果你把@media (min- 768px)写在了下面那么很悲剧，
@media (min- 1200){ //>=1200的设备 }
@media (min- 992px){ //>=992的设备 }
@media (min- 768px){ //>=768的设备 }
9.white-space:pre;
| 默认。空白会被浏览器忽略。 | |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
10.我们在网站设计时，难免会用到表格。表格中我们需要用到边框，border属性，这篇文章就是讲解DIV css （border属性）边框重叠 像素变粗 解决办法之一
margin-right:-1px;
11.value与val（）区别
jQuery中没有value方法，可以通过attr方法获取或设置标签中的value属性的值。
jQuery中的val()方法用来获取或设定输入框或选择框的值。
<input id="text" type="text"></input>
获取值：$("#text").val()
设置值：$("#text").val(“value”)