关于vue.js:2020-年我与技术面试那些事儿

前言

2020年,是个不平庸的一年,因为疫情的蔓延打乱了我的全盘打算。但在工作中,实现了指标我的项目、攻克了技术难关、学习了新的技术,也感激平台!

首先上来就是给一个思维导图分享:

思维导图


微信Web开发者工具

小程序开发环境,相干工具

小程序组件

小程序/小游戏

开发接口

开发接口

凋谢能力

小程序媒体原生能力

小程序原生能力

小程序设施原生能力

小程序设施原生能力

小程序界面/图形原生能力

小程序界面/图形原生能力

小程序界面/图形原生能力

说说我做为前端开发工程师为啥学习云开发呢?

因为云开发(Tencent CloudBase,TCB)是云端一体化的后端云服务 ,采纳 serverless 架构,免去了挪动利用构建中繁琐的服务器搭建和运维。同时云开发提供的动态托管、命令行工具(CLI)、Flutter SDK 等能力极大的升高了利用开发的门槛。应用云开发能够疾速构建残缺的小程序/小游戏、H5、Web、挪动 App 等利用。

对于小程序开发,大家对其生命周期函数大都小白都是蒙蒙的,所以我讲一下:小程序注册实现后,加载页面,触发onLoad办法。页面载入后触发onShow办法,显示页面。首先显示页面,会触发onReady办法,渲染页面元素和款式,一个页面只调用一次。当小程序后盾运行或跳转到其余页面时,触发onHide办法。当小程序有后盾进入到前台运行或从新进入页面时,触发onShow办法。当应用重定向办法wx.redirectTo(OBJECT)或敞开当前页返回上一页wx.navigateBack(),触发onUnload。

在开始小程序开发之前,须要注册小程序账号、私有云账号,购买云服务器、域名、申请SSL证书,还须要相干的配置,SSH连贯服务器、装置NodeJS、装置Nginx、装置MySQL、装置MySQL、导入SSL证书、测试Nginx、域名备案,才能够进行开发。

上面针对前端工程师的知识点开展介绍:

  1. 务必把握HTML(标签,属性,语义化)等。
  2. 务必把握CSS(文档流,盒模型,浮动,定位,继承,浏览器兼容性)等。
  3. 务必把握HTML5(新增的标签属性,以及外围JavaScript API)等。
  4. 务必把握CSS3(新增的属性,媒体查问,布局,动画)等。
  5. 务必把握Bootstrap(款式,组件)等。
  6. 务必把握JavaScript(ECMAScript核心技术,DOM相干技术,前端常见算法)等。
  7. 务必把握jQuery等相干技术。
  8. 务必把握挪动端相干问题。
  9. 务必把握开发兼容浏览器代码等问题。
  10. 务必把握面向对象等问题,如(面向对象编程中的类,继承等)。
  11. 务必把握Ajax与JSON等。
  12. 务必把握HTTP和HTTPS等。
  13. 务必把握Node.js(开发服务器端开发)等。
  14. 务必把握EMAScript5 和 EMAScript6 ,设计模式(工作中)等。
  15. 务必把握Vue.js(框架,插件),Angular(框架,插件),React(框架,插件)等。
  16. 务必把握游戏开发相干问题,网络安全相干问题,性能优化相干问题,模块化开发相干问题,CSS预编译相干问题,混合开发相干问题,前端工程化问题(前端工程化工具 WebPack,gulp)等。
  17. 务必把握版本管理工具(Git,SVN),测试相干问题。

针对公司面试官,会针对某一个问题,对面试者提出问题(若简历里没有对我的项目作出具体介绍即会开展对技术知识点的解答)

上面技术总结HTML:

  1. 标签要闭合,英文要小写,不要嵌套凌乱,用标签语义化来进步搜寻的概率,应用外链式的CSS和JS。(使构造,款式,行为拆散,内容可能被更多的设施拜访,代码简洁,开发组件化,代码易保护,可复用等)。

2.HTML是一种基于web网页的设计语言;XHTML是一种基于XML,语法严格,规范的设计语言。(不同:XHTML元素必须正确嵌套,元素必须敞开,标签必须小写,必须有根元素;HTML没有限度)

3.严格模式是 浏览器依照 web规范去解析页面的办法;混淆模式是一种向后兼容的解析办法。

(触发严格模式或者规范模式,就是在HTML标签前申明正确的DTD;触发混淆模式能够在HTML文档开始时不申明DTD,或者在DOCTYPE前退出XML申明)

4.动态网页是没有数据交互的网页(没有数据库参加,没有服务器数据的加载)。如动态网页只有(HTML+CSS+JavaScript);动静网页是有后盾数据参加的网页。(有动画的网页就是动静网页是谬误的认知)

5.DOCTYPE申明位于文档中的最后面,位于html标签前,通知浏览器的解析器用什么文档类型标准来解析这个文档。DOCTYPE不存在或格局不正确都会导致文档以混淆模式来出现。

