前端性能优化面试题汇总

面试题 1. 简述如何对网站的文件和资源进行优化?

参考回答：

举列：
1.文件合并（目的是减少http请求）：使用css sprites合并图片，一个网站经常使用小图标和小图片进行美化，但是很遗憾这些小图片占用了大量的HTTP请求，因此可以采用sprites的方式把所有的图片合并成一张图片 ，可以通过相关工具在线合并，也可以在ps中合并。
2.使用CDN（内容分发网络）加速，降低通信距离。
3.缓存的使用，添加Expire/Cache-Control头。
4.启用Gzip压缩文件
5.将css放在页面最上面。
6.将script放在页面最下面。
7.避免在css中使用表达式。
8.将css, js都放在外部文件中。
9.减少DNS查询。
10.文件压缩：最小化css, js，减小文件体积。
11.避免重定向。
12.移除重复脚本。
13.配置实体标签ETag。14.使用AJAX缓存，让网站内容分批加载，局部更新。

面试题 2. 哪些常见的前端Web性能优化的方法？

参考回答：

前端Web性能优化建议以下操作措施：
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示div+css布局慢。对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。

面试题 3. 哪些常见操作会前端造成内存泄漏？

参考回答：

1：内存泄漏: 即为变量内容持续占用内存空间，不释放，垃圾回收机制也没有将该内存回收的情况
2：内容泄露的原因:
（1）死循环
（2）定时器没有清除
（3）绑定的事件没有解除
（4）递归调用没有结束条件

3：主要存在内存泄漏的问题点: :
（1）BOM DOM对象泄漏
（2）scipt中存在对BOM DOM对象的引用
（3）javaScript对象泄漏
（4）闭包函数导致的泄漏 主要关注的代码点
DOM中的addEventLisner 函数及派生的事件监听， 比如Jquery 中的on 函数， vue 组件实例的 $on 函数，第三方库中的初始化函数
BOM对象的事件监听，比如webSocket的监听事件避免不必要的函数引用如果是要render函数，避免在html标签中DOM BOM事件

面试题 4. 简述前端性能优化问题？

参考回答：

代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。
缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等
请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。
请求带宽：压缩文件，开启GZIP

面试题 5. 简述三种减少页面加载时间的方法？

参考回答：

1.优化图片
2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
3.优化CSS（压缩合并css，如margin-top,margin-left...)
4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）
5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）
6.减少http请求（合并文件，合并图片）。

面试题 6. 哪些工具来测试代码的性能？

参考回答：

Profiler
JSPerf
Dromaeo

面试题 7. 请指出浏览器特性检测，特性推断和浏览器UA字符串嗅探的区别？

参考回答：

特性检测：为特定浏览器的特性进行测试，并仅当特性存在时即可应用特性。

User-Agent检测：最早的浏览器嗅探即用户代理检测，服务端（以及后来的客户端）根据UA字符串屏蔽某些特定的浏览器查看网站内容。

特性推断：尝试使用多个特性但仅验证了其中之一。根据一个特性的存在推断另一个特性是否存在。问题是，推断是假设并非事实，而且可能导致可维护性的问题。

面试题 8. 如何进行响应式测试？

参考回答：

响应式测试特别简单，通过改变视窗大小（也就是缩放浏览器）即可测试。当然，当在CSS中设置 Media Queries判断条件时要使用max- width才行，如果使用max- device- width则会根据设备的屏幕尺寸来判断。

面试题 9. 简述对于前端系统重构的理解 ？

参考回答：

网站重构是指在不改变外部行为的前提下，简化结构、添加可读性，且在网站前端保持一致的行为。也就是说，在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。
对于传统的网站来说，重构通常包括以下方面。
把表格（ table）布局改为DV+CSS。
使网站前端兼容现代浏览器。
对移动平台进行优化。
针对搜索引擎进行优化。
深层次的网站重构应该考虑以下方面。
减少代码间的耦合
让代码保持弹性。
严格按规范编写代码。
设计可扩展的API。
代替旧的框架、语言（如VB）
增强用户体验。
对速度进行优化。
压缩 JavaScript、CSS、 image等前端资源（通常由服务器来解决）。
优化程序的性能（如数据读写）。
采用CDN来加速资源加载。
优化 JavaScript DOM。
缓存HTTP服务器的文件。

