本篇收录了一些面试中常常会遇到的经典面试题以及本人面试过程中遇到的一些问题。通过对本篇常识的整顿以及教训的总结，心愿能帮到更多的前端面试者。

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 以下的浏览器辨认

<!–[if lt IE 9]>

<script type=”text/javascript” src=”js/html5shiv.js”></script>

<![endif]–>

2.ul 标签内外边距问题 ul 标签在 IE6\IE7 中，有个默认的外边距，然而在 IE8 以上及其他浏览器中有个默认的内边距。解决办法：对立设置 ul 的内外边距为 0

CSS 款式的兼容性

1.css 的 hack 问题：次要针对 IE 的不同版本，不同的浏览器的写法不同
IE 的条件正文 hack：
<!–[if IE 6]> 此处内容只有 IE6.0 可见 <![endif]–>
<!–[if IE 7]> 此处内容只有 IE7.0 可见 <![endif]–>

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 的操作，缩小页面的重绘。

提前做加载操作

• 对域名进行预解析
  例如京东的做法
  <link rel=”dns-prefetch” href=”//misc.360buyimg.com” />
• 预载入组件或提早载入组件
• 把 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. 禁止页面缩放

<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />

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 反对 <canvas> 及其属性和办法。

画图须要的因素

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 天文定位

移除的元素

纯体现的元素

• <basefont> 默认字体，不设置字体，以此渲染
• <font> 字体标签
• <center> 程度居中
• <u> 下划线
• <big> 大字体
• <strike> 中横线
• <tt> 文本等宽

框架集

• <frameset>
• <noframes>
• <frame>

点击关注，第一工夫理解华为云陈腐技术~