前端 の 笔记

一、前端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;

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容