前端面试问题（持续更新） - 掘金
source link: https://juejin.im/post/59c485075188257e6e2634e0
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
前端面试问题（持续更新）
1、有关BFC的理解
2、盒模型的理解
3、box-sizing的理解
4、渐进增强 VS 优雅降级
5、url->页面加载完成的整个流程
6、js组成部分
7、如何跨域访问
8、js判断数组
9、严格模式
10、ajax的优缺点
11、HTML、XML、XHTML 有什么区别
12、html语义化
13、内容与样式分离
14、meta标签的使用
15、文档声明的作用
16、严格模式和混杂模式
17、<!doctyle html>的作用
18、常见浏览器内核
19、页面导入样式时，使用link和@import有什么区别
20、浏览器内核的理解复制代码有关BFC的理解
BFC用来格式化块级盒子
BFC: 提供一个环境，html元素会在这个环境中按照一定的规则进行布局。
ex: 例如浮动元素会形成bfc,浮动元素内部子元素主要受该浮动元素影响，但是两个浮动元素互相不影响。
这个可以理解为一个独立容器，里边规则不会影响到外边。
那么什么情况下会生成bfc呢：
1、浮动元素，float除none以外的值
2、绝对定位，position(absolite,fixed)
3、dispaly = inline-blocks|table-cells|table-captions
4、overflow除visible以外的值
作用：
1、可以阻止元素被浮动元素覆盖
2、包含浮动元素
3、如果属于同一个bfc的两个元素上下margin会发生重叠，但如果两个元素属于两个不同的bfc那么margin就不会发生重叠
盒模型的理解
css盒子模型，包含了content,padding,border,margin
这些基本的比如比如哪儿是content大家都了解我就说了在设置width = 300px时代表的是content的宽度那么最终的宽度是content+padding+border+margin.
css外边距合并
刚才在bfc中提到，在一个bfc中，css外边距是会发生重叠的，解决方法就是放在两个bfc中。当我们使用盒模型的时候需要注意的是浏览器的兼容性，这个很好解决在html中声明 <!DOCTYPE html>，ul在mozilia默认有padding值，而在IE中只有margin有值
盒模型中我们常使用一个属性叫box-sizing,这会单独起一页，这也是面一经常出的问题
box-sizing的理解
box-sizing: content-box|border-box|inherit
content-box是默认值，总宽度= margin+border+padding+width
border-box: 在css中设置的width = border + padding + content,那么总宽度 = margin + width常在box宽度是100%,又想要两边有内间距
inherit: 这就不用说了，是继承
渐进增强 VS 优雅降级
渐进增强：低浏览器实现基本功能，高级浏览器实现交互、效果达到更好的体验
优雅降级： 在高级浏览器实现完整功能，然后针对低级浏览器进行hack以便低级浏览器能够正常运行
两者是因为各种版本的浏览器对css3的支持情况而不同所造成的
url->页面加载完成的整个流程
1、浏览器查询域名对应的IP地址
2、浏览器根据IP地址与服务器建立socket连接
3、浏览器与服务器进行通信：浏览器请求，服务器处理请求
4、浏览器与服务器断开连接
这个内容太多了，我会专门写一篇blog来解释，但是面试这些回答这些就够了
js组成部分
1、ECMAScript 定义脚本语言的属性、方法和对象
2、文档对象类型(DOM)：把整个页面规划成由节点层级构成的文档
3、浏览器对象模型(BOM)：处理浏览器宽口和框架
如何跨域访问
1、jsonp跨域访问
2、window.name进行跨域
3、html5中的window.postMessage方法
4、http头部信息中加入origin
这个在我一片blog中专门讲到了两种jsonp和origin如今最常用的两种跨域请求方式
js判断数组
return Object.prototype.toString.call(arg) === '[object Array]'复制代码使用方法：进入严格模式的标志 'use strict',语法更加严格，更安全，提高运行速度。
1、全局变量显示声明
2、静态绑定：属性和方法归属的对象，在编译阶段就确定
3、增强的安全措施：①禁止this指向全局对象②禁止在函数内部遍历调用栈
4、禁止删除变量，除非创建对象使用configurable=true
5、显示报错：对对象的只读属性，只有getter的对象赋值，对禁止扩展的对象添加新属性都会报错
6、重名错误：对象不能有同名的参数，函数不能有重名的参数
7、禁止八进制表示法
8、禁止arguments赋值，不会追踪参数的变化，禁止使用arguments.callee
9、函数必须声明在顶层
10、新增保留字
ajax的优缺点
优点：减轻服务器的负担，按需取数据，最大程度减少冗余请求，局部刷新。
缺点：浏览器之间有差异，对流媒体和移动设备支持不够好
HTML、XML、XHTML 有什么区别
html:超文本标记语言，显示信息，不区分大小写
xhtml:升级版的html，区分大小写
xml:可扩展标记语言被用来传输和存储数据
html语义化
直观认识标签和属性的作用，便于阅读和维护
内容与样式分离
可以确保网页平稳退化，易于维护
meta标签的使用
meta name="keyword" 告诉搜素引擎网页的关键词
meta name="description" 告诉搜素引擎站点的内容
mata name="author" content="name"站点制作望着
meta name="viewport" content="width=device-width, initial-scale=1.0"
响应式页面
文档声明的作用
让浏览器解析器知道需要用什么规范来解析文档
严格模式和混杂模式
严格模式：浏览器最高标准呈现页面
混杂模式：页面以一种比较宽松的向后兼容的方式显示
<!doctyle html>的作用
使用html5标准来解析渲染页面，如果不写就进入混杂模式
常见浏览器内核
IE 用的是trident
firefox Gecko
opera Blink
safari Chrome webkit复制代码页面导入样式时，使用link和@import有什么区别
页面被加载时，link被同时加载，@import会页面加载完成后在加载
浏览器内核的理解
渲染引擎和JS引擎
渲染引擎：负责取得网页的内容、整理讯息，以及计算网页的显示方式
JS引擎：解析和执行js来实现网页的动态效果
我的github,你的关注是我不断前进的动力github.com/skychenbo/i…
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK