some 面试题

阅读量

比较新的面试题

面试题

全局字体

1
2
3
body {
    font-family: Microsoft Yahei, SimSun, Helvetica;
}

使用css实现一个持续的动画效果

1
2
3
4
5
6
7
@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}
p {
    animation: mymove 5s infinite;
}

水平垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1.  
transform: translate(-50%,-50%);

2.  
margin:-50px 0 0 -50px;

3.  
margin:auto;
top:0;
bottom:0;
left:0;
right:0;

4.  
display:flex;
justify-content:center;
align-items: center;

多行文本溢出展示

1
2
3
4
5
6
7
8
9
10
11
p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/*让图文不可复制*/
p {
    user-select: none;
}

1.跨域解决方案

同源策略: 协议+域名+端口 防止XSS、CSFR等攻击 => httpOnly

跨域原理： 同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。

跨域解决方案
通过jsonp跨域 => 动态创建script jsonp缺点：只能实现get一种请求
document.domain + iframe跨域
location.hash + iframe
window.name + iframe跨域
postMessage跨域
跨域资源共享（CORS） 服务端设置Access-Control-Allow-Origin
nginx代理跨域
nodejs中间件代理跨域
WebSocket协议跨域

2.输入URL到页面加载显示完成，这个过程中都发生了什么？

url 浏览器缓存 > 本地域名解析 > 本地服务器DNS > 远程DNS服务器 跨域处理 （查询服务器地址） 可能 负载均衡
CDN处理请求
建立TCP/IP连接 ssl同信 握手 数据传输
页面加载html css js image
渲染 Dom Cssom Rendom树

3.浏览器内核：主要分成两部分：渲染引擎 和 jS引擎

4.编程范式: 面向过程 面向对象 函数式编程

5.

原型与原型链: Object.prototype的属性和方法 所有的引用类型（包括数组，对象，函数）都有隐性原型属性（proto）,值也是一个普通的对象
作用域及闭包
异步和单线程

import、require、export、module.exports

关键在于 webpack_require 函数，这个函数就是 require 或者是 import 的替代

babel 在模块化的场景中充当了什么角色？以及 webpack ？哪个启到了关键作用？
babel 能提前将 es6 的 import 等模块关键字转换成 commonjs 的规范。这样 webpack 就无需再做处理，直接使用 webpack 运行时定义的 webpack_require 处理。

为何有的地方使用 require 去引用一个模块时需要加上 default？ require(‘xx’).default
babel 对导出模块的转换，es6 的 export default 都会被转换成 exports.default，即使这个模块只有这一个输出

各大 UI 组件库时都会被介绍到为了避免引入全部文件，请使用 babel-plugin-component 等babel 插件
import { Button, Select } from ‘element-ui’

commonjs / commonjs2
exports[‘spon-ui’] => module.exports

面试流程题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<p>
    1.自我介绍: 简单介绍学习及工作经历；针对所应聘的职位，介绍往期工作过程中和应聘职位相关的项目经验；用简单风趣的语言介绍一下自己的兴趣爱好，以及其他你认为有必要展示的信息
    2.无领导小组讨论: 过程中，注意匹配职位要求进行发挥，如果你应聘服务岗，展现你的性格优势和服务意识，避免“针锋相对”；如果你应聘销售岗，展现你的说服力，而不是“被说服”；如果你应聘储备管理岗，展现你的领导意识，避免“随波逐流、人云亦云”……
    3.在你之前的工作经历中，比较成功的项目经验是什么？ 根据应聘岗位的性质，从以往的工作经历中选择匹配度较高、影响力较大的项目进行分析，引用数量、增长比、效果等数据进行展示更有说服力，如果能带一份原项目的总结报告参加面试将会更加分。
    4.如果让你组织一次活动，你会如何处理？ 首先了解活动面向的客群、年龄段，针对客群的特殊性提出对应的活动方案。譬如，如果针对年轻群体，应该考虑提高活动的时尚度、举办时间安排在中午或晚上、宣传方式偏向网络渠道、场景搭建更有质感等细节问题。分析群体特征后，按照活动组织流程展开叙述。当然，如果带一份提前准备好的工作计划，即使与问题不完全相关，也可以让对方看到你为面试做了足够的准备，提升印象分。
    5.最后自己有什么想问的：问下部门的技术栈、技术沙龙之类的，谢谢！
    负载均衡你了解吗？阐述一下
    linux环境你熟悉吗？说一些你用过的指令
    webpack了解吗？用过哪些功能
    对css预编译器有所了解吗？
    完整概述一个你感觉最你自己做过最棒的项目？
    你在这个项目中用到了koa，那你能说说koa的特点是什么吗？
    有考虑过如何对项目进行优化吗？从那方面入手？

    为什么从上一家公司离职？ 希望能接触更大的发展平台,把自己的技术体系化  做出好的产品，技能涨工资
    为什么选择我们公司？ 职业很符合，发展潜力大
    你的薪资期望是？ 对公司的公正和实力表示肯定，并表示相信公司会根据行业水平给出合理的薪资。以询问的方式了解对方是否可以达到月薪x的行业均值（可以是自己的期望水平）。当然如果实在要说一个数据的话，最低可以在现有薪水的基础上提高35%-40%。 期望能给一个即使加班也能够打鸡血的工资
