资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/前端面试基础(1年以内需掌握)

前端面试基础(1年以内需掌握)

xiaochao / 341人阅读

摘要：客户端数据存储，能维持在多个会话范围内。向元素开头插入由参数指定的内容。向匹配的元素添加指定的类名。移除指定的属性。主要解决了中大量的操作使页面渲染性能降低，加载速度变慢，影响用户体验。区别数据驱动，通过数据来显示视图层而不是节点操作。

金三银四 公司让我面试 1年经验的前端，特此花时间研究了一番面试题，近日整理了一下想分享出来，让更多小掘友看到，在我看来 这些基本都是必备的知识点
css常用布局
基本值 flexbox grid table float布局
none flex grid table float-fixed
inline inline-flex inline-grid table-row float-fluid
block table-cell 960网格布局
inline-block
使用inline-block 的问题以及解决方案

水平间隙问题 这是因为编写代码时输入空格、换行都会产生空白符。而浏览器是不会忽略空白符的，并且对于多个连续的空白符自动合并成一个，故产生了所谓的间隙。

一般来说我们有两种方法来去掉这个换行引起间隙：
代码不换行   和     设置 font-size。

(推荐)通过设置父元素的 font-size 为 0 来去掉这个间隙，然后重置子元素的 font-size，让其恢复子元素文字字符。 只要设置 inline-block 就要去间隙

float清除浮动详解

主要是为了解决由于浮动元素脱离文流导致的元素重叠或者父元素高度坍塌的问题

清除前面兄弟元素浮动

清除前面兄弟元素浮动很简单，只需要在不想受到浮动元素影响的元素上使用 clear:both 即可

闭合子元素浮动

    给元素设置 clearfix 常用

通过父元素的伪元素（::after）实现的著名 clearfix 方法，代码如下：

"container clearfix">
    
"box">



.clearfix::after {
    content:"";
    display:table;
    clear: both;
}
给父元素增加一个专门用于处理闭合子元素浮动的 clearfix 类名，该类使用 ::after 伪元素类选择器增加一个内容为空的结构来清除浮动.

    给父元素新建一个 BFC(块格式化上下文)

请详情讲一下定位方式

实现一个弹窗 全屏居中的效果。

    div使用绝对布局，设置 margin:auto; 并设置 top、left、right、bottom 的值相等即可，不一定要都是0。

