万维网与前端优化-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37179373/article/details/125613171

万维网是如何工作的？

当你在浏览器输入一个网址时，1-浏览器会从域名系统（DNS）查找到存放网页服务器的实际地址。
浏览器发送http请求信息到服务器来请求拿到一份网页到客户端。这条消息包括其他客户端与服务器端之间数据的传递都是互联网使用TCP/IP协议传输的。
服务器同意请求后。然后便开始将网页的数据以数据包（成千上万的小数据块）的形式传递到浏览器
最后浏览器把数据包聚集成网页呈现给你。
其他解释；DNS=》真实的地址就不好记，它们是一串数字。域名系统（像地图系统一样）他们是将你输入浏览器的网址像baidu.com（如国家大学科技园）与实际IP地址匹配（东方南路38号）的特殊服务器。当然你也可通过IP直接访问，比如我IP还没绑定域名前。

性能优化

减少请求：如图片-雪碧图，通过位移来替换图片个数，合并js/css文件，减少个数；
压缩- gzip：压缩静态资源；
利用缓存：如抽出css/js其他页面使用时可以从缓存读取。

设置过期时间

浏览器访问url时的工作机制？

a. 第一次访问url时，用户从服务器段获取页面内容，并把相关的文件（images,css,js…）放在高速缓存中，也会把文件头中的expired time,last modified, ETags等相关信息也一同保留下来。

b. 用户重复访问url时，浏览器首先看高速缓存中是否有本站同名的文件，如果有，则检查文件的过期时间；如果尚未过期，则直接从缓存中读取文件，不再访问服务器。

c. 如果缓存中文件的过期时间不存在或已超出，则浏览器会访问服务器获取文件的头信息，检查last modifed和ETags等信息，如果发现本地缓存中的文件在上次访问后没被修改，则使用本地缓存中的文件；如果修改过，则从服务器上获取最新版本。

我的经验，如果可能，尽量遵循此原则给静态文件添加过期时间，这样可以大幅度减少用户对服务器资源的重复访问

css放 header，js放body下；
多域名

http缓存

缓存-静态资源（css/js/img）

强缓存-浏览器不发请求，直接读取本地缓存数据

from memory cache：从内存中读取缓存-当关闭浏览器或者硬性重新加载时，资源会被释放，内存中就没有。
From disk cache：从硬盘读取，已经从在某个时间加载过该资源。存在硬盘上关闭浏览器，数据依然在
优先级：有效memory=》然后disk，最后网络请求
Cache-Control:no-cache是会被缓存的，只不过每次请求缓存都会向服务器评估缓存有效性。

协商缓存-通过服务端判断事件是不是可以被缓存，服务端判断客户端的资源是不是和服务端一样，一样返回304（Not Modified-服务端对客户端有缓存的一种响应），否则去200-比如html（非静态资源，一般每次请求都会完成200请求，因为不进行缓存）
刷新对缓存的影响：f5-强制缓存失效，ctrl+f5-强缓存和协商都失效

浏览器运行/渲染机制

PROMISE

深浅拷贝

参数丢失

CSS的盒子模型

盒模型四部分：内容（content），内边距（padding），边框（border），外边距（margin）；
其中怪异盒模型的宽包括内边距和边框和内容。

Box-sizing:content-box(默认)|border-box（怪异盒模型）。

BFC

盒浮动元素产生了浮动流，产生了浮动流的元素，块级元素看不到他们。
产生了BFC，文本属性（inline）的元素，还有文本能看到浮动元素。
如何触发盒子的BFC？Overflow:hidden;float,display:inline-block
解决margin塌陷：父子垂直上的margin合并了，不希望合并

（1）给父元素加border或padding。（不建议使用）
 (2)触发父级的BFC,给父级盒子添加
    A.position:absolute/fixed
    B.display:inline-block;
    C.float:left/right
    D.overflow:hidden

H5新特性

canvas，
多媒体（video，audio），
localstorage，sessionstorage，
内容元素（article，header，nav,footer,section,progress,address）

两栏布局和三栏布局

两栏：
（1）display：flex，右侧子元素：flex:1
 width：calc( 100% - 200px);这里注意运算符（-）前后各一个空格

三栏布局：
vh:相对于视口的高
display:flex;flex-direction:column;中间的flex:1

flex弹性盒

弹性盒有两部分：容器（父元素），项目（子元素）
父元素常用属性：
display:flex;

justify-content:center;水平居中，

align-item：center垂直居中，

flex-direction:row水平，column垂直。

Css3新特性？

Calc函数
过度：transition:width 2s;

div {
    width:100px;
    background:yellow;
    transition:width 2s;
}
div:hover {
    width:300px;
}

动画

@keyframes animateName {
    100%{
        transform: rotate(360deg);
    }
}

div{
    animation: animateName 1s linear infinite;
}

阴影：box-shadow
边框：border-radius
渐变：background-image: linear-gradient(to right, #dd5e89, #f7bb97);
媒体查询：监听屏幕尺寸变化

内部：@media screen and (min-width:768px) and (max-width:991px){}

外部<link rel="stylesheet" href="媒体查询/one.css" media="screen and (max-width:1000px)">

（1）动画

animation: rotate(动画名) 0.8s（时间） infinite（循环） linear（匀速）;

@-webkit-keyframes rotate {
    0%{transform: rotate(0deg)}
    100%{transform: rotate(-360deg)}
}

暂停、播放动画

var flag = true;
document.querySelector('button').onclick = function () {
    if (flag) {
        document.querySelector('.stop').style.webkitAnimationPlayState = 'paused';
        flag = false;
    } else {
        document.querySelector('.stop').style.webkitAnimationPlayState = 'running';
        flag = true;
    }
}

（2）颜色渐变

background: linear-gradient(to bottom right,black,white);

动画和渐变的文字特效：欢迎来到天空之城

.masked1{
   margin: 70px 70px;
   font-size: 28px;
   background-image: -webkit-linear-gradient(left, #0ee5ff, #f4ab20 50%, #0ee5ff 50%, #f4ab20 100%, #0ee5ff);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 2s infinite linear;
}
@-webkit-keyframes masked-animation {
    0%  { background-position: 0 0;}
    100% { background-position: -100% 0;}
}

（3）阴影

文本阴影（多个阴影中间用逗号）：text-shadow:水平（必须）  垂直  blur 颜色
js语法：
object.style.textShadow="2px 2px #ff0000"
h1{
     color: #F0F;
     font-weight: 200;
     font-size: 30px;
     text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
   }
   h2{
     color: #FfF;
     font-weight: 200;
     font-size: 20px;
     font-style: oblique;
     text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
   }

(4)过度

.shop:hover .shop-hidden{
    height: 100px;
}
.shop-hidden{
    position: absolute;
    top:40px;
    width: 300px;
    height: 0px;-------
    overflow:hidden;---------------
    line-height: 100px;
    right: 0;
    background-color: white;
    z-index: 999;
    transition: all .3s linear;这个例子是悬停展示，过度的是高height
}

媒体查询

内部：

<!--pc端-->
@media screen and (min-width:992px){}
<!--iPad端-->
@media screen and (min-width:768px) and (max-width:991px){}
<!--移动端-->
@media screen and (max-width:767px){}

外部引入：

<link rel="stylesheet" href="媒体查询/one.css" media="screen and (max-width:1000px)">
<link rel="stylesheet" href="媒体查询/two.css" media="screen and (min-width:1000px)">

rem原理：用js获取屏幕宽度。