前端面试题汇总面试题汇总一、H5,css二、js基础三、ajax/计算机网络相关四、webpack五、ES6六、非-常规问题

68 阅读 0 评论 45 点赞

我是靠谱客的博主微笑战斗机，最近开发中收集的这篇文章主要介绍前端面试题汇总面试题汇总一、H5,css二、js基础三、ajax/计算机网络相关四、webpack五、ES6六、非-常规问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

面试题汇总

文章目录

面试题汇总
一、H5,css
- HTML 的语义化你是怎么理解的？
- 实现一个左侧固定，右侧自适应的布局？
- ***说一下对 BFC 的理解？
- 如果数组里边是字符串类型如何排序?
- 移动端适配
- 盒子模型
- 清除浮动的方法
- 常见的布局方法有哪些？他们的优缺点是什么？
- 常见的盒子垂直居中的方法有哪些请举例3种？
- 说一下 Less 你用过哪些特性（除了变量嵌套计算再找几条）？
- 什么是回流和重绘,如何减少回流和重绘
- 假如有 10000 个元素需要添加到页面上，你觉得怎么操作性能最好（考察文档碎片）？
- 移动端 300ms 延迟是怎么回事，你是怎么处理的？
- 做移动端开发时，有没有碰到过什么问题（考察移动端的兼容性，搜索一下，找几条）？
- 移动端有哪些常见的问题，都是怎么解决的？
- 移动端 1px 的问题了解吗？
- 白屏现象与优化建议：
- FOUC现象与优化建议：
二、js基础
- js的数据类型有哪些？
- 请写至少三种数组去重的方法？（原生js）
- 数组常用的方法/及返回值
- 数组的 push 和 pop 方法的返回值是什么
- 什么是伪数组，伪数组怎么转真数组，Array.from、{...伪数组}（三个点只能处理可迭代数据）？
- 变量提升、作用域、作用域链
- - - - 变量提升
      - 作用域
      - 作用域链
- 什么是原型(prototype)
- 什么是原型链？
- 什么是闭包？手写一个闭包函数？闭包有哪些优缺点？
- 什么是递归，递归有哪些优点或缺点？
- 什么是深拷贝、什么是浅拷贝？
- this 的指向有哪些？
- new关键字做了哪些事情
- localStorage与sessionStorage区别
- ***call apply bind区别
- ***如何判断数据类型
- 节流和防抖
- for--in和for--of的区别
- js的执行机制(事件循环机制 EventLoop)
- - - - 宏观任务、微观任务
      - 同步任务、异步任务
- js延迟加载的方式(原理:异步操作)
- 垃圾回收机制
- js实现继承(组合继承= call式继承 + 原型继承)
- 常见的继承有哪些？
- 事件冒泡,事件委托
三、ajax/计算机网络相关
- ajax、axios、fetch区别
- get和post的区别
- - 传参方式不同
  - 数据大小不同
  - 传输速度不同
- 跨域
- - - 同源策略
    - 解决跨域问题
- 本地存储
- - Cookie(存储token时会用到)
  - SessionStorage(上限5MB)
  - LocalStorage
- 地址栏输入地址做了哪些事情
- https和http的区别
- http状态码分别代表什么意思？
- TCP、UDP协议
- 请求头中的contentType有什么用处
- 安全问题：CSRF 和 XSS攻击？
- CSRF 和 XSS 的区别
- cookie和session 的区别
- token是什么
- post和get的区别
- cdn 为什么能给前端实现加速
四、webpack
- 五大核心概念
- babel
五、ES6
- 对ES6对理解
- var、let、const区别
- symbol
- 回调地狱
- Promise
- async await 是什么？它有哪些作用？
- 箭头函数和普通函数的区别
- forEach和map的区别
- Set、Map的区别
- - - Set(数组去重)
    - Map(数据储存)
    - 区别
- ES6中的class类
- 知道lodash吗？它有哪些常见的API ？
- 模块化
- 什么是mvvm，mvc模型
- 组件中name选项的作用
- vue2中响应式的原理
- vue双向绑定的原理
- Object.defineProperty()数据劫持缺陷
- new Vue的流程
- vue生命周期
- v-if 和v-show有什么区别？
- 组件是什么? 好处
- 组件-scoped作用
- v-for 循环为什么一定要绑定key key的作用:?
- 组件中的data为什么要定义成一个函数而不是一个对象？
- 父子组件的生命周期钩子:
- Vuex状态管理模式
- - - - mutation和action的区别
    - Vuex和localstory的区别
