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

无道

发布于 2019-11-13 16:40:53

8180

发布于 2019-11-13 16:40:53

文章被收录于专栏：无道编程

问题

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

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>

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

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

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

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

通过jsonp跨域
postMessage跨域
跨域资源共享（CORS）普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。
nginx代理跨域：nginx配置解决iconfont跨域，nginx反向代理接口跨域
nodejs中间件代理跨域： vue框架的跨域webpack.config.js部分配置
WebSocket协议跨域

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

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

减少http请求：图片地图，CSS Sprites（精灵图）。
使用CDN：内容发布网络（CDN）是一组分布在不同地理位置的Web服务器，用于更加有效的向用户发布内容。
添加Expires头：告诉客户端可以使用一个组件的当前副本，直到指定时间为止。
压缩组件，代理缓存
样式防头部，脚本放底部
避免CSS表达式
使用外部的js和css
减少DNS查找
精简javascript
避免重定向
删除重复脚本
配置ETag
使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有什么效果？

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

<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 ----失败，端口号不同

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-10-07，如有侵权请联系 cloudcommunity@tencent.com 删除

http

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度