面试总结

idwenwen
187 阅读9分钟

前言

面好了要镇定，面不好要淡定。最后的最后，加油加油加油。

正文

HTML

  1. < !DOCTYPE >的作用 首航标签，指示HTML使用哪个版本进行编写（DTD文件），HTML4是使用SGML,HTML5则不是使用SGML来规范的，所以不需要DTD的引入，H5之中直接使用

  2. < meta >标签内容

    标签主要的属性是http-equiv和name属性内容。

    name 所拥有的关键属性以及对应的content内容如下：

    • keywords（关键字，告诉搜索引擎页面关键字）
    • descriptions （描述，告诉搜索引擎网站的主要内容）
    • robots（机器人向导，告诉搜索引擎那些页面需要索引那些页面不需要，分为all,none,index,unindex,follow,nofollow。默认是all）
    • author（作者，网站作者），renderer（网站的渲染模式）
    • viewport（视图模式，常用设置属性有height,width,initial-scale,maximum-scale,minimum-scale,user-scalable）

    http-equiv 相当于http文件头的作用，其对应的常见设置有如下：

    • X-UA-Compatible（浏览模式）设置浏览器版本
    • Expires：网页过期时间，一旦网页过期，一定要到服务器重新传输。格式要GMT
    • Pragma(cache模式)禁止浏览器从本地计算机的缓存之中访问内容。
    • Refresh:页面自动刷新指向新页面 content之中格式为 Time;URL Time的单位是秒。
    • Set-Cookie(设置cookie)，如果网页过期，存盘的cookie将会被删除。
    • content-Type：设定网页使用的字符集 一般都是 text/html;charset=utf-8
    • Content-Language: 页面展示的语言内容。
    • Cache-Control: 可以设置在content的属性有max-age：最大存在时间，public，private，no-cache，no-store

    具体可见


  1. localStorage，sessionStorage，cookie

    • localStorage：空间大（5-10M），保存持久。
    • sessionStorage：空间大，保存单次会话。
    • cookie：只有4kb，主要用途是保存登陆信息。

  1. 什么是cookie， cookie的优势是什么。

    cookie又名会话跟踪机制，解决了http请求无状态的问题。如果控制好session对象的大小，我们可以将此对象内容放置在cookie之中。我们也可以在其中放置用户的相关登陆信息内容，等到下一次用户开启网站的时候，用户可以直接登陆。

    cookie的优势，我觉的在于：

    1. 它可以很方便的记录http请求的状态和绘画状态，同时可以设置相关的过期控制，不用手动删除内容。
    2. Secure属性的设置，通过SSL或者https可以更为安全的传输。
    3. 简单轻量，可持久存储。
    4. 服务器可以进行操作。

  1. unicode编码

    为了统筹计算机对于多种语言对应表的混乱，所以提出了unicode编码，通抽所有的字符编码，统一传输数据内容。


  1. utf-8字符集理解

    utf-8的全称是（8-bit Unicode Transformation Format），是针对unicode的可变长度字符编码。其会自动的依据展示数据来调整所需的字节长度，一个到四个不等。节约了传输的空间。


CSS

  1. CSS盒模型介绍，和切换。

    主要的盒模型是content-box，border-box 盒模型内容相同。

    两者主要区别：

    content-box主体内容高度，和宽度由width和height设置padding还有border的修改不影响。

    而border-box的长宽受到padding还有border影响。长宽是固定的，但是内容会由于padding或者border的改变而互斥改变。

    切换盒模型使用box-sizing的作用

例：box-sizing: content-box      是W3C盒子模型 
    box-sizing: border-box        是IE盒子模型

  1. 样式优先等级怎么计算

    样式表引入展示优先：行内样式（style属性）＞内页样式（style标签）＞外部样式（link引入）

    样式表作用优先： 通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式


  1. position之中的属性有几个。

    static, absolute, relative, fixed, inherit


  1. 内容填充高度，元素需要水平垂直居中。

    直接上链接

  2. 如何使用CSS3实现抛物线动画。

    • animation 与 @keyframes的结合使用。
    • transition来直接设置top和left的值。同时设置变动方式。
    • js实现。

  3. aimation和transition的不同。

    transition：其关注的点是过渡，相对比较简单的那一种。其主要是两个关键帧，开始与结尾。简单方便，但是又局限性。

    animation：为了弥补上面内容的特点，animation通过控制关键帧来控制动画的每一步，来实现相关的效果。

    主要的不同在于 transition需要通过事件来进行内容的触发，但是animation的话就不同了，可以不通过事件的形式。

  4. 说一说对flex的理解。

    弹性布局用来为盒模型提供最大的灵活性。当一个元素设置成为flex，则其中子元素自动成为容器的成员。容器主要是存在的是水平主轴和垂直的交叉轴。所以我们可以通过设置轴的方向的形式来控制展示基调，然后通过设置项目的权重，来控制最后的展示效果。

  5. 三角形的实现。

    可以参考这篇文章

  6. 常用到的CSS单位有什么。

    • px：绝对单位，页面按精确像素展示

    • em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

    • rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

    • vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

    • vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

    • vmin：vw和vh中较小的那个。

    • vmax：vw和vh中较大的那个。

    • %:百分比

    • in:寸

    • cm:厘米

    • mm:毫米

    • pt:point，大约1/72寸

    • pc:pica，大约6pt，1/6寸

    • ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)

    • ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)