- vuex持久化操作
- 计算属性和watcher的使用区别:
- vue2中v-model是一个语法糖，那具体是怎么实现的？
- 路由守卫
- hash和history的区别
- - - - hash
      - history
    - 动态路由
    - - 定义方式
      - router和router 和router和route
- 怎么理解 vue 中的虚拟 DOM
- 模版编译原理
- diff算法逻辑
- vue实例是挂载到那个标签上的？
- keep-alive原理
- active-class 是哪个组件的属性
- route和router的区别
- vue-router怎么配置路由
- 平时都是用那些工具进行打包的？babel是什么？
- 图片懒加载是怎么实现的？
- vue中computed 和watch 的区别是什么？
- nextTick的原理
- vue中的组件通讯方式
- v-model和.sync的对比
- vue路由钩子beforeEach的参数
- vue2中如何自定义指令
- CDN
- 说一下什么是动态组件和异步组件？
- 创建 store 实例的时候，除了 state、mutations、actions、getters、mudules，plugins 选项是干什么的，你用过吗（讲过 vuex-persistedstate 这个插件可以做 vuex 中的数据持久化，百度一下）？
- vue2中vue.use是怎么用的
- vue-cli 2.0和3.0 有什么区别？
- vue2和vue3的区别:
- vue3的响应式原理
- Object.defineProperty和proxy的区别
- vue中组件和插件有什么区别
- - **使用场景**
- Vue 相关的性能优化
- v-for / v-if 为什么不建议放一行？如何处理？Vue3 呢？
- 说一下对 Vue3 的了解？
- 你项目中是怎么组织接口请求的，axios 封装，你都封装了哪些东西？
- 怎么配置 vue-cli 这个工具呢，你都配置过哪些东西（vue.config.js）？
- 了解 Webpack 吗，说一下常见的配置？
- node.js是什么? 怎么用? 好处是什么? 解决了什么问题? 原理是? 场景是? 有没有什么替代方案?
- NPM是什么? 怎么用? 好处是什么? 解决了什么问题? 原理是? 场景是? 有没有什么替代方案?
- yarn是什么? 怎么用? 好处是什么? 解决了什么问题? 原理是? 场景是? 有没有什么替代方案?
- webpack是什么? 怎么用? 好处是什么? 解决了什么问题? 原理是? 场景是? 有没有什么替代方案?
- webpack-配置修改
- 脚手架是什么?怎么用?好处是?
- vue是什么? 怎么用? 好处是什么? 解决了什么问题? 原理是? 场景是? 有没有什么替代方案?
- jQuery是什么? 怎么用? 好处是什么? 解决了什么问题? 原理是? 场景是? 有没有什么替代方案?
- layui是什么? 怎么用? 好处是什么? 解决了什么问题? 原理是? 场景是? 有没有什么替代方案?
- 除了变量、嵌套，你还使用过哪些和Less/Sass相关的特性？
- 作为这个系统的使用者.我该怎么使用?
- 封装了什么组件,用到了哪些技术点?
六、非-常规问题
- 为什么 0.1 + 0.2 != 0.3

一、H5,css

HTML 的语义化你是怎么理解的？

可读性。代码结构清晰，便于理解，对人和机器的可读性都更好。
可维护和团队协作。清晰语义化的结构，可维护性更高，更有利于团队协作。
有利于搜索引擎优化（seo）

实现一个左侧固定，右侧自适应的布局？

左侧固定宽度右侧flex自适应 flex = 1
左侧浮动右侧设置宽度100%, 占据左侧普通流位置
左侧固定宽度左浮动, 右侧设margin-left等于左侧宽度
左侧固定宽度固定定位右侧宽度100%

***说一下对 BFC 的理解？

块级格式化上下文

bfc是指浏览器中创建了一个独立的渲染区域, 该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

创建BFC：

元素设置浮动：float有值并不为空
元素设置绝对定位： position（absolute、fixed）
overfilow值为：hidden、auto、scroll
display值为：inline-block、table-cell、table-caption、flex等

BFC作用：

解决margin重叠问题：由于BFC是一个独立的区域，内部元素和外部元素互不影响，将两个元素变为BFC，就解决了margin重叠问题
创建自适应两栏布局：可以用来创建自适应两栏布局，左边宽高固定，右边宽度自适应。
解决高度塌陷问题：在子元素设置浮动后，父元素会发生高度的塌陷，也就是父元素的高度为0解决这个问题，只需要将父元素变成一个BFC。

如果数组里边是字符串类型如何排序?

