前端面试实战汇总

html

1.简述一下对html语义化的理解

利于seo：搜索引擎爬出根据HTML标记和上下文锁定关键字的权重
易阅读、易于维护：
结构清晰：浏览器和搜索引擎解析解析

2.行内元素有哪些？块级元素有哪些？空（void）元素有哪些

行内元素:a、span、img、
块级元素：
空元素：br、

页面导入样式时，使用link和@import有什么区别？

介绍一下你对浏览器内核的理解？

渲染引擎
js引擎

常见的浏览器内核有哪些？

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

html5有哪些新特性：

媒介回放 video audio
localStoreage 存放数据 如果没有删除 会永远存在
sessionStoreage 数据浏览器关闭之后清除
语义化更好的内容元素
表单控件
新技术

纯表现的元素 big center font tt b u
对可用性产生负面影响的元素 frame frameset noframes

支持HTML5新标签

1. IE8/IE7/IE6支持通过document.createElement方法产生的标签
   2.用框架 比如html5shim

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

Label的作用是什么？是怎么用的？

如何实现浏览器内多个标签页之间的通信? (阿里)

前端需要注意哪些SEO

浏览器的渲染机制一般分为以下几个步骤

重绘（Repaint）和回流（Reflow）

css

display: none; 与 visibility: hidden; 的区别

外边距折叠(collapsing margins)

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

CSS优先级算法如何计算？

position的值relative和absolute定位原点是？

CSS3有哪些新特性？

对BFC规范(块级格式化上下文：block formatting context)的理解？

css定义的权重

box-sizing 常用的属性有哪些？分别有什么作用？

css垂直居中的方法有哪些？

在CSS样式中常使用 px、em 在表现上有什么区别？

解释下什么是浮动和它的工作原理？

浮动元素引起的问题？

列举几种清除浮动的方式？

介绍使用过的 CSS 预处理器？

CSS优化、提高性能的方法有哪些？

浏览器是怎样解析CSS选择器的？

抽离样式模块怎么写，说出思路？

元素竖向的百分比设定是相对于容器的高度吗？

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

js

Canvas 元素、webgl、threeJS

JavaScript的组成

JS的基本数据类型和引用数据类型

检测浏览器版本版本有哪些方式？

介绍JS有哪些内置对象？

如何最小化重绘(repaint)和回流(reflow)？

Javascript作用链域?

dom0 dom2 事件绑定区别

数据请求

面向对象

闭包

数组去重

es6

let const

箭头函数 this指向

解构

... 展开合并

promise

class (语法糖 => 构造函数,babel-loader)

模块化

Set解构 不能重复的类似于数组的一个新的结构

字符串模板

遇到不会的

当时在公司的时候自学的react 项目着急 就直接用了 没有注意到这些细节 回去我再去研究下

综合

前端工程化工具 gulp&webpack

团队协作工具 版本控制工具， 代码管理工具 svn&git

git常用：
git pull
git add . 暂存区
git commit 提交到本地仓库。
git push origin master:kerwin

代码冲突怎么解决？

git pull 再提交一次
借助可视化工具合并

本地项目关联到远程git仓库
完全空白项目关联：
git init 初始化
git remote add 地址
将全部文件加入git版本管理的意思是将当前文件夹下的全部文件放到版本管理中
git add 提交文件 使用-m 编写注释
git commit -m "注释"
git push 执行完以上操作，项目就与远程git仓库关联到了一起，可以正常使用了，去git项目页上可以看到刚刚提交的代码

有文件的项目关联：
git init
设置remote地址
git remote add origin 地址
获取远程仓库master分支上的内容
git pull origin master
将当前分支设置为远程仓库的master分支
git branch --set-upstream-to=origin/master master
将全部文件加入git版本管理 .的意思是将当前文件夹下的全部文件放到版本管理中
git add .
提交文件 使用-m 编写注释
git commit -m "注释"
推送到远程分支
git push
git config -l 配置文件页，使用vim编辑器的推出命令退出 :wq

jquery

事件循环

http相关

http状态码有那些？分别代表是什么意思？

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

说说TCP传输的三次握手四次挥手策略

断开一个TCP连接则需要“四次挥手”：

TCP和UDP的区别

HTTP和HTTPS

为什么HTTPS安全

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

HTTP 的工作原理

https://www.jianshu.com/p/5dc1793a4d10

前端攻击

1. CSRF的基本概念、缩写、全称
   CSRF的防范措施
   XSS的防范措施主要有三个：
   CSRF 和 XSS 的区别

遇到过哪些bug

react：

在页面没有加载完毕ajax 还在请求的时候 就立马点击其他页面 会报错 这时候的组件已经销毁了 但是ajax还在请求数据 this.setstate 还在执行 我的解决办法是 在销毁周期去this.setstate 赋值一个空函数

vue：

在使用vant的表单时 他的组件model 不是即可创建的 导致ref获取不到 无法赋初始值
我的解决办法是设置表单的初始状态（initialValues），还没有创建出来，让状态更新，渲染from表单时候传入异步更新 ，等创建完毕之后再设置起内容

