前端面试题总结

最新推荐文章于 2024-09-11 18:04:04 发布

newpepole

最新推荐文章于 2024-09-11 18:04:04 发布

阅读量195

点赞数

文章标签：前端 css css3 vue.js react

本文链接：https://blog.csdn.net/newpepole/article/details/125676901

版权

今天开始总结下面试题，以此记录哈

前端面试题分类分板块

html

先将一个概念性东西，html是什么。html是一种超文本标记语言，也是浏览器可识别的一种特殊编码。
当前面试html问题很少提到了。就做简单的介绍。
1、html中的块元素和行内元素.
行内元素（由内容填充宽高的元素）： a、b、br、code、em、 font、i、img、input、span、strong、textarea、u
块状元素（宽高可控，可以设置）： div h1—h6. hr p ul li. ol. li address、blockquote、center

   行元素和块元素区别：
          1).块级元素会独占一行，其宽度自动填满其父元素宽度
           行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
          (2). 一般情况下，块级元素可以设置 width, height属性，行内元素设置width, height无效
 (注意：块级元素即使设置了宽度，仍然是独占一行的)
         (3).块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）

html5 也增加了一些元素标签，其特点是寓意话
如：头部标签 header 、导航标签 nav 、地址标签 address 、主要内容标签 main、文章标签article、区域标签section、侧边栏 aside、脚注标签footer、视频 video、音频audio。

css

      关于css面试喜欢问的也不多，大概有两个问题。
      1、css清除浮动方法（该问题相关问题是 让元素水平垂直居中有哪几种方式）
              css清除浮动方法：
              1、父元素直接设置高度（极度不推荐、没有办法适用弹性布局）
              2、额外标签法，在父元素内容的最后添加一个块级元素并且给添加的块级元素设置 clear:both
              3、伪元素法：1、单伪元素 ::after {clear:both}  2、双伪元素。::after,::before{clear:both}
              4、给父元素设置overflow : hidden
     2、CSS优化、提高性能的方法有哪些？
          1、避免过度约束
          2、避免后代选择符
          3、避免链式选择符
          4、使用紧凑的语法
          5、避免不必要的命名空间
          6、避免不必要的重复
          7、 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
          8、避免！important，可以选择其他选择器
          9、尽可能的精简规则，你可以合并不同类里的重复规则

js

      js相关问题有点个性化。大致归属于三类
         1、数组或字符串的操作方法
               数组常见的 去重和排序算法。set、sort 
               字符串的统计每个字母出现次数： 本人喜欢 借助 reduce
               ```
               var s='asbhdbyasaies'
             const Count= [...s].reduce((res,c)=>{
               res[c]?res[c]++:res[c] = 1
               },{})
               
              ```
          2、宏任务和微任务
                先要了解宏任务和微任务的执行逻辑。
                依照代码顺序读取，宏任务存在 宏任务队列、微任务存在微任务队列。 执行完一个宏任务就去看微任务队列是否有任务，有则执行，没有就继续执行下一个红任务。
         3、性能优化
                1、必须依赖的js文件放在顶部，不重要放在底部
                2、跟踪事件处理程序的使用，避免处理程序在预料外情况执行
                3、非必要依赖不加载
                4、批处理事件方法（javascript单线程就需要使用 异步从而不被阻塞，或者使用中间件）
                5、最好使用 http 2 复用连接（前端仅需了解）

拓展性问题

       从浏览器输入url到页面展示经历哪些过程。
        分为两个过程：资源请求过程和 资源渲染过程
        资源请求过程：输入url判断浏览器是否缓存url地址，有缓存则直接请求，没有会请求dns服务器获取目标域名的服务器ip，经历三次握手，中间传递ack标识是信息可靠，握手成功浏览器发起 http请求，服务器返回资源数据包，浏览器响应数据。
        资源渲染过程：浏览器接收到请求资源开始解析，html、css  js。根据html生成 dom节点，加载css基本属性浏览器引擎生成 layout 层，到这里已经有了基本的页面样式，加载js文件 重新生成dom树开始比较是否有 js改变布局引起重排，是否颜色改变引起重绘。虚拟dom生成后浏览器渲染引擎 生成 layer 层，进行渲染最新的 dom画面。
        至此整个过程已经完成。（这里是粗略的过程，更详细的 dns、三次握手、浏览器渲染的过程以后会 写一遍新的文章记录）