39. 一些面试题

首发于我的博客：https://github.com/ly525/blog/issues/39 ，欢迎关注与讨论。如果有不对的地方，欢迎斧正

CSS

1. 左侧固定，右侧自适应（侧边栏导航）
2. 实现三角形（tooltip，dropdown）、叉号
3. 动画渐变（height 属性是否可以有效，实现loading效果）
4. data-set 应用（HTML5 新特性）
5. less 常用函数，mixin等等（简历有提）
6. Bootstrap中为何使用了 row: margin:-15px,作用是什么？
7. css sprit 和 style loader limit 作用？（优化）
8. 清除浮动，以及为何要清除浮动，浮动会带来哪些影响？
9. flexbox 布局
10. display:none与visibility：hidden的区别？以及display height 能否取到，应用到动画中

• display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
• visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

1. box-sizing 应用场景（项目）
2. 清除图片底部一像素（广告位代码中常见）
3. 元素的height 百分比（基础）
4. 横向菜单导航条li之间有空白怎么解决？font size 0。（布局基础）
5. display:inline-block 什么时候会显示间隙？（导航条设计）

• 有空格时候会有间隙 解决：移除空格
• margin正值的时候 解决：margin使用负值
  • 使用font-size时候 解决：font-size:0、letter-spacing、word-spacing

1. css 选择器，以及匹配顺序（基础）
2. 移动端布局，rem 计算以及 em（微信、H5 等移动端布局）
3. 滚动条导致的页面闪动如何解决？
   -calc
4. 50 道 CSS 基础面试题及答案 http://mp.weixin.qq.com/s/XPYy8gxKkzwkqGBxh91JNQ

JavaScript

1. 函数节流/Debounce 函数，懒加载函数（交互、性能）
2. deepclone
3. splice 与 slice 区别？是否改变原来的数组呢？
4. 1>2>3 的结果？（考察基础运算符）
5. ![] 对数组的理解，如何判断一个值是数组？
6. setTimeout(fn, 0)
7. 增删className
8. 0.1 + 0.2 === 0.3，保留两位小数的实现？
9. 给li 元素动态添加点击时间，并要以后动态生成的li元素同样具有该事件
10. 举一个实际工作中使用到闭包的例子
    Let self = this
11. 遍历节点数组
12. 浏览器渲染过程,？ 如果一个css文件 遇到JS文件 底下又一个css文件，这块浏览器的处理 是怎样的？ 还是原理问题
13. https://sourcegraph.com/github.com/front-thinking/FE-Summary@83e33d8d3b0edbae748788ae89ea5aa05dfd5ab8/-/blob/3.javascript.md

Vue

1. 在vue.js 如何使输入框获得焦点（nextTick 使用）
2. 数组如何侦测变化（后台操作较多，需要实际开发经验）
3. Vue 双向绑定原理，如何实现
4. props、data、computed、watcher 的初始化顺序（源码）
5. keep-alive （交互体验）
6. 在页面中直接引入js 和vue 文件有区别嘛？或者说 vue-loader 做了什么事？或者说 .vue文件最终被转换成了什么？
7. Scoped
8. watcher immediate
9. Created 与 mounted 区别，什么时间操作dom
10. Render 函数。render: (h) => h(App) 做了什么？

前后端

1. cookie session
2. 错误处理、http status code
3. 前后端分离
   • 配合 webpack 进行反向代理
   • js 操作 cookie

工程化

1. babel 配置的stage1，stage0 有何区别？（考察es6）
2. let 和 var 的区别，变量提升。var 为何可以重复定义，而let 却不可以，考察作用域与生命周期
3. exports、module.exports 与 export default 区别？
4. 前端部署
   • 是否开启gzip 压缩
5. 项目中你碰到过的最难的问题，以及怎么解决的？
6. 前后端分离的原理及意义？
7. 常见页面优化
8. node 作为服务器，有考虑 ssr吗？
9. 一个页面从输入 URL 到页面加载完的过程中都发生了什么事情
10. eslint

代码段

 for (let i = 0; i < 100000; i ++) {
        let $body = $('body');
        $body.text();
    }

1. box-size 是什么和应用场景？
2. 输入123456789,输出123,456,789,其实就是千分位

   function getThousands(number) {
    return String(number).replace(/(^|\s)\d+/g, m =>
        m.replace(/(?=(?!\b)(\d{3})+$)/g, ","))
    }