面试题 10. 简述移动端性能如何优化？

参考回答：

优化方式如下。
尽量使用CSS3动画，开启硬件加速。
适当使用 touch事件代替 click事件。
避免使用CSS3渐变阴影效果。
可以用 transform:translateZ（0）来开启硬件加速。
不滥用 Float, Float在渲染时计算量比较大，尽量少使用。
不滥用Web字体，Web字体需要下载、解析、重绘当前页面，尽量少使用。
合理使用requestAnimation Frame动画代替 setTimeout。
合理使用CSS中的属性（CSS3 transitions、CSS3 3D transforms、 Opacity、 Canvas、 WebGL、Video）触发GPU渲染。过度使用会使手机耗电量増加。

面试题 11. 请说出几种缩短页面加载时间的方法？

参考回答：

具体方法如下。
（1）优化图片
（2）选择图像存储格式（比如，GIF提供的颜色较少，可用在一些对颜色要求不高的地方）
（3）优化CSS（压缩、合并CSS）
（4）在网址后加斜杠
（5）为图片标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小。如果图片很多，浏览器需要不断地调整页面。这不但影响速度，而且影响浏览体验。当浏览器知道高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容，从而优化加载时间，提升浏览体验）

面试题 12. 简述哪些方法可以提升网站前端性能?

参考回答：

一、HTTP请求优化。主要分为减少HTTP请求次数、减小请求数据量和缓存三个方面。

减少HTTP请求次数可以通过以下方法实现：合并JS、CSS文件；使用CSS Sprites技术合并图片；压缩图片大小；避免使用多个域名。
减小请求的数据量来降低网络带宽消耗，提高页面加载速度。实现方式包括：压缩JavaScript、CSS文件；使用Gzip压缩响应数据；精简HTML代码。
在浏览器缓存中缓存静态资源则可以大大减少HTTP请求次数，提高页面加载速度。可以通过设置Expires头信息；设置Cache-Control头信息；使用ETag头信息等方式来实现强缓存或协商缓存，具体根据网站优化需求去使用即可。

二、资源加载优化。主要分为异步加载JS文件、延迟加载图片、使用CDN三种方法。

异步加载JavaScript文件，即采用诸如async、defer等方式将JS文件异步加载，避免JavaScript阻塞页面渲染的情况，提高页面加载速度。
延迟加载图片。避免在页面加载时同时请求大量图片，降低网络带宽消耗，提高页面加载速度，期间可以采用骨架屏等方式来提高用户体验。
使用CDN加速。即利用CDN将资源分发到离用户更近的服务器上，提高资源加载速度。


三、页面渲染优化。主要包括减少DOM操作次数、避免table布局、采用CSS动画等。

减少DOM操作次数。可以减轻浏览器的负担，提高页面渲染速度，主要通过缓存DOM元素和一次性对DOM元素进行修改来实现。
避免使用table布局，table布局牵一发而动全身，修改一个小标签会使得页面渲染速度变慢，建议使用div+CSS布局或者flex布局。
使用CSS动画代替JavaScript动画。CSS动画可以减少JS操作DOM的次数，提高页面渲染速度。

四、代码优化。主要分为避免使用全局变量、优化重复执行代码两个方面。
避免使用全局变量。过多的全局变量会占用过多的内存空间，影响页面性能，为此我们使用命名空间避免全局变量污染或者将全局变量封装在闭包中。
将重复执行的代码进行优化。将重复执行的代码进行优化可以减少代码运行时间，提高页面渲染速度，通过缓存DOM元素、事件委托等形式都可以实现。

综上，前端性能优化是提高用户体验的重要手段。本文从HTTP请求优化、资源加载优化、页面渲染优化和代码优化四个方面介绍了常见的前端性能优化方法。在日常学习工作中，我们应该根据具体的项目需求选择合适的优化手段，从而提高页面加载速度和渲染速度。

面试题 13. 简述列举你知道的Web性能优化方法 ？

参考回答：

