39. 题目

[ly525]

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();
    }

3. box-size 是什么和应用场景？

4. 输入123456789,输出123,456,789,其实就是千分位

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

[ly525]

前置任务：

• 通读《高级程序设计》21、24章节

【基础知识】高级程序设计第 24 章　网络请求与远程资源

状态码

• 1：基础概念

  • 200、201 、 206
  • 302 、 304
  • 400、500
  • 502 、504

• 2: 差异

  • 200 vs 201 vs 206
  • 302 vs 304
  • 502 vs 504 bad Gateway 这里的 Gateway 指的啥？

HTTP 头部

responseHeader['content-type']

• 有的 pdf、图片、视频， 在浏览器访问其网址，有的是直接打开，有的实际下载了。
  • 导致这种差异的原因是什么？1
  • 如何设置统一为直接打开？2

ajax/cors/requestHeader.origin

• 页面中，有一个视频/图片/PDF/MP3，旁边有一个下载按钮，点击按钮，下载 视频/视频/PDF/MP3，如何实现（非右击另存为）？
  • 什么是跨域？1
  • 图片是否会跨域？1
  • 如何解决 ajax 请求访问跨域？2
  • 如何解决 视频/图片 下载跨域？3
  • 如何告知用户下载进度 2

cookie

• 登录百度贴吧后 ( tieba.baidu.com) ，为何 百度一下(baidu.com)、百度统计(tongji.baidu.com)、百度知道(zhidao.baidu.com)、百度图片(tupian.baidu.com) 、百度云(yun.baidu.com) 无须再次登录即可使用？
  • 口述整个登录流程过程中，用户会话如何保持？（登录后，点击发帖，系统如何知道这个帖子是谁发的？）3
  • 前端如何存储 token ？1
  • cookie 有哪些限制条件？js 能否直接操作 cookie？ httpOnly 是什么？2
  • 如何防止 csrf？2
  • 何为 withCredentials? 2
  • cookie、sessionStorage、localStorage 有何区别？1
    - [ ] cookie 可以设置过期时间？1
    - [ ] localStorage 可以设置过期时间？3

cache、responseHeader['cache-control']

• 前端发布新版本之后，缓存策略如何配置，才能保证用户执行F5，一定能拿到最新的页面？4
  - [ ] cache-control 2
  - [ ] etag 3
  - [ ] webpack hash 3

发布部署

• 前端项目发布，发布顺序是 js/css > html 还是 html > js/css 3

【开发技巧】高级程序设计第 21 章错误处理与调试

Debug

• 上面截图中，每一块的作用是什么？4
• 前端如何 debug 2
• Node 如何 debug 3
• 远程 debug？4
• 控制台运行时是啥？2

稳定性

• JS 有哪几种报错？1
• 如何收集错误并上报？2
• 公司有哪些成熟系统来进行错误收集？1
• 新建一个项目，有哪些稳定性方面的事情需要做一下？3

• 请简述，圈红部分的功能：
  • 搜索 2
  • 保留日志 1
  • 停用缓存 2
  • 网络状态 1
  • 导入导出 HAR 3
  • 名称、状态、协议、类型、启动器3、大小、时间、瀑布流3