本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题。通过对本篇知识的整理以及经验的总结 ， 希望能帮到更多的前端面试者。
1.web 前端项目的结构是怎样的 ？ 文件有哪些命名规范 ？
项目结构规范
页面文件 ： 以项目名命名 ， 例如 ：shop
js 文件 ： 命名为 js
css 文件 ： 命名为 css
图片文件 ： 命名为 images
数据文件 ： 命名为 data
文件存储规范 ： 按项目模块分类存储 ， 例如 ： 用户信息管理
页面文件存放 ： shop/userinfo/userlist.html
js 文件 ：js/userinfo/userlist.js
css 样式 ：css/userinfo/userlist.css
注意 ： 图片的分类一般按照功能作用划分 ， 比如 ： 小图标、动画图片
动画图片 ：images/gif/…
图标库 ：images/flags/…
项目文件命名规范
页面 /js/css 文件规范 ： 项目名称 - 模块名称 - 页面名称 ， 例如 ：shop-user-index.html 用户模块的首页。
注意 ：js 一般会包含 公共 js 习惯命名 commo.js；css 样式会包含公共 css， 习惯命名为 common.css。
2. 谈谈浏览器的兼容性
这个问题是非常抽象的 ， 越是抽象的问题越能表现出我们的表达能力 ， 而面试官就喜欢根据你的回答来追问 ， 不断地打断你的思路 ， 这个时候不要慌 ， 一定要坚信自己。
回答思路
我们在开发的时候会明确项目要兼容哪些浏览器的最低版本 ， 我之前的项目要求兼容 IE8.0 以上的版本 ，Chrome 48 以上 ，FireFox 44 以上。有了这些最基本的要求 ， 在开发中就是要考虑到 CSS 样式和 JavaScript 的在这些浏览器的兼容性了
html 部分
1.H5 新标签在 IE9 以下的浏览器识别
2.ul 标签内外边距问题 ul 标签在 IE6\IE7 中 ， 有个默认的外边距 ， 但是在 IE8 以上及其他浏览器中有个默认的内边距。解决方法 ： 统一设置 ul 的内外边距为 0
CSS 样式的兼容性
1.css 的 hack 问题 ： 主要针对 IE 的不同版本 ， 不同的浏览器的写法不同
IE 的条件注释 hack：
2.IE6 双边距问题 ：IE6 在浮动后 ， 又有横向的 margin， 此时 ， 该元素的外边距是其值的 2 倍
解决办法 ：display:block;
3.IE6 下图片的下方有空隙
解决方法 ： 给 img 设置 display:block;
4.IE6 下两个 float 之间会有个 3px 的 bug
解决办法 ： 给右边的元素也设置 float:left;
5.IE6 下没有 min-width 的概念 ， 其默认的 width 就是 min-width
6.IE6 下在使用 margin:0 auto; 无法使其居中
解决办法 ： 为其父容器设置 text-align:center;
7. 被点击过后的超链接不再具有 hover 和 active 属性
解决办法: 按 lvha 的顺序书写 css 样式 ，
":link": a 标签还未被访问的状态 ；
":visited": a 标签已被访问过的状态 ；
":hover": 鼠标悬停在 a 标签上的状态 ；
":active": a 标签被鼠标按着时的状态 ；
8. 在使用绝对定位或者相对定位后 ，IE 中设置 z -index 失效 ， 原因是因为其元素依赖于父元素的 z -index， 但是父元素默认为 0 ， 子高父低 ， 所以不会改变显示的顺序
9.IE6 下无法设置 1px 的行高 ， 原因是由其默认行高引起的
解决办法 ： 为期设置 overflow:hidden; 或者 line-height:1px;
JavaScript 的兼容性
1. 标准的事件绑定方法函数为 addEventListener， 但 IE 下是 attachEvent；
2. 事件的捕获方式不一致 ， 标准浏览器是由外至内 ， 而 IE 是由内到外 ， 但是最后的结果是将 IE 的标准定为标准
3.window.event 获取的。并且获取目标元素的方法也不同 ， 标准浏览器是 event.target， 而 IE 下是 event.srcElement
4. 在低版本的 IE 中获取的日期处理函数的值不是与 1900 的差值 ， 但是在高版本的 IE 中和标准浏览器保持了一致 ， 获取的值也是与 1900 的差值。
比如 ：var year= new Date().getYear();
5.ajax 的实现方式不同 ， 这个我所理解的是获取 XMLHttpRequest 的不同 ，IE 下是 activeXObject
6.IE 中不能操作 tr 的 innerHtml7. 获得 DOM 节点的父节点、子节点的方式不同
其他浏览器 ：parentNode parentNode.childNodes
IE：parentElement parentElement.children
3. 页面优化有哪些方法
页面优化的方法非常多 ， 最好能够对这些优化方案进行分类 ， 这些方案最好能够结合实际开发遇到的问题来表述。
优化的方案
减少操作量
尽量减少 HTTP 请求
1) 合并文件 ， 比如把多个 CSS 文件合成一个 ；
2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位 ；
不要在 HTML 中使用缩放图片
缩放图片并没有减少图片的容量 ， 只是控制了图片的大小。
Image 压缩
使用工具对图片进行压缩 ， 保证质量的同时减少了图片的大小。
减少对 DOM 的操作
减少对 DOM 的操作 ， 减少页面的重绘。
提前做加载操作
对域名进行预解析
例如京东的做法
预载入组件或延迟载入组件
把 CSS 放到代码页上端
CSS 放到最顶部 ， 浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。
使用 new Image 对象 ， 对图片进行缓存
提升并行加载
切分组件到多个域 ， 提升服务器的响应能力
JavaScript 和 CSS 优化
从页面中剥离 JavaScript 与 CSS
剥离后 ， 能够有针对性的对其进行单独的处理策略 ， 比如压缩或者缓存策略。
精简 JavaScript 与 CSS
使用工具压缩 JavaScript 和 CSS 文件
脚本放到 HTML 代码页底部
减少对页面的阻塞。
异步加载
使用 Ajax 实现异步加载 ， 例如 ， 滚动页面加载后面的内容 ， 这种也比较常见。
4. 页面渲染原理是什么 ？
这是一道纯理论的题目 ， 只要能够将浏览器的渲染过程很专业的表述出来 ， 一定会得到面试官的青睐 ， 作为一枚前端人员确实有必要了解一下浏览器的渲染过程是怎样的 ， 对于页面性能的提升是有帮助的。
解题思路
渲染引擎是干什么的
渲染引擎可以显示 html、xml 文档及图片 ， 它也可以借助插件 (一种浏览器扩展) 显示其他类型数据 ， 例如使用 PDF 阅读器插件可以显示 PDF 格式。
渲染引擎
不同的浏览器有不同的渲染引擎 ， 对于渲染引擎的使用总结如下 ：
Trident(MSHTML)内核 ：IE,MaxThon,TT,The World,360, 搜狗浏览器等
Gecko 内核 ：Netscape6 及以上版本 ，FF,MozillaSuite/SeaMonkey 等
Presto 内核 ：Opera7 及以上
Webkit 内核 ：Safari,Chrome 等
解析 html 以构建 dom 树 -> 构建 render 树 -> 布局 render 树 -> 绘制 render 树
步骤详细解释
第一步 ： 渲染引擎开始解析 html， 根据标签构建 DOM 节点
第二步 ： 根据 css 样式构建渲染树 ， 包括元素的大小、颜色 ， 隐藏的元素不会被构建到该树中。
第三步 ： 根据 css 样式构建布局树 ， 主要是确定元素要显示的位置。
第四步 ： 根据前面的信息 ， 绘制渲染树。
5. 什么是响应式开发 ？
响应式开发是前端开发工作比较常见的工作内容 ， 随着移动互联网的发展 ， 移动端设计越来越重要 ， 很多项目都是移动端项目先开发 ， 而后是 PC 端的开发 ， 为了降低运营成本和开发成本 ， 同一个网站要能兼容 PC 端和移动端显示呼之欲出 ， 进而响应式开发成了前端开发人员必备的技能 ， 所以响应式开发的技术必须掌握。
什么是响应式
顾名思义 ， 同一个网站兼容不同的大小的设备。如 PC 端、移动端 (平板、横屏、竖排) 的显示风格。
需要用到的技术
1. Media Query(媒体查询)
用于查询设备是否符合某一特定条件 ， 这些特定条件包括屏幕尺寸 ， 是否可触摸 ， 屏幕精度 ， 横屏竖屏等信息。
2. 使用 em 或 rem 做尺寸单位
用于文字大小的响应和弹性布局。
3. 禁止页面缩放
4. 屏幕尺寸响应
a) 固定布局 ： 页面居中 ， 两边留白 ， 他能适应大于某个值一定范围的宽度 ， 但是如果太宽就会有很多留白 ， 太窄会出现滚动条 ， 在 PC 页面上很常见。
b) 流动布局 ： 屏幕尺寸在一定范围内变化时 ， 不改变模块布局 ， 只改变模块尺寸比例。比固定布局更具响应能力 ， 两边不留白 ， 但是也只能适应有限的宽度变化范围 ， 否则模块会被挤 (拉) 得不成样子。
c) 自定义布局 ： 上面几种布局方式都无法跨域大尺寸变化 ， 所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。
d) 栅格布局 ： 这种布局方式使得模块之间非常容易对齐 ， 易于模块位置的改变用于辅助自定义布局。
响应式设计注意事项
1. 宽度不固定 ， 可以使用百分比
head{width:100%;}
content{width:50%;}
2. 图片处理
图片的宽度和高度设置等比缩放 ， 可以设置图片的 width 为百分比 ，height:auto;
背景图片可以使用 background-size 指定背景图片的大小。
6.html5 有哪些新特性、移除了那些元素 ？
题目涉及到范围非常的大 ， 如果要面面俱到显然半天都答不完 ， 可以先罗列出 H5 的一些新特性 ， 不要回答那么具体 ， 等面试官提具体的问题 ， 所以在面试之前也要把这里的技术过一遍 ， 至少每个技术也要做个小程序出来体验一下。
H5 新特性
增强了图形渲染、影音、数据存储、多任务处理等处理能力主要表现在
绘画 canvas;
类似 windows 自带的画图板 ， 可绘制线、框、路径、图……，InternetExplorer 9、Firefox、Opera、Chrome 以及 Safari 支持 及其属性和方法。
画图需要的要素
a) 笔 ， 用笔可以画线、圆、矩形、文本等
b) 颜色
c) 画板
由于画布案例比较多 ， 代码比较复杂 ， 可以在 w3cschool 上查看相关教程
2) 本地离线存储 localStorage
长期存储数据 ， 浏览器关闭后数据不丢失;
1. 特点
数据永久存储 ， 没有时间限制 ； 大小限制 5M(够用了)； 只存储字符串。
2. 数据存取方式
localStorage.a = 3;// 设置 a 为 "3"
localStorage["a"] = "sfsf";// 设置 a 为 "sfsf"， 覆盖上面的值
localStorage.setItem("b","isaac");// 设置 b 为 "isaac"
var a1 = localStorage["a"];// 获取 a 的值
var a2 = localStorage.a;// 获取 a 的值
var b = localStorage.getItem("b");// 获取 b 的值
var b2= localStorage.key(0);// 获取第一个 key 的内容
localStorage.removeItem("c");// 清除 c 的值
localStorage.clear();// 清除所有的数据
推荐使用 ：
getItem()
setItem()
removeItem()
3. 事件监听
if(window.addEventListener){
window.addEventListener("storage",handle_storage,false);//
}else if(window.attachEvent){// 兼容 IE
window.attachEvent("onstorage",handle_storage);
function handle_storage(e){
对象 e 为 localStorage 对象 ，Chrome、Firefox 支持差 ，IE 支持较好。
3) sessionStorage 的数据在浏览器关闭后自动删除; 操作参考 localStorage
4) 用于媒介回放的 video 和 audio 元素;
5) 语意化更好的内容元素 ， 比如 article、footer、header、nav、section;
6) 表单控件 ，calendar、date、time、email、url、search;
7) 新的技术 webworker(专用线程)
8) websocketsocket 通信
9) Geolocation 地理定位
移除的元素
纯表现的元素
默认字体 ， 不设置字体 ， 以此渲染
字体标签
水平居中
下划线
大字体
中横线
文本等宽
框架集
原文链接：https://blog.csdn.net/weixin_28902131/article/details/112875705