具体优化方法如下。
（1）压缩源码和图片（ JavaScript采用混淆压缩，CSS进行普通压缩，JPG图片根据具体质量压缩为50%~70%，把PNG图片从24色压缩成8色以去掉一些PNG格式信息等）。
（2）选择合适的图片格式（颜色数多用JPG格式，而很少使用PNG格式，如果能通过服务器端判断浏览器支持WebP就用WebP或SVG格式）。
（3）合并静态资源（减少HTTP请求）
（4）把多个CSS合并为一个CSS，把图片组合成雪碧图。
（5）开启服务器端的Gzip压缩（对文本资源非常有效）。
（6）使用CDN（对公开库共享缓存）。
（7）延长静态资源缓存时间。
（8）把CSS放在页面头部把 JavaScript代码放在页面底部（这样避免阻塞页面渲染而使页面出现长时间的空白）

面试题 14. 简述如何分析并对代码进行性能优化 ？

参考回答：

利用性能分析工具监测性能，包括静态 Analyze工具和运行时的 Profile工具（在Xcode工具栏中依次单击 Product→ Profile项可以启动）。

比如测试程序的运行时间，当单击 Time Profiler项时，应用程序开始运行，这就能获取到运行整个应用程序所消耗时间的分布和百分比。为了保证数据分析在同一使用场景下的真实性，一定要使用真机，因为此时模拟器在Mac上运行，而Mac上的CPU往往比iOS设备要快

面试题 15. 简述CSS，如何优化性能？

参考回答：

（1）正确使用 display属性， display属性会影响页面的渲染，因此要注意以下几方面。
display:inline后不应该再使用 width、 height、 margin、 padding和float 。
display:inline- block后不应该再使用 float。
display:block后不应该再使用 vertical-align。
display:table-*后不应该再使用 margin或者float。
（2）不滥用 float。
（3）不声明过多的font-size。
（4）当值为0时不需要单位。
（5）标准化各种浏览器前缀，并注意以下几方面。
浏览器无前缀应放在最后。
CSS动画只用（ -webkit-无前缀）两种即可。
其他前缀包括 -webkit-、-moz-、-ms-、无前缀（ Opera浏览器改用 blink内核，所以-0-被淘汰）
（6）避免让选择符看起来像是正则表达式。高级选择器不容易读懂，执行时间也长。
（7）尽量使用id、 class选择器设置样式（避免使用 style属性设置行内样式）
（8）尽量使用CSS3动画。
（9）减少重绘和回流。

面试题 16. 针对HTML，如何优化性能？

参考回答：

（1）对于资源加载，按需加载和异步加载
（2）首次加载的资源不超过1024KB，即越小越好。
（3）压缩HTML、CSS、 JavaScript文件。
（4）减少DOM节点。
（5）避免空src（空src在部分浏览器中会导致无效请求）。
（6）避免30*、40*、50*请求错误
（7）添加 Favicon.ico，如果没有设置图标ico，则默认的图标会导致发送一个404或者500请求。

面试题 17. 简述JavaScript，如何优化性能？

参考回答：

（1）缓存DOM的选择和计算。
（2）尽量使用事件委托模式，避免批量绑定事件。
（3）使用 touchstart、 touchend代替 click。
（4）合理使用 requestAnimationFrame动画代替 setTimeOut。
（5）适当使用 canvas动画。
（6）尽量避免在高频事件（如 TouchMove、 Scroll事件）中修改视图，这会导致多次渲染。

面试题 18. 简述如何优化服务器端的接口（通讯链接方面） ？

参考回答：

（1）接口合并：如果一个页面需要请求两部分以上的数据接口，则建议合并成一个以减少HTTP请求数
（2）减少数据量：去掉接口返回的数据中不需要的数据
（3）缓存数据：首次加载请求后，缓存数据；对于非首次请求，优先使用上次请求的数据，这样可以提升非首次请求的响应速度。

面试题 19. 简述前端如何优化脚本的执行？

参考回答：

脚本处理不当会阻塞页面加载、渲染，因此在使用时需注意。
（1）把CSS写在页面头部，把 JavaScript程序写在页面尾部或异步操作中。
（2）避免图片和 iFrame等的空src，空src会重新加载当前页面，影响速度和效率。
（3）尽量避免重设图片大小。重设图片大小是指在页面、CSS、 JavaScript文件等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能
（4）图片尽量避免使用 DataURL。DataURL图片没有使用图片的压缩算法，文件会变大，并且要在解码后再渲染，加载慢，耗时长