严格模式下以浏览器反对的 最高规范来运行的,在混淆模式中,以向后兼容的形式来显示。

6.HTML语义化让页面的内容变得 结构化,便于浏览器解析和搜索引擎解析,进步代码的可保护度和可重用性。

7.锚点的应用形式:

id="" name="" 
<a href="#dadaqianduan">dadaqianduan</a>

8.构造标签:

<header>用于定义文档的页眉
<nav>用于定义页面的导航链接局部。
<section>用于定义文档中的节,示意文档中一个具体的组成部分。
<article>用于定义独立于文档其余局部的内容。
<footer>用于定义某区域的脚注信息。
<aside>用于定义页面的一些额定组成部分。

<a href="mailo:2xxx@qq.com>
<a href="javascript:void(0);">
超级链接用于创立一般超级链接,下载链接,电子邮件链接,分割咱们链接,空链接,锚点跳转,特定的代码性能。

9.IE的内核Trident;Firefox的内核(Gecko,Chrome,Safari(Webkit)…

10.div为网站布局的盒子标签,之前应用table布局会让网站加载慢,布局层级不清晰。

11.img标签上的title是为提供题目信息,当光标悬浮在标签上后显示的信息,而alt是当图片不能失常显示时,图片的替换文案。

12.上面空元素有:

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

13.src示意起源地址(示意引入),href示意超文本援用。

14.在新窗口关上链接的形式:

target=_blank

15.HTML是网页内容的载体;CSS是网页内容的体现;JavaScript是用来实现网页上的特效和交互。

16.应用iframe,能够解决加载迟缓的第三方内容,能够实现平安沙箱,能够并行加载脚本。然而应用iframe会阻塞主页面的Onload事件。iframe的内容即便是空的,加载它也是须要工夫的,iframe元素是没有语义的。

17.面试问考你对语义化的了解。

首先就是失落款式的时候,也可能让页面呈现出清晰的构造;有助于SEO进行抓取更多无效的音讯,语义化更具备可读性。

上面技术总结CSS:

1.css 根本选择器有:类选择器,属性选择器,ID选择器。CSS选择器的权重分 4 个等级,其中 !important 关键字优先级最高。

能够用0.0.0.0来示意 4 个等级:

内联款式的优先级为: 1.0.0.0

ID选择器的优先级为: 0.1.0.0

类属性选择器,属性选择器,伪类的优先级为:0.0.1.0

元素选择器,伪元素选择器的优先级为 0.0.0.1

通配符组合应用的时候,相应的层级权重也会减少

2.上面说说CSS引入的形式:行内式将款式 写在元素的style属性内;内嵌式将款式写在style元素内;外链式将通过Link标签,引入CSS文件内的款式。

link是XHTML的标签,除了加载css文件外,还能够加载rss等。@import只能加载css文件。

应用link援用css,在页面载入时同时加载,同步加载。

应用@import援用css,须要等到网页齐全载入后,再加载css文件,异步加载。

link是XHTML的标签,没有兼容问题;@import是在css2.1中提出的,不反对低版本的浏览器。

link的标签是DOM元素,反对应用JavaScript管制DOM和批改款式,@important是一种办法,不反对管制DOM和批改款式。

3.每次写浮动元素,会引起父元素的高度无奈被撑开,影响与父元素同级的元素;与元素同级的非浮动元素会紧随其后,会相似于遮蔽景象,这里留神如果一个元素浮动,那它后面的元素也是须要浮动的,不然会影响页面显示的构造。

当面试官问如何解决呢,首先第一个就是 能够为父元素设置 固定高度;第二能够为父元素设置overflow:hidden即可革除浮动,让父元素的高度被撑开;第三能够应用clear:both款式属性革除元素浮动。

这里阐明一下,有这两个设置clear:left或clear:right,是别离解决左浮动或右浮动,而这个clear:both是都能够解决两边浮动的。

而后对父元素增加after伪元素,设置属性content:””;display:block;clear:both;

应用clearfix:

.clearfix:after{
 content: "";
 display: block;
 clear: both;
}

4.地位定位:relative示意绝对定位,绝对于本人自身所在失常文档流中的地位进行定位;absolute示意为相对定位,绝对于最近一级定位,绝对于static的父元素进行定位;fixed用于生成相对定位,绝对于浏览器窗口或frame进行定位;static默认为没有定位;sticky用于生成黏性定位的元素,容器的地位能够依据失常文档流计算得出。

5.如果对内联元素设置float和absolute属性,让元素脱离文档流,并且能够设置其宽高。对于float可占据地位,不会笼罩在另一个BFC区域上,浮动的框能够向左或向右挪动,直到它的外边缘碰到蕴含框或另一个浮动框的边框为止。absolute会笼罩文档流中的其余元素,即遮蔽景象。

6.理解css选择器有哪些:id选择器,类选择器,标签选择器,相邻选择器,子选择器,后辈选择器,通配符选择器,属性选择器,伪类选择器,伪元素选择器。

如: #id, .id, div, h1+p, ul>li, li a, #, button[disabled="true"], a:hover, li:fefore

7.一些可继承款式:font-size,font-family color等,一些不可继承的款式:

border,padding,margin,width,height

8.说说css优先级:!important>style(内联)>id(权重100)>class(权重10)>标签(权重1)

9.为啥总有人写:

*{padding:0;margin:0;}

因为浏览器的兼容问题,不同的浏览器对某些标签的默认值是不同的,如果没有初始化css,往往会导致页面在不同浏览器之间呈现差别;这里留神初始化款式有时会对SEO产生肯定的影响。

10.居中,以及居中一个浮动元素。

div {
 float: left;
 width: 400px;
 height: 200px;
 margin: -100px 0 0 -200px;
 position: relative;
 left: 50%
 top: 50%;
 background-color: pink;
}
  1. display值:block, none, inline, inline-block, list-item, table, inherit

block是块类型,默认宽度为父元素宽度,可设置宽高,换行显示;none示意元素不会显示,已脱离文档流;inline示意行内元素类型,默认宽度为内容宽度,不可设置宽高,同行显示;inline-block示意默认宽度为内容宽度,能够设置宽高,同行显示;list-item示意像块类型元素一样显示,并增加款式列表标记;table示意此元素会作为块级表格显示;inherit示意从父元素继承display属性的值。

12.display:none为暗藏元素,在文档布局总不会给它调配空间。visibility:hidden暗藏元素,为文档布局中保留原来的空间。

13.有人问FOUC是啥?如何防止FOUC?FOUC是无款式内容闪动,是在IE下通过@import形式导入css文件引起的:

<style type="text/css" media="all">@importurl('demo.css');</style>

IE会先加载整个HTML文档的DOM,而后导入内部的css文件。在页面DOM加载实现到CSS导入实现两头,有一段时间页面上的内容是没有款式的。这段时间跟网速和电脑速度无关。

能够解决FOUC:在head标签之间退出一个link或script标签。

14.聊聊rem和em:rem示意绝对于根元素的字体大小;em示意绝对于父元素的字体大小。

15.css中,自适应的单位百分比%,绝对于视口宽度的单位vw,绝对于视口高度的单位vh,绝对于视口宽度或者高度的单位vm。

绝对于父元素字体大小的单位em,绝对于根元素字体大小的单位rem。

16.应用rgba给元素的背景设置透明度的形式,来代替应用opacity设置元素透明度的形式,解决子元素继承父元素透明度的问题。

17.浏览器的规范模式和怪异模式区别在于盒子模型的渲染模式不同,能够应用window.top.document.compatMode判断以后模式为何为何种模式。后果为BackCompat示意怪异模式;后果为CSS1Compat示意规范模式。

18.FFC示意自适应格式化上下文,即display值为flex或inline-flex的元素将会生成自适应容器。伸缩容器中的每一个子元素都是一个伸缩单元。伸缩单元能够是任意数量的。伸缩单元内和伸缩容器外的所有元素都不受影响。

19.GFC,网格布局格式化上下文,IFC,内联格式化上下文,BFC,块级格式化上下文。

20.div+css比table布局的长处在于扭转时比拟不便,只改变css文件。页面加载速度快,构造清晰,页面简洁,体现与构造拆散,搜索引擎优化敌对。

21.css中遇到的content属性作用专门利用在before/after伪元素上,用于插入生成的内容,常见的利用是利用伪类革除浮动。

22.网页制作用到哪些图片格式:支流的有jpg,png,gif等。

23.优雅降级开始构建残缺的性能,而后再针对低版本浏览器进行兼容;渐进加强指对低版本浏览器构建页面,保障最根本的性能,再对高级浏览器进行成果,交互等批改。

24.px和em是长度单位,区别在于px是固定的,指为多少就是多少,计算比拟容易,em不是固定的,是绝对于容器字体的大小,并且em会继承父级元素的字体大小。

25.程度垂直居中:

#box {
 width: 200px;
 height: 200px;
 background: red;
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -100px 0 0 -100px;
}

26.css sprite是把网页中一些背景图片整合到一张图片文件中,再利用css的background-image,background-repeat,background-position的组合进行背景定位background-position能够用数字准确地定位出背景图片的地位。

27.页面重构,编写css让页面构造更合理化,晋升用户体验,达到良好的页面成果并晋升性能。

总结

以上就是明天要讲的内容,本文仅仅简略介绍了2020 年「我与技术面试那些事儿」,感激浏览,如果你感觉这篇文章对你有帮忙的话,也欢送把它分享给更多的敌人。感激转发分享,点赞,珍藏哦!

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元

阿里云限时活动-1核2G-1M带宽-40-100G ,特惠价87.12元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

You may also like...

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据