</p>

媒体查询引入

1
2
3
4
5
6
7
html
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">

css
@media only screen and (max-device-width: 480px ) {
	/*css样式*/
}

阐述一下CSS Sprites: background-image background- repeat background-position

console类型：

1
2
3
4
5
6
console.log('文字信息'); console.info('提示信息'); console.warn('警告信息'); console.error('错误信息');
Console.group()和 Console.groupEnd()包裹分组内容
console.table()可以将传入的对象，或数组以表格形式输出
Console.dir()显示一个对象的所有属性和方法
console.assert() 进行条件输出
Console.time()和 Console.timeEnd()包裹需要计时的代码片段

vue 如何解析模板？

第一步是将非结构化的模板字符串，转变成结构化的 JS 对象，抽象语法树，即 AST 。
第二步，将 AST 转换成一个 render 函数，步骤是先转换为一段函数体的字符串，然后再用new Function(…)生成函数。
第三部，渲染时执行 render 函数，返回虚拟 DOM 对象，然后执行虚拟 DOM 的patch方法，渲染成真正的 html 。
vue内部渲染机制

React 的 setState 为何是异步渲染？

为了防止一次性执行多次setState而带来的渲染性能问题。

hybrid 和 h5 有何区别？

hybrid 是通过file协议加载的本地文件，h5是通过http协议加载的网络文件，前者速度快
hybrid 是通过为不同版本打包进行更新，而 h5 没有版本的概念，每次都获取服务端的最新版
hybrid 更加依赖于客户端的能力，因此会更多的和客户端通讯，而 h5 基本用不到和客户端通讯

:伪类 ::伪元素

伪类: 用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如:visited，:active；后者包含那些满足一定逻辑条件的DOM树中的元素，比如:first-child，:first-of-type，：target

伪元素: 为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容

1
2
3
console.log(typeof NaN === "number");  // "true"
console.log(0.1 + 0.2);  // 0.30000000000000004
console.log(0.1 + 0.2 === 0.3); // false

原生ajax

1
2
3
4
5
6
7
8
9
10
var xhr = new XMLHttpRequest()
xhr.open('GET', '/list')
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('hello ajax')

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
    }
}

Nodejs后台示例 (解决跨域)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var http = require('http')
var server = http.createSever()
var qs = require('querystring')

server.on('request', function (req, res) {
    var postData = ''

    // 数据块接收中
    req.addListener('data', function (chunk) {
        postData += chunk
    })

    // 数据块接收完毕
    req.addListener('end', function () {
        postData = qs.parse(postData)
        // 跨域后台设置
        res.writeHead(200, {
            'Access-Control-Allow-Credentials':'true',// 后端允许发送Cookie
            'Access-Control-Allow-Origin':'http://www.domain1.com',// 允许访问的域（协议+域名+端口）
            'Set-Cookie':'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'// HttpOnly:脚本无法读取cookie
        })
        res.write(JSON.stringify(postData))
        res.end()
    })
})
server.listen('8080')
console.log('server is running at port 8080...')

封装一个函数，参数是定时器的时间，.then执行回调函数

1
2
3
function sleep(time) {
    return new Promise((resolve) => setTimeout(resolve, time))
}

事件委托

1
2
var oUl = document.getElementById('test');
    oUl.addEventListener('click', 'oUl btnClass',function(ev){})

Set 和 Map 数据结构

Set 它类似于数组 值都是唯一的
Map 类似于对象，也是键值对的集合