面试题 20. 简述前端如何优化渲染？

参考回答：

具体方法如下。
通过HTML设置 Viewport元标签， Viewport可以加速页面的渲染，如以下代码所示。

（2）减少DOM节点数量，DOM节点太多会影响页面的渲染，应尽量减少DOM节点数量。
（3）尽量使用CSS3动画，合理使用 requestAnimationFrame动画代替 setTimeout，适当使用 canvas动画（5个元素以内使用CSS动画，5个元素以上使用 canvas动画（iOS 8中可使用 webGL））。
（4）对于高频事件优化 Touchmove, Scroll事件可导致多次渲染。
使用 requestAnimationFrame监听帧变化，以便在正确的时间进行渲染，增加响应变化的时间间隔，减少重绘次数。
使用节流模式（基于操作节流，或者基于时间节流），减少触发次数。
（5）提升GPU的速度，用CSS中的属性（CSS3 transitions、CSS3 3D transforms、 Opacity、 Canvas、 WebGL、Video）来触发GPU渲染.

面试题 21. 简述如何合理设置DNS缓存？

参考回答：

在浏览器地址栏中输入URL以后，浏览器首先要查询域名（ hostname）对应服务器的IP地址，一般需要耗费20~120ms的时间。
DNS查询完成之前，浏览器无法识别服务器IP，因此不下载任何数据。基于性能考虑，ISP运营商、局域网路由、操作系统、客户端（浏览器）均会有相应的DNS缓存机制。
（1）正IE缓存30min，可以通过注册表中 DnsCacheTimeout项设置。
（2） Firefox混存1 min，通过 network.dnsCacheExpiration配置。
（3）在 Chrome中通过依次单击“设置”→“选项”→“高级选项”，并勾选“用预提取DNS提高网页载入速度”选项来配置缓存时间。

面试题 22. 简述jQuery性能优化如何做？

参考回答：

（1）使用最新版本的 jQuery类库。
JQuery类库每一个新的版本都会对上一个版本进行Bug修复和一些优化，同时也会包含一些创新，所以建议使用最新版本的 jQuery类库提高性能。不过需要注意的是，在更换版本之后，不要忘记测试代码，毕竟有时候不是完全向后兼容的。
（2）使用合适的选择器。
jQuery提供非常丰富的选择器，选择器是开发人员最常使用的功能，但是使用不同选择器也会带来性能问题。建议使用简凖选择器，如i选择器、类选择器，不要将i选择器嵌套等。
（3）以数组方式使用 jQuery对象。
使用 jQuery选择器获取的结果是一个 jQuery对象。然而， jQuery类库会让你感觉正在使用一个定义了索引和长度的数组。在性能方面，建议使用简单的for或者 while循环来处理，而不是$. each()，这样能使代码更快。
（4）每一个 JavaScript事件（例如 click、 mouseover等）都会冒泡到父级节点。当需要给多个元素绑定相同的回调函数时，建议使用事件委托模式。
（5）使用join( )来拼接字符串。
使用 join( )拼接长字符串，而不要使用“+”拼接字符串，这有助于性能优化，特别是处理长字符串的时候。
（6）合理利用HTML5中的data属性。
HTML5中的data属性有助于插入数据，特别是前、后端的数据交换；jQuery的 data( )方法能够有效地利用HTML5的属性来自动获取数据。

面试题 23. 哪些方法能提升移动端CSS3动画体验？

参考回答：

（1）尽可能多地利用硬件能力，如使用3D变形来开启GPU加速，例如以下代码。

-webkit-transform: translate 3d(0, 0, 0);
-moz-transform : translate3d(0,0, 0);
-ms-transform : translate 3d(0,0,0);
transform: translate3d(0,0,0)；
一个元素通过 translate3d右移500X的动画流畅度会明显优于使用left属性实现的动画移动，原因是CSS动画属性会触发整个页面重排、重绘、重组。paint通常是最耗性能的，尽可能避免使用触发 paint的CSS动画属性。

如果动画执行过程中有闪烁（通常发生在动画开始的时候），可以通过如下方式处理。

