bell 前端笔试题

1. relative、absolute、static、fixed的作用，相对谁定位？

relative:相对元素在文档中的初始位置定位

absolute:相对于定位元素定位，最顶级是body

static:文档流

fixed:相对于窗口定位

 

2. 如何实现一个div垂直水平居中？

1）父元素设置

display: flex;

justify-content: center;

align-items: center;

2）父元素设置

display: table-cell;

vertical-align: middle;

子元素设置

margin: 0 auto;

3)父元素设置

position:relative;

子元素设置

position:aboslute;

top:50%;

left:50%;

margin-top: -25px;

margin-left: -25px;

4)父元素设置

position:relative;

子元素设置

position:aboslute;

top:50%;

left:50%;

transform: translate(-50%, -50%);

3. 以下输出什么？

var User = {
  count: 1,
  getCount: function() {
    return this.count
  }
}
​
var fn = User.getCount
console.log(fn()); 

undefined

4. 写一个数组去重的方法

   function func(arr) {
        // 实现数组去重
        return [...new Set(arr)]
   }
   var myArr = [1,2,1,2,'1','2',0,'1','你好','1','你好',NaN,NaN]
   console.log(func(myArr)); //  打印 [1, 2, "1", "2", 0, "你好",NaN]

5. 谈谈cookie，sessionStorage, localStorage的区别和优缺点

cookie sessionStorge localStorge session

都是key-value的形式保存

前三个存在于客户端 ， 最后一个存在于服务端

cookie 随请求头每次提交 根据过期时间选择是否失效

sessionStorge 不随请求头提交 会话关闭就失效

localStorge 不随请求头提交 长时保存

session 安全

cookie 可跨页，不可跨域

sessionStorge 不可跨页，不可跨域

localStorge 可跨页，不可跨域

session 可跨页，不可跨域

cookie 不超4k

sessionStorge localStorge 可达5M

6. var、 let、 const 区别？

1）var是es5提出的，let、const是es6提出的

2）var可以重复声明，let、const不可以

3）var、let声明的变量可以修改，const声明不可以修改，一旦声明要立刻初始化。

4）let、const存在块级作用域，var不存在（1、内部变量可能会覆盖外部变量 2、用于计数的循环变量会泄露为全局变量）

5）const、let具有暂时性死区。进入作用域内，变量就已经存在，但是在变量声明前不可被访问或者被调用，否则会报错ReferenceError

6）var可以进行变量提升,let、const不可以

7. 以下代码依次输出内容是？

setTimeout(function() {
  console.log(1)
}, 0);
new Promise(function executor(resolve) {
  console.log(2);
  for( var i=0 ; i<10000 ; i++ ) {
    i == 9999 && resolve();
  }
  console.log(3);
}).then(function() {
  console.log(4);
});
console.log(5);

2 3 5 4 1

8. 在 String 对象上定义一个 repeatify 函数。这个函数接受一个整数参数，来明确字符串需要重复几次。

// 举个栗子
console.log('hello'.repeatify(3));
// 应该打印出 hellohellohello

String.prototype.repeatify = function(n){

let val = ''

for(let i=0; i<n; i++){

val += this

}

return val

}

9.查找数组中位数

有一个未排序的数组：var arr = [5, 9, 1 ,4, 2, 3, 0]; 需要你找到排序后的该数组中位数。 如 arr 排序完后是 [0, 1, 2, 3, 4, 5, 9]，其中位数是 3

示例1: 输入: [5, 9, 1 ,4, 2, 3, 0] 输出: 3 说明: arr 排序完后是 [0, 1, 2, 3, 4, 5, 9]，其中位数是 3

示例2: 输入: [2, 4, 3, 1] 输出: 2

function func(arr) {
    // 请实现查找中位数
}
var arr1 = [0, 1, 2, 3, 4, 5, 9];
var arr2 = [2, 4, 3, 1];
console.log(func(arr1) === 3); // true
console.log(func(arr2) === 2); // true

