web前端面试准备

scool5078
210 阅读9分钟

自我介绍

您好，我叫xxx,来自河南，大学学的专业，是计算机网络技术。11年找到了第一份工作，到现在8年多，一直做的是前端开发，分别在4家公司呆过，涉及的业务领域主要有社区开发、电商、众筹、广告数据分析、项目管理平台。在技术方面，我参与开发的有，PC、H5、微信小程序、weex。谢谢。

前端面试题

html相关

  • 标准模式和兼容模式的区别 
doctype声明位于html文档的第一行，主要是告诉浏览器用什么样的标准去解析这个文档，它不存在或者格式不正确，会导致文档以兼容模式呈现。
标准模式都是以浏览器支持的最高标准去运行。兼容模式，是以向后兼容的方式显示，模拟老式浏览器的行为，以防止站点无法工作。
  • 请描述一下cookies、sessionStorage、localStorage的区别
cookie 上网站为了标识用户身份而存储在用户本地终端上的数据，通常会在http的请求中携带，在浏览器和服务端之间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

cookie存储大小不能超过4k
sessionStorage 和localStorage可以达到5M或更大
  • 如何实现浏览器内多个标签页之间的通信?
websocket

localStorage cookies

区别：无痕模式下，localStorage会报异常

css相关

  • 用纯css绘制一个三角形的原理
#dome {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px;
    border-color: transparent transparent red transparent;
}
  • css 兼容性问题
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决
  • 为什么要初始化css
因为浏览器的 兼容问题，不同浏览器对标签设置的默认值不一样，如果不初始化，浏览器之间的页面会有差异
  • css 定义的权重
标签=1；class=10；id=100
  • 请解释一下为什么要清除浮动
清除浮动是为了清除使用浮动元素所产生的影响。浮动的元素高度会塌陷，影响后面元素的布局
  • css优化，提高性能的方法
简化css选择器
提取项目的通用公有样式
  • 浏览器怎样解析css选择器
从右向左
样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。
只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。
  • ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）
双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，
比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
  • overflow: scroll时不能平滑滚动的问题怎么处理
-webkit-overflow-scrolling:touch
  • 什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
静态文件放在非主域名下

js 相关

  • js的基本数据类型
undefined、string、number、boolean、object
es6 Symbol 创建后不可变，独一无二的数据类型
  • js的基本规范
eslint 语法校验
  • javascript 原型、原型链？有什么特点？
每个对像在初始化的时候，都有一个prototype属性，当我们访问对像的某一属性时，如果对像内部不存在这个属性，就会去prototype里找这个属性，这个prototype又有自己的prototype,于是一直这样找下去,直到检索到object 内建对像（String Number Boolean Object Function Math）
  • javascript 有几种数据类型的值
栈：原始数据类型 Undefined，Null，Boolean，Number、String
堆：引用数据类型 对像、数组、函数
  • Javascript作用链域
全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层函数的内部细节，直至全局函数
  • AMD和CMD规范的区别
AMD对于依赖的模块AMD是提前执行，CMD是延迟加载
CMD推崇依赖就近，AMD推崇依赖前置
  • 异步加载js 的方法
1、aysnc
2、创建script标签
  • 哪些操作会造成内存泄露的
1、闭包
2、删除dom，但没有删除dom上的事件
  • 移动端的点击事件的有延迟，时间是多久，为什么会有？ 怎么解决这个延时？
1、fastClick
2、vue tap
原理是捕捉移动端的touchstart touchend事件
  • Webpack热更新实现原理
1、webpack编译期，注入热更新代码（EventSource）
2、页面打开后，服务端通过eventsource与客户端建立通信渠道，把下一次的hash返回前端
3、客户端拿到Hash,将这个hash作为下一次请求服务端hot-upadte.json和hot-update.js的hash
4、修改页面后，webpack监听到修改，开始编译，编译完成后，通知客户端
5、客户端收到消息，请求到hot-update.js的链接，插入文档
6、houte-update.js插入成功后，获取vue组件的render方法，重新执行，完成刷新
  • js防抖、节流
防抖：多次点击只执行最后一次
节流：多次点击，只执行第一次
  • 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
1、浏览器根据请求的url，进行dns域名解析，找到真实的ip，这个Ip就是你的服务器地址
2、客户端向你的服务器发送请求，通过三次握手建立tcp链接
3、建立tcp链接后，客户端发起http请求，服务端处理完成后返回数据
4、浏览器接获取到html\css\js\图片等资源后，进行解析，完成页面渲染（
    1、解析html，生成dom树
    2、解析css，生成cssom树
    3、dom树和css树合并在一起，生成渲染树
    4、根据渲染树来布局，计算每个节点的大小和位置
    5、将各个节点绘制到屏幕中