-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden；
-ms-backface-visibility:hidden ;
backface-visibility:hidden；
-webkit-perspective：1000；
-moz-perspective：1000；
-ms-perspective：1000；
perspective：1000;
（2）尽可能少使用box- shadows和 gradients，它们往往严重影响页面的性能，尤其是在一个元素中同时都使用时。

（3）尽可能让动画元素脱离文档流，以减少重排，如以下代码所示。

position:fixed；
position:absolute;

面试题 24. 简述浏览器缓存机制 ？

参考回答：

浏览器缓存是比较常见的问题，我会从浏览器缓存的方式，缓存的实现， 缓存在哪里这几个点来说明
缓存方式
我们经常说的浏览器缓存有两种，一种是强制缓存，一种是协商缓存，因为下面有具体实现讲解，所以这里就说一下概念
协商缓存协商缓存意思是文件已经被缓存了，但是否从缓存中读取是需要和服务器进行协商，具体如何协商要看请求头/响应头的字段设置，下面会说到。需要注意的是协商缓存还是发了请求的
强制缓存强制缓存就是文件直接从缓存中获取，不需要发送请求
缓存实现
强制缓存
强制缓存在 http1.0 的时候用的是 Expires，是响应头里面的一个字段表示的是文件过期时间。是一个绝对时间，正因为是绝对时间所以在某些情况下，服务器的时区和浏览器时区不一致的时候就会导致缓存失效。为了解决这个问题，HTPP1.1 引入了一个新的响应头 cache-control 它的可选值如下
cache-control
max-age: 缓存过期时间，是一个相对时间
public: 表示客户端和代理服务器都会缓存
private: 表示只在客户端缓存
no-cache: 协商缓存标识符，表示文件会被缓存但是需要和服务器协商
no-store: 表示文件不会被缓存
HTTP1.1 利用的就是 max-age:600 来强制缓存，因为是相对时间，所以不会出现 Expires 问题
协商缓存协商缓存是利用 Last-Modified/if-Modified-Since,Etag/if-None-Match 这两对请求、响应头。Last-Modified/if-Modified-SinceEtag/If-None-Match由于 Last-Modified 的时间粒度是秒，有的文件在 1s 内可能被改动多次。这种方式在这种特殊情况下还是会失效，所以HTTP1.1又引入了 Etag 字段。这个字段是根据文件内容生成一个标记符比如"W/"5f9583bd-10a8""，然后再和 If-None-Match 进行对比就能更准确的知道文件有没有被改动过
浏览器第一次发送请求获取文件缓存下来，服务器响应头返回一个 if-Modified-Since，记录被改动的时间
浏览器第二次发送请求的时候会带上一个 Last-Modified 请求头，时间就是 if-Modified-Since 返回的值。然后服务器拿到这个字段和自己内部设置的时间进行对比，时间相同表示没有修改，就直接返回 304 从缓存里面获取文件
缓存在哪里
知道了缓存方式和实现，再来说一下缓存存在哪个地方，我们打开掘金可以看到如下的信息 。缓存的来源有两个地方 from dist cache,from memeory cache
form memory cache
这个是缓存在内存里面，优点是快速，但是具有时效性，当关闭 tab 时候缓存就会失效。
from dist cache
这个是缓存在磁盘里面，虽然慢但是还是比请求快，优点是缓存可以一直被保留，即使关闭 tab 页，也会一直存在
何时缓存在memory,合适缓存在dist？
这个问题网上很少找的到标准答案，大家一致的说法是js,图片文件浏览器会自动保存在memory中，css文件因为不常修改保存在dist里面，我们可以打开掘金网站，很大一部分文件都是按照这个规则来的，但是也有少数js文件也是缓存在dist里面。所以他的存放机制到底是什么样了？我带着这个疑问查了好多文章，虽然最后没有确切找到答案，但是一个知乎的回答可以给我们提供思路，下面引用一个知乎回答者一段话
第一个现象(以图片为例)：访问-> 200 -> 退出浏览器再进来-> 200(from disk cache) -> 刷新 -> 200(from memory cache)。总结: 会不会是chrome很聪明的判断既然已经从disk拿来了， 第二次就内存拿吧 快。（笑哭)
第二个现象(以图片为例)：只要图片是base64 我看都是from memroy cache。总结: 解析渲染图片这么费劲的事情，还是做一次然后放到内存吧。用的时候直接拿
第三个现象(以js css为例)：个人在做静态测试的发现，大型的js css文件都是直接disk cache。结: chrome会不会说 我去 你这么大太占地方了。你就去硬盘里呆着吧。慢就慢点吧。
第四个现象：隐私模式下，几乎都是 from memroy cache。总结: 隐私模式 是吧。我不能暴露你东西，还是放到内存吧。你关，我死。
上面几点是虽然很幽默，但是却可以从中找到一部分答案，但是我觉得另一个知乎回答我更赞同
浏览器运行的时候也是由几个进程协作的，所以操作系统为了节省内存，会把一部分内存里的资源交换回磁盘的交换区，当然交换是有策略的，比如最常用的就是LRU。
什么时候存dist，什么时候存memoey都是在浏览器控制下的，memory不够了可能就会考虑去存dist了，所以经过上面所说我自己总结结果如下
大一点的文件会缓存在dist里面，因为内存也是有限的，磁盘的空间更大
小一点文件js,图片存的是memory
css文件一般存在dist
特殊情况memory大小是有限制的，浏览器也会根据自己的内置算法，把一部分js文件存到dist里面

