(2019)[前端]面试题[1]:小知识点大集合

无道 2019-10-07 0 条评论 前端相关 阅读30 手机阅读

问题

这里集合一下小的、杂碎的知识点。

Hello,欢迎来到我的博客,每天一道面试题,我们共同进步。

1.CSS属性是否区分大小写?

答:不区分,(HTML, CSS都不区分,但为了更好的可读性和团队协作,一般都小写,而在XHTML 中元素名称和属性是必须小写的。)

2.对行内元素设置margin-top 和margin-bottom是否起作用

答:不起作用。(需要注意行内元素的替换元素img、input,他们是行内元素,但是可以为其设置宽高,并且margin属性也是对其起作用的,有着类似于Inline-block的行为)。

<style>
    body {
        background-color: lightseagreen;
    }

    span {
        margin-top: 30px;
        margin-bottom: 30px;
        background-color: green;
    }

    img {

        margin-top: 100px;
        margin-bottom: 100px;
        background-color: yellowgreen;
    }
</style>
<div>
    <span>我是行元素</span>
</div>
<div class="">
    <img src="" alt="我是img的行内元素">
</div>

截图-1569932298

3.对内联元素设置padding-top和padding-bottom是否会增加它的高度

答:不会。同上题,要注意行内元素的替换元素,img设置padding-top/bottom是会起作用的

4.说说从输入URL到看到页面发生的全过程,越详细越好

  1. 首先浏览器主线程接管,开一个下载线程。
  2. 然后进行HTTP请求(DNS查询、IP寻址等等),中间会有三次握手,等待响应,开始现在响应报文。
  3. 将下载完的内容转交给Renderer进程管理。
  4. Renderer进程开始解析css rule tree 和dom tree,这两个过程是并行的,所以一般我会把link标签放到页面的顶部。
  5. 解析绘制过程中,当浏览器遇到link标签或者script、img等标签,浏览器会去下载这些内容、遇到的时候缓存的使用缓存,不适用缓存的重新下载资源。
  6. css rule tree和dom tree生成完了之后,开始合成render tree,这个时候浏览器会进行layout,开始计算每一个节点的位置,然后进行绘制。
  7. 绘制结束之后,关闭TCP连接,过程有四次挥手。

5.三次握手,四次挥手

(1) 第一次握手:建立连接时,客户端A发送SYN包(SYN=j)到服务器B,并进入SYN_SEND状态,等待服务器B确认。

(2) 第二次握手:服务器B收到SYN包,必须确认客户A的SYN(ACK=j+1),同时自己也发送一个SYN包(SYN=k),即SYN+ACK包,此时服务器B进入SYN_RECV状态。

(3) 第三次握手:客户端A收到服务器B的SYN+ACK包,向服务器B发送确认包ACK(ACK=k+1),此包发送完毕,客户端A和服务器B进入ESTABLISHED状态,完成三次握手

第一次挥手:Client发送一个FIN,用来关闭Client到Server的数据传送,Client进入FIN_WAIT_1状态。

第二次挥手:Server收到FIN后,发送一个ACK给Client,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号),Server进入CLOSE_WAIT状态。

第三次挥手:Server发送一个FIN,用来关闭Server到Client的数据传送,Server进入LAST_ACK状态。

第四次挥手:Client收到FIN后,Client进入TIME_WAIT状态,接着发送一个ACK给Server,确认序号为收到序号+1,Server进入CLOSED状态,完成四次挥手。

6.display:none 和 visibility:hidden的区别

都是元素隐藏,在文档流中,display:none不占位置。visibility:hidden占位置。 性能上,display比visibility差。display控制显示隐藏时,页面会产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建,此时就是回流。所有页面第一次加载时需要产生一次回流)

7.什么是回流和重绘

重绘(repaints)是一个元素外观的改变所触发的浏览器行为,例如改变vidibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。重绘不会带来重新布局,并不一定伴随回流。 回流(reflow)是更明显的一种改变,可以理解为渲染树需要重新计算。

