一、前端SEO
1.合理的title、description、keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有所不同;description把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面description有所不同;keywords列举出重要关键词即可。
2.重要内容的HTML放前面,搜索引擎 从上至下 检索。
3.重要内容不用js引入,爬虫不会去执行js。
4.少用iframe,搜索引擎不抓取iframe
5.图片加alt
6.提高网站速度
二、网站性能优化
HTML:
1.减少HTTP请求:合并文件、CSS精灵、inline Image
2.减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法:DNS缓存、将资源分布到恰当数量的主机名,平衡并行下载和DNS查询
3.避免重定向:多余的中间访问
4.使Ajax可缓存
5.非必须组件延迟加载
6.未来所需组件预加载
7.减少DOM元素数量
8.将资源放到不同的域下:浏览器同时从一个域下载资源的数目有限,增加域可以提高并行下载量
9.减少iframe数量
10.不要404
服务器:
1.使用CDN
2.添加Expires或者Cache-Control响应头
3.对组件使用Gzip压缩
4.配置ETag
5.Flush Buffer Early(PHP有flush函数)
6.Ajax使用GET进行请求
7.避免空src的img标签
其他:
1.减少cookie大小
2.将样式表放到页面顶部
3.不使用CSS表达式
5.不使用@import
6.不使用IE的Filter
三、状态码
1XX:信息状态码
100 Continue:客户端应当继续发送请求。这个临时相应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝。客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应。服务器必须在请求万仇向客户端发送一个最终响应
101 Switching Protocols:服务器已经理解力客户端的请求,并将通过Upgrade消息头通知客户端采用不同的协议来完成这个请求。在发送完这个响应最后的空行后,服务器将会切换到Upgrade消息头中定义的那些协议。
2XX:成功状态码
200 OK:请求成功,请求所希望的响应头或数据体将随此响应返回
201 Created:
202 Accepted:
203 Non-Authoritative Information:
204 No Content:
205 Reset Content:
206 Partial Content:
3XX:重定向
300 Multiple Choices:
301 Moved Permanently:
302 Found:
303 See Other:
304 Not Modified:
305 Use Proxy:
306 (unused):
307 Temporary Redirect:
4XX:客户端错误
400 Bad Request:
401 Unauthorized:
402 Payment Required:
403 Forbidden:
404 Not Found:
405 Method Not Allowed:
406 Not Acceptable:
407 Proxy Authentication Required:
408 Request Timeout:
409 Conflict:
410 Gone:
411 Length Required:
412 Precondition Failed:
413 Request Entity Too Large:
414 Request-URI Too Long:
415 Unsupported Media Type:
416 Requested Range Not Satisfiable:
417 Expectation Failed:
5XX: 服务器错误
500 Internal Server Error:
501 Not Implemented:
502 Bad Gateway:
503 Service Unavailable:
504 Gateway Timeout:
505 HTTP Version Not Supported:
具体查看:HTTP状态码
四、BFC
创建规则:
根元素
浮动元素(float不是none)
绝对定位元素(position取值为absolute或fixed)
display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素
overflow不是visible的元素
作用:
可以包含浮动元素
不被浮动元素覆盖
阻止父子元素的margin折叠
五、深克隆
function deepClone(arr) {
if (typeof arr != "object") {
return arr;
}
var result = {};
for (var i in arr) {
result[i] = deepClone(arr[i]);
}
return result;
}