面试题 25. 简述Weinre调试工具 ？

参考回答：

Weinre是一个简单、好用的调试工具。它会在本地创建一个监听服务器，并提供一个 JavaScript程序，你只用在需要测试的页面中加载这段 JavaScript程序，就可以被Weinre监听到，在 Inspect面板中调试这个页面

面试题 26. 如何对IE浏览器进行网页调试？

参考回答：

可以通过以下工具进行调试。
SuperPreview，主要用于HTML代码、CSS代码的调试和各个浏览器（目前只能针对IE6~IE8）的页面呈现测试。
Internet Explorer Collection，主要用于 Internet Explorer浏览器（IEl~IE8）各个版本的页面呈现测试。
Developer Toolbar，主要用于HTML代码、CSS代码和 JavaScript代码的调试。
IE WebDeveloper，主要用于HTML代码、CSS代码和 JavaScript代码的调试。
IE Web Developer可以让你检查和编辑 HTML DOM，显示错误信息、日志信息，显网站源代码，监视DHTML事件和HTTP流量。它的功能可以和火狐中的Firebug相媲美，甚至有些功能还强于 Firebug。
IETester，主要用于 Internet Explorer浏览器各个版本的页面呈现测试。
VS2008，主要用于 JavaScript代码的调试。
DebugBar，主要用于HTML代码、CSS代码和 JavaScript代码的调试

面试题 27. 简述原生JavaScript脚本优化 ？

参考回答：

1、减少重绘和回流
避免不必要的DOM操作
避免使用document.write
减少drawImage
尽量改变class而不是style，使用classList代替
className
2、缓存DOM选择与计算：每次DOM选择都要计算和缓存
3、缓存.length的值：每次.length计算用一个变量保存值
4、尽量使用事件代理：避免批量绑定事件
5、尽量使用id选择器：id选择器选择元素是最快的
6、touch事件优化：使用tap(touchstart和touchend)代替click(注意touch响应过快，易引发误操作)

面试题 28. 简述如何进行前端渲染优化 ？

参考回答：

1、设置viewport:HTML的viewport可加速页面的渲染


2、减少DOM节点：DOM节点太多影响页面的渲染，尽量减少DOM节点。

3、优化动画
（1）：尽量使用css3动画
（2）：合理使用requestAnimationFrame动画代替setTimeout.
（3）：适当使用canvas动画：5个元素以内使用css动画，5个元素使用canvas动画，iOS8+可使用WebGL动画。

4、优化高频事件：scroll、touchmove等事件可导致多次渲染。
（1）：函数节流
（2）：函数防抖
（3）：使用requestAnimationFrame监听帧变化：使得在正确的时间进行渲染
（4）：增加响应变化的时间间隔：减少重绘次数

5、GPU加速:使用某些html5标签和css3属性触发GPU渲染，请合理使用(过渡使用会引发手机耗电量增加)。
（1）：html标签：video,canvas，webgl
（2）：css属性，opacity,transform，transition

原文地址：https://blog.csdn.net/p445098355/article/details/140611430

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！