前端面试问题（持续更新）

Pines_Cheng 发布于2019-08-21 16:40 / 2370人阅读

摘要：例如浮动元素会形成浮动元素内部子元素主要受该浮动元素影响，但是两个浮动元素互相不影响。

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、的作用
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中声明，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"
响应式页面

文档声明的作用

让浏览器解析器知道需要用什么规范来解析文档

严格模式和混杂模式

严格模式：浏览器最高标准呈现页面
混杂模式：页面以一种比较宽松的向后兼容的方式显示

的作用

使用html5标准来解析渲染页面，如果不写就进入混杂模式

常见浏览器内核

IE 用的是trident
firefox Gecko
opera Blink
safari Chrome webkit

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

页面被加载时，link被同时加载，@import会页面加载完成后在加载

浏览器内核的理解

渲染引擎和JS引擎
渲染引擎：负责取得网页的内容、整理讯息，以及计算网页的显示方式
JS引擎：解析和执行js来实现网页的动态效果

我的github,你的关注是我不断前进的动力https://github.com/skychenbo/...

GPU云服务器云服务器面试问题 javaee面试问题前端面试 cdn常见面试问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88591.html

优秀文章收藏（慢慢消化）持续更新~

摘要：整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次，彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 评论0 收藏0
前端面试题总结——JS（持续更新中）

摘要：在此基础上加入了回调函数，加载完之后会执行中定义的函数，所需要的数据会以参数的形式传递给该函数。通常的做法是，为它们指定回调函数。前端面试题总结——JS（持续更新中） 1.javascript的typeof返回哪些数据类型 Object number function boolean underfind string 2.例举3种强制类型转换和2种隐式类型转换？强制（parseIn...

shery 2019-08-22 16:20 评论0 收藏0
前端最实用书签(持续更新)

摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。前言一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。书签源码书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 评论0 收藏0
前端面试题总结——HTML(持续更新中)

摘要：等知名网站已经开始测试并使用格式。页面加载速度更快结构化清晰页面显示简洁。表现与结构相分离。易于优化搜索引擎更友好，排名更容易靠前。用于替换当前元素，用于在当前文档和引用资源之间确立联系。前端面试题总结——HTML(持续更新中) 1.什么是HTML？ HTML：HyperText Markup Language超文本标记语言 2.XHTML和HTML有什么区别 HTML是一种基本的W...

afishhhhh 2019-08-01 18:38 评论0 收藏0
前端面试题总结——HTML(持续更新中)

摘要：等知名网站已经开始测试并使用格式。页面加载速度更快结构化清晰页面显示简洁。表现与结构相分离。易于优化搜索引擎更友好，排名更容易靠前。用于替换当前元素，用于在当前文档和引用资源之间确立联系。前端面试题总结——HTML(持续更新中) 1.什么是HTML？ HTML：HyperText Markup Language超文本标记语言 2.XHTML和HTML有什么区别 HTML是一种基本的W...

binta 2019-08-26 17:15 评论0 收藏0