关于前端优化面试题

1.应该怎样优化css提高性能？

加载性能 （主要是从减少文件体积，减少阻塞加载，提高并发方面入手），选择器性能，渲染性能，可维护性。

• 1、尽量将样式写在单独的css文件里面，在head元素中引用。 (1)内容和样式分离，易于管理和维护 (2)减少页面体积 (3)css文件可以被缓存、重用，维护成本降低。
• 2、不使用@import。
• 3、避免使用复杂的选择器，层级越少越好。
• 4、精简页面的样式文件，去掉不用的样式。
• 5、利用CSS继承减少代码量。
• 6、慎重使用高性能属性：浮动、定位。
• 7、css样式前缀。标准化各种浏览器前缀，带浏览器前缀的在前，标准的在后。
• 8、css属性值。属性值为0时，不加单位。

2.前端性能优化方法？

减少http请求

• 1）合并图片。当图片较多时，可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外，还可以充分利用缓存来提升性能。
• 2）合并压缩css样式表和js脚本，他们的共同目的都是为了减少http连接数。
• 3）去掉不必要的请求。开发写代码或者系统升级之后残留的无效请求连接。
• 4）充分利用缓存。这里说的缓存是客户端侧缓存或者说浏览器缓存。

图片优化

• 1）尽可能的使用PNG格式的图片，它相对来说体积较小。
• 2）对于不同格式的图片，在上线之前最好进行一定的优化。
• 3）图片的延迟加载，也叫做懒加载。

使用CDN

• CDN即内容分发网络，可以使用户就近取得所需内容，解决网络拥挤的状况，提高用户访问网站的响应速度。

数据压缩

样式表和JS文件的优化

• 一般我们会把css样式表文件放到文件的头部。比如，放到标签中，这样可以让CSS样式表尽早地完成下载。对应js脚本文件，一般我们把他放到页面的尾部。

前端代码结构的优化

3.对前端工程化的理解。

工程化主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间等。

前端工程化需要从模块化、组件化、规范化、自动化4个方面考虑。

模块化

• 就是把一个大的文件，拆分成多个相互依赖的小文件，按一个个模块来划分。

组件化

• 页面上所有的东西都可以看成组件，页面是个大型组件，可以拆成若干个中型组件，然后中型组件还可以再拆，拆成若干个小型组件。
• 组件化≠模块化。模块化只是在文件层面上，对代码和资源的拆分；组件化是在设计层面上，对于UI的拆分。 目前市场上的组件化的框架，主要的有Vue，React，Angular2。

规范化

• 目录结构的制定
• 编码规范
• 前后端接口规范
• 文档规范
• 组件管理
• Git分支管理
• Commit描述规范
• 定期codeReview
• 视觉图标规范

自动化

• 简单重复的工作交给机器来做，自动化也就是有很多自动化工具代替我们来完成，例如持续集成、自动化构建、自动化部署、自动化测试等等。

4.在书写高效css时，要考虑哪些问题？

CSS书写顺序

• 位置属性(position, top, right, z-index, display, float等)
• 大小(width, height, padding, margin)
• 文字系列bai(font, line-height, letter-spacing, color- text-align等)
• 背景(background, border等)
• 其他(animation, transition等)

使用CSS缩写属性

• CSS有些属性是可以缩写的，比如padding,margin,font等等bai，这样精简代码同时又能提高用户的阅读体验。

颜色代码缩写

提取公共样式，提高代码复用率

Css样式初始化

5.如何理解渐进增强和优雅降级？

渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

渐进增强优先考虑老版本浏览器的可用性，最后才考虑新版本的可用性。而在前缀css3和正常css3都可用的情况下，正常css3会覆盖前缀css3。

优雅降级：一开始就构建站点的完整功能，然后再针对低版本浏览器进行兼容。

优雅降级优先考虑新版本浏览器的可用性，最后才考虑老版本的可用性。而在前缀css3和正常css3都可用的情况下，前缀css3会覆盖正常css3。

总结：其实优雅降级和渐进增强都是网站开发的加分项，最重要的还是保证尽可能多的用户可以正常访问网站，在此之后再考虑降级的极端情形和现代浏览器的体验增强。

6.谈谈你对重构的理解。

重构就是通过调整程序代码，但并不改变程序的功能特征，达到改善软件的质量、性能，使程序的设计模式和架构更趋合理，更容易被理解，提高软件的扩展性和维护性。

为什么要重构？

需求的不断变更是重构的最根本原因，而且重构是每一个开发人员都要面对的功课。 代码架构最初的设计也是经过精心的设计，具有良好架构的。但是随着时间的推移、需求的剧增，必须不断的修改原有的功能、追加新的功能，还免不了有一些缺陷需要修改。为了实现变更，不可避免的要违反最初的设计构架。经过一段时间以后，软件的架构就千疮百孔了。bug越来越多，越来越难维护，新的需求越来越难实现，最初的代码构架对新的需求渐渐的失去支持能力，而是成为一种制约。最后新需求的开发成本会超过开发一个新的软件的成本，这就使这个app的生命走到了尽头。 代码重构就能够最大限度的避免这样一种现象。 系统发展到一定阶段后，使用重构的方式，不改变系统的外部功能，只对内部的结构进行重新的整理。通过重构，不断的调整系统的结构，使系统对于需求的变更始终具有较强的适应能力。

通过代码重构可以达到以下的目标：

• 1、持续偏纠和改进软件设计
• 2、使代码更被其他人所理解
• 3、帮助发现隐藏的代码缺陷
• 4、从长远来看，有助于提高编程效率，增加项目进度（进度是质量的敌人，质量是进度的朋友）

7.常见的浏览器兼容性问题？如何解决？

• 1.不同浏览器的标签默认的外边界和内填充不同。
  问题表现：不加样式控制下，margin和padding差异较大
  解决方案：css里 *{margin:0; padding:0;}

• 2.块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大。
  问题表现：IE6后面的一块被顶到下一行
  解决方案：在float的标签样式控制中加入display:inline;转化为行内属性

• 3.设置较小高度标签(一般小于10px)，在IE6、IE7，高度超出设置高度值。
  问题表现：IE6、7这个标签的高度不受控制，超出自己设置的高度
  解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度

• 4.行内属性标签，设置display:block后采用float布局，又有横向的margin情况，IE6间距bug。
  问题表现：IE6的间距比超过设置的间距
  解决方案：在display:block;后面加入display:inline;display:table;

• 5.图片默认有间距。
  问题表现：几个img标签放在一块，有些浏览器会有默认的间距，有通配符也不起作用
  解决方案：使用float属性为img布局

• 6.标签最低高度设置min-height不兼容。
  问题表现：min-height本身就是一个不兼容的css属性，所以设置min-height时不能兼容所有浏览器
  解决方案：如果设置一个标签最小高度为200px，需要进行设置 {min-height:200px; height:auto !important; height: 200px; overflow:visible;}

• 7.光标手形。
  问题表现：firefox不支持hand，但ie支持pointer
  解决方案：统一使用cursor:pointer;

• 8.字体大小定义不同。
  问题表现：对字体大小small定义不同，Firefox为13px，而IE为16px，差别比较大
  解决方法：使用指定的字体大小如14px或者使用em

• 9.IE6 3px bug
  问题表现：左侧div浮动left，右边DIV可以接着横向排列，形成典型一列固定，第二列自适应，IE6出现之间3px间隙
  解决方法：对左侧left的盒子补上_margin-right: -3px;

8. rgba（）和 opacity 的透明效果有什么不同？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度。而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）。