小程序：

最近出现的一个bug button在之前是占满一行的 但是最近微信改了样式 设置了小型 如果要变成之前的 需要在page.json 去删除v2 new Date跨平台兼容性问题 只能自己手动把-替换/
无法获取UnionID的问题
用户必须已经关注公众号
必须要把公众号和小程序绑定在开发平台

MVC、MVP、MVVM三种区别及适用场合

MVC：Model（模型）-View 视图（渲染页面）-Controller（控制器） 实现关注点分离，即应用程序中的数据模型与业务和展示逻辑解耦
View 传送指令到 Controller ；
Controller 完成业务逻辑后，要求 Model 改变状态 ；
Model 将新的数据发送到 View，用户得到反馈
MVC优点：
耦合性低，视图层和业务层分离，
生命周期成本低
MVC使开发和维护用户接口的技术含量降低
可维护性高，分离视图层和业务逻辑层也使得WEB应用更易于维护和修改
部署快
MVC缺点：
不适合小型，中等规模的应用程序
视图与控制器间过于紧密连接，
视图对模型数据的低效率访问，
MVP：MVP（Model-View-Presenter）是MVC的改良模式
MVVM：主要目的是分离视图（View）和模型（Model） 低耦合 独立开发 可测试 可重用性
https://blog.csdn.net/victoryzn/article/details/78392128

第一家

微信小程序开发 遇到了哪些bug 哪些部分是你开发的

浏览器兼容性问题 有哪些兼容性问题

1.不同浏览器的标签默认的外补丁（margin）和内补丁（padding）不同
解决方案：css里增加通配符*{margin：0；padding：0}
2.ajax略有不同
IE：ActiveXObject
其他：xmlHttpReuest
3.IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
box{ width: 80px; height: 35px;}html>body #box{ width: auto;height: auto; min-width: 80px; min-height: 35px;}

4.IE9以下浏览器不能使用opacity
解决方案：opacity：0.5；filter：alfha（opacity=50）；filter：progid：DXlmageTransform.Microsoft.Alfha(style=0,opacity=50);

vue生命周期 常用的是哪些

from表单赋值 计算属性和方法的区别

职业规划

研究技术，
如果以后有机会为公司创造更大利益

有什么问题需要问技术面试官

• 技术发展路线 ，技术栈
• 技术分享学习
• 什么通知结果？
  现在项目是什么项目 ，进行到什么阶段
  是否有个人提升培训

有什么问题需要问hr
公司对我有什么期望 公司发展路线

第二家

如何设置图片透明度 兼容性问题

seo 有哪些注意点 什么方法对seo更友好 title 有什么属性

性能优化方案

cdn

反向代理

跨域cors

本地项目关联到远程git仓库

完全空白项目关联：
git init 初始化
git remote add 地址 将全部文件加入git版本管理 .的意思是将当前文件夹下的全部文件放到版本管理中
git add 提交文件 使用-m 编写注释
git commit -m "注释"
git push 执行完以上操作，项目就与远程git仓库关联到了一起，可以正常使用了，去git项目页上可以看到刚刚提交的代码

有文件的项目关联：
git init
设置remote地址
git remote add origin 地址
获取远程仓库master分支上的内容
git pull origin master
将当前分支设置为远程仓库的master分支
git branch --set-upstream-to=origin/master master
将全部文件加入git版本管理 .的意思是将当前文件夹下的全部文件放到版本管理中
git add .
提交文件 使用-m 编写注释
git commit -m "注释"
推送到远程分支
git push

git config -l 配置文件页，使用vim编辑器的推出命令退出 :wq

bug如何定位的

如何获取用户的ip地址 代理服务器ip

请求响应头 头里面有什么属性

https://www.cnblogs.com/hld123/p/10861557.html

如何知道用户从哪个网页进来的

HttpContext.Current.Request.UrlReferrer UrlReferrer是不是自己的页面

有遇到过什么技术难度 如何解决的

遇到问题 如何自己解决的

最近在学什么技术

自己的优点和缺点

优点：单身 全身心投入到 没有家庭负担 自学能力强 逻辑能力强 自控能力强
缺点:缺点钱

第三家

标准盒模型

图片裁剪工具

canvas 了解过嘛

如何返回的数据是json对象

delete操作之后 浏览器做了些什么

nuxt的生命周期

vue的数据双向绑定

base64了解过嘛

let const
var a
{
let a
}会出现什么问题

跨域的解决方案

为什么会产生跨域

ajax 如何设置请求头

vue 的函数式写法有了解过嘛

eslint 使用的是哪种程度

3.14159 用哪些截取后面4位小数
深拷贝 是什么 如何实现
echarts 实现一个5维的效果 4个维度都特别端 如果有一个维度特别长处理

第四家

骨架屏懒加载怎么实现的

小程序的生命周期 分别是什么用 请求数据放在哪里

openId和unionId的区别

预加载如何实现

vue生命周期 父传子

微信支付出现过什么问题吗