知识点

2021-04-01 本文已影响0人 Viewwei

前端性能优化

减少 HTTP 数量
1.合并文件
2.图片映射,把多图拼成一张图
3.行内图片 base64
4.使用 CDN
浏览器缓存
对于一个网站来说 css js logo 图标这些资源图片更新频率比较低,而这些文件机会都需要 http请求,如果将这些文件缓存到浏览器中,可以极好的改善性能.通过设置 http 头中的cahce-control和 express 属性,可设置浏览器缓存.
页面静态
1.将 css 样式表放在顶部

将 JavaScript 脚本放到底部浏览器
3.使用外部JavaScript 和 css
组件压缩
5.图片优化

jsonp原理

通过前端创建一个 script 标签,给这个标签src设置跨域地址.跨域地址中存在前端一个函数名称,然后让服务器在response 中写入这个函数名称和参数

http 状态码

服务器状态码一般分成 5 类,
1** 代表服务器收到请求,需要请求者继续执行,
2成功,操作成功并处理,
3重定向,需要进一步操作,
4客户端错误,
5服务端错误.
200 代表成功 ,201 成功请求,并且创建了新的资源,202 已接受 305 使用代理,307 临时重定向,400 客户端请求语法错误,401 请求需要用户认证,403服务端理解请求客户端的请求,单拒绝执行请求,404 服务器无法根据客户端请求资源,405 客户端请求的方法被终止.500 服务器内部错误,501 服务器不支持请求功能

http1.1和 2.0 区别

2.0 使用多路复合的技术,做到同一个链接并发多个请求,并且并发请求的数量是 HTPP1.0 大好几个数量级
在
1.1 中,HTTP 请求和响应都是由状态码,请求/响应头部,消息主体三部分组成,一般而言,消息的主体会经过 gzip 压缩,或者本身就传输压缩过的二进制文件,单状态和头部却没有经过压缩,直接已文本的形式传输.随着 web 功能越来越复杂,每个页面产生的请求越来越多,导致🎺在头部的流量越来越大.1.1 不支持 header 数据压缩,
2.0 对头部进行压缩
服务端推送是一种客户端请求之前发送数据的机制.网页使用了许多资源,HTML,样式表,脚本,图片.在 1.1 中这些资源必须有明确的请求.这是一个很慢的过程.浏览器从获取 HTML 开始,然后在它解析和评估页面的时候,增量的更多的资源.因为服务器必须等待浏览器做每一个请求
为了改善延迟,2.0 引入了 server push,他允许服务端推送资源给浏览器,从浏览器明确请求之前,免的客户端再次创建连接发送请求到服务器获取.这样客户端可以直接本地加载这些资源

本地化数据

Cookie 非常小,大小的.主要用于保存登陆信息.cookie 机制:如果浏览器不设置过期时间,cookie 被保存到内存中.生命周期随着关闭而结束,
localStore:保存到这个本地,如果不设置过期时间,不会自动清除.
sessionStorage:他只是将一部分数据在当前会话中保存下来,刷新页面数据依旧有效,单页面关闭,sessionStorage 的数据会被清空

水平垂直居中

    //absolute 定位+margin-top+margin-left =-宽度一半
.c1 {
                height: 300px;
                width: 300px;
                background: black;
                position: relative;
            }
            
            .c2 {
                height: 200px;
                width: 200px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-top: -100px;
                margin-left: -100px;
                background: red;
            }
 left,right top bottom 加上 margin:auto 
    body {
                    background: black;
                }
                
                .block {
                    height: 200px;
                    width: 200px;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    background: red;
                }
table-cell
 body {
                            background: black;
                        }
                        
                        .block {
                            height: 200px;
                            width: 200px;
                            display: table-cell;
                            vertical-align: middle;
                            text-align: center;
                            background: red;
                        }
                        .a{
                            width: 100px;
                            height: 100px;
                            background: purple;
                        }
//tranlate -50%
     .block{
                         width: 200px;
                         height: 200px;
                         position: relative;
                         /* position: absolute; */
                         /* left: 50%; */
                         /* top: 50%; */
                         /* transform: translate(-50%, -50%); */
                         /* transform: translate(-50%,-50%); */
                         background: purple;
                     }  
                     .a{
                        width: 100px;
                         height: 100px;
                         background-color: #808080;
                         position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                     }

清除浮动

添加伪元素:after
给父元素添加 overflow:hidden,zoom:1
BFC 清除浮动

new 的实现

首先新建一个对象,在新对象上面新建一个proto属性,并指向构造函数的原型.亦新建对象作为上下文运行函数.针对函数的返回,如果是对象,则返回对象,如果不是对象,则返回创建新对象

知识点