首页 > 其他分享 >信锐一面面试准备-面经总结

信锐一面面试准备-面经总结

时间:2022-09-06 21:33:09浏览次数:78  
标签:flex 缓存 面试 面经 tcp 信锐 50% margin 客户端

   1.水平垂直居中的几种方法

       (1). 水平居中

                         1. inlie元素:text-align:center

         2. block元素:margin:auto

                         3. absolute元素:left:50%+margin-left:负的宽度的一半/translateX(-50%)

            (2). 垂直居中

                        1.inline元素:height等于line-height 

                          2. absolute元素:top:50%,margin-top:负的高度的一半/translateY(-50%)

               (3). 水平垂直居中

               1. 元素固定宽高

                 利用定位+calc(position:absolute,top:calc(50% - 高度一半) ,left:calc(50% - 宽度一半))

                      利用定位+margin负值(top:50%+margin-top:负的高度的一半,left:50%+margin-left:负的宽度的一半)

            利用定位+margin:auto(position:absolute,top:0;bottom:0;left:0;right:0;)

            利用定位+transform:translate(-50%,-50%)            

            flex布局:display:flex,justify-content:center align-item:center

                grid布局:display:grid,justify-content:center align-item:center

       2.css三角形的制作方法

               1. 利用border(width和height设置为0,如果想让哪一边可见,就让那个边的对边设置为可见的颜色,其余的设置为透明)

               2. 利用clip-path(clip-path: polygon(0 0, 0% 100%, 100% 50%);)

     3. 利用background-image:通过linear-gardient来画三角形,background-position来调整位置,background-size来调整大小

        3. flex的各种属性

                   flex的属性分为容器属性项目属性

        1.容器属性:flex-direction(设置主轴的方向),flex-wrap(控制是否折行),justify-content(控制主轴的对齐方式),align-items(控制侧轴的对齐方式)  align-content(控制多行情况下,副轴的对齐方式)

        2.项目属性:order(控制每个flex项目如何排序),flex-grow(控制当容器空间不足时项目的扩展比率,默认不扩展) flex-shrink(控制容器空间不足时项目的收缩比率,默认是1也就是空间不足时会收缩),flex-basis(定义了项目的默认大小,默认是auto即参照本身的宽和高)

       3: 常用flex:1(1即 1 1 auto 也就是有剩余空间时会自动扩展 没有剩余空间时会自动收缩 以本身的宽和高作为伸缩基准)

       4.双飞翼和圣杯布局

                  三栏布局,两侧固定,中间内容随着宽度自适应

      1. 使用float布局

      2. 在两侧使用margin负值,移动两侧的块

      3. 防止中间内容被覆盖,一个用padding另一个用margin

           4. 圣杯布局用padding留空,使用margin-right移动右边的块,双飞翼使用margin留空,使用margin-left

           5. tcp和udp,http和https

         1. tcp是面向连接的,udp是无连接的,tcp是可靠的无差错的,udp是不可靠的,tcp是端对端传输,udp可以一对一、一对多、多对多,tcp有拥塞控制和流量控制,udp则没有这些机制,tcp是流式传输数据保证数据的顺序和完整性,udp则是一个包一个包发送容易乱序和丢包

              2.http是明文传输,容易被劫持。故此有了https,https就是http+ssl/tls(后者是前者的标准版本),https的基本过程就是首先客户端向服务端发送https请求,服务器先将含有公钥的密钥发送给客户端,客户端对证书进行合法性检测(递归),若不合法报https警告,若合法则在客户端生成一个用于随机加密的key,再用公钥加密后发送给服务端,服务端用私钥解密这个key,随后用这个key进行对称加密传输。

         3.https的证书是为了解决中间人劫持的问题,关键就在于客户端不知道是不是服务端发送的请求,这个时候就需要证书了,证书一般是经过认证的机构颁发的。证书中含有数字签名,数字签名是用机构的私钥生成的,证书内包含公钥和哈希算法的实现,公钥用来解密数字签名,再用证书内的哈希算法来对明文部分进行哈希,结果和公钥解密出来的一样就说明是正确的。

    6.  浏览器缓存

             浏览器缓存的发展有一定的时间脉络,从时间上看是expires、cache-control到last-modified,etag这样,expires和cache-control是强制缓存,强制缓存的思路就是指定一个过期时间,在这个时间之前客户端都不需要向服务器请求资源,expires是过期日期,但是如果指定的是日期的话会产生一些问题,比如客户端和服务器时区不一样这样就会产生,实际已经过期但是客户端认为没有过期诸如此类的情况出现。为了解决这个问题,开始使用cache-control:max-age=xxx,规定还有多少秒过期,客户端可以根据自己的有效时间计算过期日期,但是这也有问题,就是这个cache-control只能精确到秒级,要是在一秒内多次改变那么就无法捕捉到,而且强制缓存本身也有问题,指定了过期日期但是在这之前服务器改变了资源,就无法知道,客户端和服务端存在一段时间的资源不同步情况。为此出现了协商缓存机制,协商缓存通过上次修改日期last-modified和etag文件版本号这两种,last-modified就是服务器响应客户端请求时会带上last-modified:xxx这个字段表示文件的最后修改时间,客户端再次请求时会带上If-modified-since:xxx来验证自从这个时间之后有无修改文件,如果修改了返回200和新的资源,没有修改返回304。问题是最后修改时间变了并不一定表示文件内容有改变,而且时间也是只能精确到秒级。这样就催生了etag的出现,etag就是文件的版本号,只有文件真正改变了才会改变,这样当第一次客户端向服务器请求时返回etag:xxx这个字段,当再发请求时就会带上if-none-match这个字段,如果版本号不一样说明文件修改了,返回200和新的资源,如果一样说明没修改,返回304。有强制缓存的时候用强制缓存,没有才用协商缓存expires和cache-control同时存在会用cache-control,last-modified和etag同时存在则请求时会同时带上if-modified-since和if-none-match。手动刷新那么强制缓存失效,强制刷新(ctrl+f5)那么强制缓存和协商缓存都会失效。

    7.从输入url到渲染的过程

          1.地址栏输入url按下回车

               2.浏览器寻找该url是否存在缓存,并判断是否过期

               3.开始进行DNS解析,将url和ip地址对应起来

               4.建立tcp连接,三次握手

          5.发送http请求

          6.浏览器处理服务器的响应数据

          7.浏览器渲染页面

         8.关闭tcp连接,四次挥手

    8.vue响应式的原理

              vue的数据双向绑定主要是通过Object.defineProperty()和发布订阅模式结合实现的,通过劫持每个属性的getter和setter属性,在数据变动时发布消息给订阅者,从而调用相应的回调来更新视图。Object.defineProperty()会在一个对象上定义新的属性或者修改一个属性,第一个参数是要定义的对象,第二个参数是属性名,第三个对象是属性描述符。发布订阅模式是一种设计模式,发布者有添加订阅者和通知订阅者两种方法,当时机成熟时通知调用订阅者的回调函数以通知订阅者。

         基本的流程是

             1. 给需要监听的数据进行递归遍历加setter和getter,这样一旦数据变化就会触发setter

                   2. complie主要的作用是给每个指令对应的节点绑定更新函数,解析模板指令将模板中的变量更换成数据

             3.dep监听变化,一旦有变化通知watcher,wachter再重新调用重新渲染的函数

      9.简单描述一下websocket

          websocket是全双工通信,是一种持久化协议,长连接通信,只需要建立一次tcp链接,以后的通信都通过这个连接,在握手阶段采用http,服务器可以主动向客户端请求,请求量小。

      

         

                     

 

标签:flex,缓存,面试,面经,tcp,信锐,50%,margin,客户端
From: https://www.cnblogs.com/gueth/p/16659927.html

相关文章