JS

  1. console.log打印内容。
let a = 1;
    let obj = {
        a: 2,
        b() {
            console.log(this.a); // 2
        },
        c: () => {
            console.log(this.a); // 1 或者undefined
            //(此处主要是看运行环境，浏览器运行上下文windows是undefined)
        }
    }
    console.log(obj.b()); // undefined
    console.log(obj.c()); // undefined

  1. new操作符的理解。

    let newObj = Object.create(new Object(), Func.prototype); let newObj = Func.call(newObj);


  1. 数组遍历的方法

    • for循环（for..of..）
    • forEach(function(item, index, array))
    • map(function(item, index, array))
    • filter(function(item, index, array))
    • every(function(item, index, array))检测是否所有的元素都符合体条件，是返回true，不是返回false。
    • some(function(item, index, array))检测是否有的元素都符合体条件，是返回true，不是返回false。)

    ES6之中的迭代器

    • entries（）返回键值对迭代器
    • keys() 返回索引迭代器
    • values() 返回数值迭代器

  2. 数组去重方法，如果数组之中有多个NaN如何去重。

    工具类方法，或者使用ES6之中的Set对象也是十分方便的。不过这里我们需要注意的一件事情是，如果在数组之中拥有多个NaN的情况的时候。如果过使用Set的话不用担心，NaN重复插入的时候其也会进行判断。但是使用工具类的方法的时候我们需要特殊处理。

  3. 数组的排序方法，和数组倒叙。

    • 方法有很多，这里我们需要说一下sort方法，它是在元素组之上进行排序的，他是按照字符编码进行排序的，所以我们将数字传递进去的时候会是按照收尾字符进行大的排序，然后按照第二位字符对首位字符相同的进行排序。
    • 这里再说一下数组倒叙，字符串倒叙也是常常会问的。我们会使用reverse这个方法，它也是在原数组上面进行操作的，操作时需要注意啊。字符串的颠倒实际上也是可以使用这一方法的，通过split方法来进行拆解，最后通过join方法在合并。

  4. 时间复杂度和空间复杂度。

    • 时间频度：一个算法的执行所需要消耗的时间。因为算法的时间复杂度和其中所需要执行的语句成正比。一个算法中的语句执行次数称为语句频度或时间频度，记为T（n）

    • 时间复杂度：时间频度之中n称为问题的规模，当n变化，T（n）也会不断的变化，但是有的时候我们想要知道它变化的规律，为此引入时间复杂度的概念，如果存在某个辅助函数F（n）使得当n趋近于无穷大的时候T(n)/F(n)的极限值为不等于零的常数，称f(n)是T(n)的同数量级函数。记做T(n) = O(F(n));称这为算法的渐进时间复杂度，也就是时间复杂度。

    • 空间复杂度：空间复杂度实际上和时间复杂度概念类似，只是它是用来表示空间频度的变化复杂形势的。

  5. addEventListener的第三个与之后参数内容。

    第三个参数传递boolean表示的的是useCapture，表示事件在事件捕获阶段调用。

  6. 对于event-loop的理解。

    这里提供篇文章

Vue

  1. v-show和v-if的差别

    v-show： 样式修改展示情况。

    v-if： 判别是否渲染。所以v-if修饰的组件除非需要渲染否则不走生命周期

    问题：那么v-if修饰组件的话，如果不渲染组件那么组件的生命周期会执行吗？


  1. value变量深度观察，对象变量元素改变观察。

  1. directive

  1. 常用的生命周期函数有什么，用在项目之中承接什么逻辑。

  1. Vue如何添加和删除已有Vue实例之中的数据内容。

avatar
文章
阅读
粉丝