function func(arr) { arr.sort() let index = arr.length/2 if(Number.isInteger(index)) { return Math.floor((arr[index]+arr[index-1])/2) } return arr[Math.floor(index)] }

10.你在实际使用 webpack 中，常用的 loader 有哪些？并说出它的用途。（不少于3条）

1)模板：

html-loader: 将html文件导出编译为字符串，可供js识别

2）样式：

css-loader:解析css文件中的代码

style-loaer:将css模块作为样式导入到dom中

less-loader:加载转义less文件

postcss-loader:使用postcss加载和转义css/scss文件

3）脚本转换编译

babel-loader：加载es6+代码后，使用babel转义为es5后，浏览器才能够使用

typescript-loader:加载typescript脚本文件

script-loader:在全局上下文中执行一次javascript文件，不需要解析

coffee-loader:记载Coffeescript脚本文件

4）JSON加载

json-loader:加载json文件

json5-loader:加载转义json5文件

5）Files文件

file-loader:将文件发送到输出的文件夹并返回url

url-loader:多数用于加载图片资源，超过文件大小显示则返回data URL

raw-loader:加载文件原始内容（utf-8格式）

jslint-loader:检查代码格式错误

6）加载框架

vue-loader:加载转义vue组件

angular2-template-loader : 加载转义angular组件

react-hot-loader:动态加载刷新react组件中修改的部分

11.React Hooks 你常用哪些？并说出它的用途。（不少于3条）

state hook的主要作用就是获取需要的state和更新state的方法

使用方法：

const [state, setState] = useState(initialState)

这里的setState不会合并state中的值

effect hook 方法在每次渲染之后执行，在函数里可以编写更新dom,添加订阅

useEffect(didUpdate)

如果didUpdate函数中返回了一个函数，这个函数会在组件卸载前执行（每次渲染都会执行）

需要清除上次订阅的内容可以在里面写

执行条件：useEffect的第二参数是一个数组，只有当数组中的值发生改变的时候才会调用effect，如果执行在第一次挂载和卸载是调用，只需传一个空数组

useContext

const value = useContext(MyContext)

获取context的值，类似class的写法中的static contextType = Mycontext,当使用了useContext会在context的值发生改变是更新render

自定义hook

当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中，而组件和hook都是函数，所以也同样使用这种方式

自定义hook是一个函数，其名称以‘use’开头，函数内部可以调用其他的hook

12.针对 React 和 浏览器，你有一些什么优化手段？

1)对于基础包，可以通过cdn引入。

2)合并请求 combo。打包优化：速度和体积优化

1、happypack多线程构建 2、webpack4 3、分包 html-webpack-externals-plugin dllReferecePlugin 4、缓存 HardSourceWebpackPlugin 提升二次构建速度 5、缩小构建目标 babel-loader不打包node_moudels 1、tinypng imagemin图片压缩 image-webpack-loader2、polyfill-service 动态polyfill 构建体积优化 3、spitChunksPlugin公共资源分离4、scope hositing 5、tree shaking ( .babelrc modules:false )

3)、不请求cache

尽量使用公共资源，设置缓存，不重新请求资源

使用pwa的离线加载

避免加载不存在的路径 避免耗费性能

业务允许的情况下，做某些降级。例如弱网优先使用缓存

预解析DNS，浏览器提前获取静态资源的IP地址，避免请求时再发起DNS解析请求。

尽量不携带cookie（减少1kb）

不做页面重定向，页面重定向会延长页面内容返回的等待时长，一次重定向大约需要200ms不等的时间开销

4）压缩资源

前端打包压缩 、 服务器打包压缩、 图片压缩

5）静态资源分域存放 浏览器针对同一域请求并发数是6

增大并行请求和下载速度

6）延迟、异步、懒加载、预加载

7）重写shouldComponentUpdate来避免不必要的dom操作

8）使用production版本的react.js

9)使用key来帮助React识别类表中所有子组件的最小变化

14.对前端工程化有何想法？

代码管理->分支管理->模块管理->自动化测试->构建->部署