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

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>

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