）
  • es6的新特性
- 箭头函数
- 变量定义let（不能重复定义） const （不能修改）
- 对象扩展运算符...
- 数组
  • webpack打包相关
webpack-dev-server 创建本地服务器
webpack打包，主要包含几个配置
1、entry 入口文件
2、output 打包后的输出目录
3、moudel 配置webpack相关模块
4、plugins （
    CommonsChunkPlugin（代码分割用来提取第三方库和公共模块，避免首屏加载的boudle文件体积过大从而导致加载时间过长）
    DefinePlugin（配置环境变量）
    hotMoudleReplacementPlugin（热更新）
    UglifyJsPlugin（js压缩插件）
    HtmlWebpackPlugin(依据一个html，生成一个自动引用你打包过后的js新的html文件)
）
  • html状态码
200 数据正常返回
304 自从上次请求后，请求的网页未修改过
303 url被重定向
404 找不到资源
500 服务端错误

vue 相关

  • vue中key的作用，ref的作用
1、给节点添加唯一标识，高效的更新DOM
2、通过this.$refs.ref可以获取dom
  • 谈谈你对mvvm 的理解
mvvm由三部分组成，model数据层，view视图层，viewmodel数据层和视图层的交互的桥梁
  • vue的生命周期
vue的生命周期由8部分组成
beforeCreated 创建前（数据监听和事件初始化都未开始）
created 创建后（数据监听完成，事件初始化完成，dom未挂载）
beforeMounted 载入前（render函数被调用，data被渲染到模板内，未挂载到html页面）
mounted 载入完成（模板渲染到html中）
beforeUpdate 更新前（可以进一步修改状态）
update 更新完成
beforeDestory 销毁前
destory 销毁后
  • react 的生命周期
constructor 数据初始化完成
componentWillMount 组件数据初始化完成，未挂载到dom中
componentDidMount 组件渲染完成挂载到dom中
componentWillUnmount 组件卸载和数据销毁时
componentWillReceiveProps 父组件的props改变需要重新渲染时
shouldComponentUpdate 组件数据更新，重新渲染
componentWillUpdate 组件渲染流程
componentDidUpdate 组件更新完毕后
  • vue 实现数据双向绑定的原理
通过object.defineProperty劫持各个属性的setter、getter,在数据变动时，触发监听回调
  • vue组件之间的数据传递
父组件传递给子组件：props
子组件传递给父组件：emit
兄弟组件传递：eventBus
  • vue和react的区别
1、react是纯函数编程，数据是单向的
2、vue是样式、模板、脚本，分离的更彻底

其他问题

  • 谈谈你对架构的理解
我觉得一个好的框架，它肯定有以下几个优点
1、可用性高（对外暴露的接口，调用方便）
2、重用性高（）
3、可扩展性好
4、性能好
  • 原来公司工作流程是怎么样的，如何与其他人协作的？如何跨部门合作的
产品、测试、技术先需求评审，接着出设计稿，然后设计稿评审，开发、测试、上线
  • 你遇到过比较难的技术问题是？你是如何解决的？
app部分页面改用weex开发时，因为一点都不懂app开发，weex也是从0开始，所以对weex页面和app交互的方法不是很理解。也没办法调试。头疼了好一阵。最后，和app的同学探讨了几次，就明白了。

1、移动端，底部fixed输入框，被弹出的键盘遮挡。解决办法，修改设计稿

2、随着项目的增多，组件不能夸项目复用。解决办法，就是开发自己的组件库。
  • 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件
vux
移动端图文编辑器
  • 前端性能优化都有哪些
1、减少http请求次数。比如：缓存不怎么变化的数据，cdn托管
2、图片多的页面使用懒加载
3、使用base64格式的图片
4、开启缓存
5、图片预加载（1、css加载 2、js加载 3、ajax加载）
  • 平时如何管理你的项目
- 前期规划好项目目录
- 使用eslint是团队人员编码习惯保持一致
- git提交必须写清楚备注
  • seo优化
- 设置好网站的标题、关键字、描述
- 多用语义化的标签
- 生成针对搜索引擎友好的网站地图
  • 前端安全问题
- xxs脚本攻击
- csrf 跨站请求伪造，使用token验证
  • 介绍一个你最得意的作品吧
把app内的部分页面改用weex开发。
  • 谈谈你对未来3-5年的规划
1、多写技术博客
2、深挖技术
3、架构
4、学习新的技术
avatar
文章
阅读
粉丝