8.CSS3那些新增属性

CSS3实现圆角(border-radius:8px),
阴影(box-shadow:10px),
对文字加特效(text-shadow),
线性渐变(gradient),
旋转(transform)
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器  多背景 rgba

9.HTML5那些新增属性

html5新增:canvas绘画,本地离线存储localStorage,sessionStorage,video和audio元素,语义化元素,表单类型(date,time,email等),地理定位等等

10.跨域问题如何解决

  1. 通过jsonp跨域

  2. postMessage跨域

  3. 跨域资源共享(CORS)

    普通跨域请求:只服务端设置Access-Control-Allow-Origin即可,前端无须设置,若要带cookie请求:前后端都需要设置。

  4. nginx代理跨域:nginx配置解决iconfont跨域 ,nginx反向代理接口跨域

  5. nodejs中间件代理跨域: vue框架的跨域webpack.config.js部分配置

  6. WebSocket协议跨域

详解:https://segmentfault.com/a/1190000011145364

11.如何优化网页加载速度

  1. 减少http请求:图片地图,CSS Sprites(精灵图)。
  2. 使用CDN:内容发布网络(CDN)是一组分布在不同地理位置的Web服务器,用于更加有效的向用户发布内容。
  3. 添加Expires头:告诉客户端可以使用一个组件的当前副本,直到指定时间为止。
  4. 压缩组件,代理缓存
  5. 样式防头部,脚本放底部
  6. 避免CSS表达式
  7. 使用外部的js和css
  8. 减少DNS查找
  9. 精简javascript
  10. 避免重定向
  11. 删除重复脚本
  12. 配置ETag
  13. 使Ajax缓存

详解:http://www.cnblogs.com/MarcoHan/p/5295398.html

12.块级元素和行内元素的区别?img可设置宽高吗?

块级元素

  • 独占一行,在默认情况下,其宽度自动填满其父元素的宽度
  • 块级元素可以设置width、height属性
  • 块级元素即使设置了宽度也是独占一行,块级元素可以设置margin、padding属性

行内元素

  • 行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到行排不下,就自动换行,其宽度随内容而变化
  • 行内元素的width、height属性则无效
  • 水平方向的padding、margin会产生边距效果,竖直方向的padding、margin不会产生边距效果

行内置换元素

浏览器依据元素的标签和属性来决定元素的具体显示内容

img、input、textarea、select、object属于行内置换元素, 具有块级元素的特征(除宽度外)

13.absolute定位 不设置top、right、bottom、left有什么效果?

元素脱离文档流,但因为没有设置属性导致无法具体定位,紧跟在上个元素之后,但下个元素排列时会忽略此元素。

截图-1570095687

<style>
    .common {
        width: 300px;
        height: 200px;
        border: 1px solid lightcoral;
    }

    .absolute {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: #ddd;
    }
</style>

<body>
    <div class="common"></div>
    <div class="absolute"></div>
    <div class="common"></div>
</body>

14.display:inline-block 什么时候会显示间隙?

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

15.行内元素有哪些?块级元素有哪些?空(void)元素有那些?

CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值

行内元素有:

<a> <span> <img> <input> <select> <label> <strong>(强调的语气)

块级元素有:

<div> <ul> <ol> <li> <dl> <dt> <dd> <h1> <h2> <h3> <h4>…<p> <table> <form>

常见的空元素:

 <br> <hr> <img> <input> <link> <meta>

鲜为人知的[空元素]是:

<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

16.同源策略

源(origin)就是协议、域名和端口号。 若地址里面的协议、域名和端口号均相同则属于同源。 以下是相对于 http://www.a.com/test/index.html 的同源检测

http://www.a.com/dir/page.html ----成功

http://www.child.a.com/test/index.html ----失败,域名不同

https://www.a.com/test/index.html ----失败,协议不同

http://www.a.com:8080/test/index.html ----失败,端口号不同

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
修改: 10月07日 22:00
这篇文章还没有评论呢~
点击刷新/生成验证码