数组排序 sort(function (a,b) {})
return a - b 从小到大
return b - a 从大到小

移动端适配

flex布局自适应布局
rem 适配方案

rem 是一个相对单位，rem 就是 html 根文字的大小

通过媒体查询可以检测视口宽度然后根据不同视口宽度, 设置不同的根字号完成适配

vw/vh 适配方案

vw就是视口的宽度，vw 是个相对单位。

不管在什么屏幕下，我们把屏幕分为平均的 100等份。

盒子模型

在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

清除浮动的方法

浮动的盒子脱离标准流，如果父盒子没有设置高度的话，下面的盒子就会撑上来。

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

3.使用after伪元素清除浮动（推荐使用）

    .clearfix:after{
   /*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
   
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
｝

4…使用before和after双伪元素清除浮动

 .clearfix:after,.clearfix:before{
   
        content: "";
        display: table;
    }
    .clearfix:after{
   
        clear: both;
    }
    .clearfix{
   
        *zoom: 1;
    }

常见的布局方法有哪些？他们的优缺点是什么？

页面布局常用的方法有浮动、定位、flex、grid网格布局、栅格系统布局

浮动：

优点：兼容性好。
缺点：浮动会脱离标准文档流，因此要清除浮动。我们解决好这个问题即可。

绝对定位

优点：快捷。
缺点：导致子元素也脱离了标准文档流，可实用性差。

flex 布局（CSS3中出现的）

优点：解决上面两个方法的不足，flex布局比较完美。移动端基本用 flex布局。

网格布局（grid）

CSS3中引入的布局，很好用。代码量简化了很多。

利用网格布局实现的一个左右300px中间自适应的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html * {
   
            padding: 0;
            margin: 0;
        }
        /* 重要：设置容器为网格布局，宽度为100% */
        .layout.grid .left-center-right {
   
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;  /* 重要：设置网格为三列，并设置每列的宽度。即可。*/
        }
        .layout.grid .left {
   
            background: red;
        }
        .layout.grid .center {
   
            background: green;
        }
        .layout.grid .right {
   
            background: blue;
        }
    </style>
</head>
<body>
    <section class="layout grid">
        <article class="left-center-right">
            <div class="left">
                我是 left
            </div>
            <div class="center">
                <h1>网格布局解决方案</h1>
                我是 center
            </div>
            <div class="right">
                我是 right
            </div>
        </article>
    </section>
</body>
</html>

栅格系统布局

优点：可以适用于多端设备

常见的盒子垂直居中的方法有哪些请举例3种？

利用子绝父相定位的方式来实现

#container{
   
    width:500px;
    height:500px;
    position:relative;
}
#center{
   
    width:100px;
    hight:100px;
     position: absolute;
     top: 50%;
     left: 50%;
    margin-top:-50px;
    margin-left:-50px;
    
}

利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。

#container{

最后

以上就是微笑战斗机为你收集整理的前端面试题汇总面试题汇总一、H5,css二、js基础三、ajax/计算机网络相关四、webpack五、ES6六、非-常规问题的全部内容，希望文章能够帮你解决前端面试题汇总面试题汇总一、H5,css二、js基础三、ajax/计算机网络相关四、webpack五、ES6六、非-常规问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：前端
浏览次数：68 次浏览
发布日期：2024-06-03 05:20:02
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_7_o_26_f5_12__7__10_z.html

前端面试题汇总面试题汇总一、H5,css二、js基础三、ajax/计算机网络相关四、webpack五、ES6六、非-常规问题

概述

面试题汇总

文章目录

一、H5,css

HTML 的语义化你是怎么理解的？

实现一个左侧固定，右侧自适应的布局？

***说一下对 BFC 的理解？

如果数组里边是字符串类型如何排序?

移动端适配

盒子模型

清除浮动的方法

常见的布局方法有哪些？他们的优缺点是什么？

常见的盒子垂直居中的方法有哪些请举例3种？

最后

评论列表共有 0 条评论

发表评论取消回复

前端面试题汇总面试题汇总一、H5,css二、js基础三、ajax/计算机网络相关四、webpack五、ES6六、非-常规问题

概述

面试题汇总

文章目录

一、H5,css

HTML 的语义化你是怎么理解的？

实现一个左侧固定，右侧自适应的布局？

***说一下对 BFC 的理解？

如果数组里边是字符串类型如何排序?

移动端适配

盒子模型

清除浮动的方法

常见的布局方法有哪些？他们的优缺点是什么？

常见的盒子垂直居中的方法有哪些请举例3种？

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复