快速的让一个数组乱序

1
2
3
4
5
var arr = [1,2,3,4,5,6,7,8,9]
    arr.sort(() => {
        return Math.random() - 0.5
    })
    console.log(arr)

冒泡排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function sort(arr) {
    for (var i = 0; i< arr.length-1;i++) {
        for (var j=0; j<arr.length -1 -i;j++) {
            if (arr[j] > arr[j+1]) {
                var temp = arr[j]
                arr[j] = arr[j+1]
                arr[j+1] = temp
            }
        }
    }
}
var arr = [3,1,7,5,2,4,9,6,10,8]
console.log(arr)
sort(arr)
console.log(arr)

二分法查找

二分法查找算法：
采用二分法查找时，数据需是排好序的。
主要思想是：（设查找的数组区间为array[s, e]）
（1）确定该区间的中间位置m
（2）将查找的值T与array[m]比较,若相等，查找成功返回此位置；否则确定新的查找区域，继续二分查找。
区域确定如下：
这里设array从小到大排列,
array[m]>T由数组的有序性可知array[m,……,e]>T;
故新的区间为array[s,……，m-1],
类似上面查找区间array[s,……，m-1]。
每一次查找与中间值比较，判断是否查找成功，不成功当前查找区间缩小一半，循环查找，即可。
时间复杂度:O(log2n)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
let arr = [0, 1, 2, 4, 5, 6, 7, 8];
let arr2 = [88, 77, 66, 55, 44, 33, 22, 11];

BinarySearch(arr2, 77);
BinarySearch(arr, 2);

function BinarySearch(arr, target) {
    let s = 0;
    let e = arr.length - 1;
    let m = Math.floor((s + e) / 2);
    let sortTag = arr[s] <= arr[e];//确定排序顺序

    while (s < e && arr[m] !== target) {
        if (arr[m] > target) {
            sortTag && (e = m - 1);
            !sortTag && (s = m + 1);
        } else {
            !sortTag && (e = m - 1);
            sortTag && (s = m + 1);
        }
        m = Math.floor((s + e) / 2);
    }

    if (arr[m] == target) {
        console.log('找到了,位置%s', m);
        return m;
    } else {
        console.log('没找到');
        return -1;
    }

}

解释同步\异步、阻塞\非阻塞、并行\并发之间的区别

同步：在发出一个同步调用时，在没有得到结果之前，该调用就不返回。
异步：在发出一个异步调用后，调用者不会立刻得到结果

阻塞这个词来自操作系统的线程/进程的状态模型中。经历的5个状态，创建，就绪，运行，阻塞/终止。

并行：运算中的两件或更多件事情在同一时刻发生
并发：至少两件事务在同一时间段发生

赏

1分也是爱

微信

扫一扫，分享到微信

微信分享二维码
× 文章目录
  1. 1. 比较新的面试题
  • 全局字体
  • 使用css实现一个持续的动画效果
  • 水平垂直居中
  • 多行文本溢出展示
  • 1.跨域解决方案
  • 2.输入URL到页面加载显示完成，这个过程中都发生了什么？
  • 3.浏览器内核：主要分成两部分：渲染引擎 和 jS引擎
  • 4.编程范式: 面向过程 面向对象 函数式编程
  • 5.
  • import、require、export、module.exports
  • 面试流程题
  • 媒体查询引入
  • 阐述一下CSS Sprites: background-image background- repeat background-position
  • console类型：
  • vue 如何解析模板？
  • React 的 setState 为何是异步渲染？
  • hybrid 和 h5 有何区别？
  • :伪类 ::伪元素
  • 原生ajax
  • Nodejs后台示例 (解决跨域)
  • 封装一个函数，参数是定时器的时间，.then执行回调函数
  • 事件委托
  • Set 和 Map 数据结构
  • 快速的让一个数组乱序
  • 冒泡排序
  • 二分法查找
  • 解释同步\异步、阻塞\非阻塞、并行\并发之间的区别
    • 本站访客数人次

    tag:

      缺失模块。
      1、请确保node版本大于6.2
      2、在博客根目录（注意不是yilia根目录）执行以下命令：
      npm i hexo-generator-json-content --save

      3、在根目录_config.yml里添加配置： 

        jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

    talk is cheap <br><br>show me the code ！<br><br>沉淀技术<br><br>不断突破<br><br>实现人生自由！！！