.center{
    text-align: center; /*让div内部文字居中*/
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

    绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。

.center{
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
说下几种常用选择器

五大类选择器：

    基本选择器

元素选择（直接获取元素名 P、h1）【过于直接】

ID选择（#id）【取值唯一不能复用】

类选择（.class）【组合、复用】

* 通用选择器(所有元素)

    关系选择器

    伪类选择器

:nth-child(n) ： n可以是数字(4)、关键词(old,even)或公式(2n+1)

:active: 将样式添加到被激活的元素

:focus: 将样式添加到被选中的元素

:hover: 鼠标悬浮在元素上时 添加样式

:link: 添加到未被访问过的链接

:visited 添加到被访问过的链接

:first-child: 添加到元素的第一个子元素

:lang： 定义使用的语言

    伪元素选择器 :first-letter : 添加到文本的首字母 :first-line : 添加到文本的首行 :before : 某元素之前插入某些内容 :after : 某元素之后插入某些内容

    属性选择器

说一下 CSS3新特性

    HTML5 语义元素

    HTML5 Web 存储

sessionStorage: 客户端数据存储，只能维持在当前会话范围内。

localStorage: 客户端数据存储，能维持在多个会话范围内。对象存储的数据没有时间限制。对于大量复杂数据结构，一般使用IndexDB

    CSS3 多媒体查询 @media all and(min-width:800px){...}

    CSS3 转换和变形：transform

    CSS3 过渡：transition

    CSS3 动画：animation

异步请求实现方式

    最原始的js ,new XMLHttpRequest(); //由于浏览器兼容的原因，代码复杂，多使用基于jQuery的异步请求方法（内部封装）

    基于jQuery的Ajax方法：

    Vue--axios （promise）

讲一下 自己 代码 调试方法

JS数组操作

concat() 链接两个或更多的数组,并返回结果

join() 把数组通过指定分隔符进行分割并拼接成一个字符串

pop() 删除并返回数组的最后一个元素

push() 向数组的末尾添加一个或更多元素,并返回新长度

reverse() 反转数组中元素的顺序

Jq DOM选择器、DOM文档操作

append() : 向元素结尾插入由参数指定的内容。

prepend():向元素开头插入由参数指定的内容。

after() : 在匹配的元素之后插入内容。

before(): 在每个匹配的元素之前插入内容。

addClass():向匹配的元素添加指定的类名。

attr() :设置或返回匹配元素的属性和值。

removeAttr():移除指定的属性。

Vue框架的优势

    MVVM: Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑； View 代表UI 组件，它负责将数据模型转化成UI 展现出来， ViewModel 是一个同步View 和 Model的对象。

    mvc和mvvm其实区别并不大。都是一种设计思想。 主要就是mvc中Controller演变成mvvm中的viewModel。 mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

区别 vue数据驱动，通过数据来显示视图层而不是节点操作。场景：数据操作比较多的场景，更加便捷

vue生命周期（详解）

beforeCreate：初始化了部分参数，如果有相同的参数，做了参数合并，执行beforeCreate；el和数据对象都为undefined，还未初始化；

created：初始化了 Inject、Provide 、props、methods、data、computed和watch，执行created ；data有了，el还没有；

beforeMount：检查是否存在el属性，存在的话进行渲染dom操作，执行beforeMount；$el和data都初始化了，但是dom还是虚拟节点，dom中对应的数据还没有替换；

mounted：实例化 Watcher,渲染dom，执行mounted；vue实例挂载完成，dom中对应的数据成功渲染；

beforeUpdate：在渲染dom 后，执行了mounted 钩子后，在数据更新的时候，执行 beforeUpdate；

updated：检查当前的watcher列表中，是否存在当前要更新数据的watcher，如果存在就执行updated；

beforeDestroy：检查是否已经被卸载,如果已经被卸载,就直接return出去,否则执行beforeDestroy；

destroyed：把所有有关自己痕迹的地方，都给删除掉；

git常用命令 
git clone:  下载初始化
Git add:添加
Git commit -m ‘ ’ :提交 带消息
Git push：推送
Git pull： 拉取

前端1W左右的面试

转载请标注 出处谢谢~         感觉有帮助的不妨圈起来，后期不定期发布前端知识
私有云 海外云主机 java基础需要掌握 前端需要掌握哪些 前端需要掌握什么 前端开发需要掌握

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/6890.html

相关文章

  • 腾讯前端求职直播课——笔试篇

    摘要：主讲人黎腾年加入腾讯，技术面试官引入面试是一个让面试官认识你的过程，尽全力展现的你就好，正常发挥没通过再接再厉，失常发挥没通过实为遗憾要求要求找准定位，重视基础前端发展日新月异，打牢基础原生，才能以不变应万变如性能，安全要求用更远的视角去看 主讲人：黎腾(Litten)：13年加入腾讯， 技术面试官 1.引入 面试是一个让面试官认识你的过程，尽全力展现100%的你就好，正常发挥没通过...

    Sunxb 评论0 收藏0

  • 腾讯前端求职直播课——笔试篇

    摘要：主讲人黎腾年加入腾讯，技术面试官引入面试是一个让面试官认识你的过程，尽全力展现的你就好，正常发挥没通过再接再厉，失常发挥没通过实为遗憾要求要求找准定位，重视基础前端发展日新月异，打牢基础原生，才能以不变应万变如性能，安全要求用更远的视角去看 主讲人：黎腾(Litten)：13年加入腾讯， 技术面试官 1.引入 面试是一个让面试官认识你的过程，尽全力展现100%的你就好，正常发挥没通过...

    cnTomato 评论0 收藏0

  • 腾讯前端求职直播课——笔试篇

    摘要：主讲人黎腾年加入腾讯，技术面试官引入面试是一个让面试官认识你的过程，尽全力展现的你就好，正常发挥没通过再接再厉，失常发挥没通过实为遗憾要求要求找准定位，重视基础前端发展日新月异，打牢基础原生，才能以不变应万变如性能，安全要求用更远的视角去看 主讲人：黎腾(Litten)：13年加入腾讯， 技术面试官 1.引入 面试是一个让面试官认识你的过程，尽全力展现100%的你就好，正常发挥没通过...

    yintaolaowanzi 评论0 收藏0

  • 前端实习面试的一些建议

    摘要：作者今年大三，在春招过程中参加了多家大公司的面试后，拿到了腾讯的前端实习，在这里做一些总结，希望给还未参加过实习面试的同学一些帮助。在之后的面试时就更加从容一些了。 作者今年大三，在春招过程中参加了多家大公司的面试后，拿到了腾讯的前端实习 offer，在这里做一些总结，希望给还未参加过实习面试的同学一些帮助。 一、简历的准备 简历制作是很重要的一个环节，一份好的简历会给面试官留下很不错...

    Rango 评论0 收藏0

  • java面试总结

    摘要：面试总结因为我是开发，所以面试的都是后端开发，只能总结一些这方面的题。因为我也没有面试太多的公司，在小城市，没有太多的大公司，所以总结的只有这些，希望想要换工作的人，提前准备。 好久没有更新文章了，不是因为偷懒，是因为忙着准备面试了，现在总结下最近的面试心得，希望对大家有帮助 时刻准备着 每次入职一个公司，我们都是想着一直干下去的，但是这只不过是我们的一厢情愿罢了，工作中有太多的不可控...

    Lionad-Morotar 评论0 收藏0

发表评论

登陆后可评论

0条评论

xiaochao

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<