随着前端项目的不断扩大，浏览器渲染的压力越来越大。配置较好的电脑可以流畅地渲染页面；配置较低的计算机可能会以不太令人印象深刻的性能呈现页面。性能优化部分的面试题主要考察考生对网站性能优化的理解。如何做好性能优化，哪些操作会引起性能优化问题，性能优化指标有哪些等等，值得考生关注。因为性能优化越来越重要，所以很多公司都成立了团队来做性能优化。1.谈谈你对重构的理解。网站重构是指在不改变外部行为的情况下，在网站前端简化结构，增加可读性，保持行为一致。也就是说，在不更改UI的情况下，站点经过优化以在保持一致的UI的同时进行扩展。对于传统网站，重构通常包括以下几个方面。将表格布局更改为DV+CSS。使网站前端与现代浏览器兼容。针对移动平台进行优化。针对搜索引擎进行优化。深入的网站重构应考虑以下几个方面。减少代码之间的耦合，保持代码的灵活性。严格按照规范编写代码。设计可扩展的API。更换旧框架、语言（如VB），提升用户体验。优化速度。压缩JavaScript、CSS、图片等前端资源（通常由服务器解析）。优化程序的性能（如数据读写）。使用CDN加速资源加载。优化JavaScriptDOM。HTTP服务器的缓存文件。2、如果一个页面（大型电商网站）的图片很多，页面加载很慢，有什么方法可以优化这些图片的加载，提高用户体验？对于图片的懒加载，可以在页面中添加滚动条事件，判断图片是在可见区域还是即将进入可见区域，先加载。如果是幻灯片、相册文件等，可以使用图片预加载技术，先下载当前显示图片的上一张和下一张。如果图片是CSS图片，可以使用CSSSprite、SVGsprite、Iconfont、Base64等技术。如果图片太大，可以使用经过特殊编码的图片，加载时会先加载一个非常小的压缩缩略图，提升用户体验。如果图片的显示区域小于图片的真实尺寸，则应根据业务需要先在服务器端对图片进行压缩。图片压缩后，图片大小与显示的一致。3.谈谈性能优化。可以在以下级别优化性能。缓存利用：缓存Ajax、使用CDN、缓存外部JavaScript和CSS文件、添加Expires标头、在服务器端配置Etag、减少DNS查找等请求数量：组合样式和脚本、使用CSS图像精灵、加载图像资源初始首屏外点播，延迟加载静态资源。请求带宽：压缩文件，启用GZIP。CSS代码：避免使用CSS表达式、高级选择器和通配符选择器。JavaScript代码：使用哈希表优化搜索，少用全局变量，使用innerHTML代替DOM操作，减少DOM操作次数，优化JavaScript性能，使用setTimeout避免页面无响应，缓存DOM节点搜索结果，避免使用with（with会创建自己的作用域，增加作用域链的长度），合并多个变量声明。HTML代码：避免使用空的src属性，例如图像和iFrame。如果src属性为空，会重新加载当前页面，影响速度和效率。尽量避免在HTML标签中写入Style属性。4、如何优化移动端的性能？优化方法如下。尝试使用CSS3动画并启用硬件加速。正确使用触摸事件而不是点击事件。避免CSS3渐变阴影效果。可以使用transform:translateZ(0)启用硬件加速。不要滥用Float，Float在渲染时的计算量比较大，尽量少用。不要滥用网络字体。Web字体需要在当前页面下载、解析、重绘，应尽量少用。合理使用requestAnimation帧动画，而不是setTimeout。合理使用CSS属性（CSS3transitions、CSS33Dtransforms、Opacity、Canvas、WebGL、Video）触发GPU渲染。过度使用会增加手机的耗电量。5、如何优化网站文件？可以执行文件合并和文件压缩以最小化文件；CDN可用于托管文件，让用户更快速地访问它们；可以使用多个域名来缓存静态文件。6.请列举几种缩短页面加载时间的方法。具体方法如下。（1）优化图片（2）选择图片存储格式（比如GIF提供的颜色比较少，可以用在一些对颜色要求不高的地方）（3）优化CSS（压缩、合并CSS）（4)在URL后加斜杠(5)表示图片的高和宽（如果浏览器没有找到这两个参数，需要在下载图片的时候计算尺寸，如果图片很多，浏览器需要不断调整页面，这不仅影响速度，还会影响浏览体验，当浏览器知道高宽参数后，即使图片暂时不能显示，也会在页面上为图片腾出空间，然后继续加载后面的内容，从而优化加载时间，提升浏览体验）。7、哪些方法可以提高网站前端性能？合并精灵以减少HTTP请求；压缩HTML、CSS和JavaScript文件；使用CDN托管静态文件；使用localstorage缓存和mainfest应用程序缓存。8、你知道哪些优化性能的方法？具体方法如下。(1)减少HTTP请求次数，控制CSSSprite、JavaScript和CSS源码、图片大小，使用网页Gzip、CDN托管、数据缓存、图片服务器(2)减少HTML标签带来的带宽通过前端模板JavaScript和数据浪费，使用变量在前端保存Ajax请求结果，减少请求次数，无需每次请求操作一个局部变量。(3)使用innerhTML代替DOM操作，减少DOM操作次数，优化JavaScript性能。(4)当需要设置的样式较多时，设置className，而不是直接操作Style。(5)少用全局变量，缓存DOM节点查找结果，减少I/O读操作(6)避免使用CSS表达式，也叫动态属性，(7)预加载图片，把样式表放在最前面，将脚本放在底部，带有时间戳。(8)避免在页面的主要布局中使用表格。表格要等里面的内容全部下载完才会显示，显示速度比DIV+CSS布局慢。9.列出你知道的Web性能优化方法。具体优化方法如下。（1）压缩源码和图片（JavaScript使用混淆压缩，CSS进行普通压缩，JPG图片根据具体质量压缩到50%~70%，PNG图片从24色压缩到8色去除部分PNG格式信息等）。（2）选择合适的图片格式（颜色数量多用JPG格式，很少用PNG格式，如果浏览器通过服务端支持WebP，就用WebP或SVG格式）。（3）合并静态资源（减少HTTP请求）（4）将多个CSS合并为一个CSS，将图片组合成sprite图片。(5)在服务器端启用Gzip压缩（对文本资源非常有效）。(6)使用CDN（公共图书馆的共享缓存）。(7)延长静态资源的缓存时间。(8)CSS放在页面头部，JavaScript代码放在页面底部（这样可以避免阻塞页面渲染，导致页面长时间出现空白）10.你平时是如何优化性能的的代码？使用性能分析工具监控性能，包括静态Analyze工具和runtimeProfile工具（点击Xcode工具栏中的Product→Profile开始）。比如测试程序的运行时间，当点击TimeProfiler项时，应用开始运行，这样就可以得到整个应用运行时间的分布和百分比。为了保证相同使用场景下数据分析的真实性，必须使用真实设备，因为此时模拟器运行在Mac上，而Mac上的CPU往往比iOS设备快。11.对于CSS，如何优化性能？具体优化方法如下。(1)正确使用display属性，display属性会影响页面的渲染，所以要注意以下几个方面。display:inline后不应使用宽度、高度、边距、填充和浮动。float不应在display:inline-block之后使用。display:block之后不应使用vertical-align。display:table-*不应使用margin或float。(2)不要滥用浮动。(3)不要声明太多的字体大小。(4)值为0时不需要单位。(5)规范各种浏览器前缀，注意以下几个方面。没有前缀的浏览器应该放在最后。只有两个（-webkit-无前缀）可以用于CSS动画。其他前缀包括-webkit-、-moz-、-ms-、无前缀（Opera浏览器使用blink内核，所以-0-被淘汰）(6)避免让选择器看起来像正则表达式。高级选择器不容易阅读并且需要很长时间才能执行。(7)尽量使用id和class选择器设置样式(避免使用style属性设置内联样式)(8)尝试使用CSS3动画。(9)减少重绘和回流。12.如何优化HTML的性能？具体方法如下。(1)对于资源加载，按需加载和异步加载(2)第一次加载的资源不要超过1024KB，即越小越好。(3)压缩HTML、CSS、JavaScript文件。(4)减少DOM节点。(5)避免空src（空src在某些浏览器中会导致无效请求）。（6）避免30*、40*、50*请求错误（7）添加Favicon.ico，如果不设置图标ico，默认图标会导致发送404或500请求。13.如何优化JavaScript的性能？具体方法如下。(1)缓存DOM的选择和计算。(2)尽量使用事件委托方式，避免批量绑定事件。(3)用touchstart和touchend代替click。(4)合理使用requestAnimationFrame动画代替setTimeOut。(5)适当使用canvas动画。(6)尽量避免在高频事件（如TouchMove、Scroll事件）中修改view，这样会造成多次渲染。14、服务器端如何优化？具体方法如下。(1)启用Gzip压缩。(2)延长资源缓存时间，合理设置资源过期时间，对一些长时间不更新的静态资源设置过期时间。(3)减小cookie头信息的大小，头信息越大，资源传输速度越慢。(4)图片或CSS、JavaScript文件可通过CDN加速。15、如何优化服务端界面？具体方法如下。(1)接口合并：如果一个页面需要请求两个以上的数据接口，建议合并为一个，减少HTTP请求的次数。(2)减少数据量：从接口返回的数据中去除不需要的数据。(3)缓存数据：第一次请求加载后，缓存数据；对于非首次请求，优先使用上次请求的数据，可以提高非首次请求的响应速度。16.如何优化脚本执行？脚本处理不当会阻塞页面加载和渲染，所以使用时要小心。(1)在页面头部编写CSS，在页面末尾或异步操作中编写JavaScript程序。(2)图片、iFrame等避免空src，空src会重新加载当前页面，影响速度和效率。(3)尽量避免调整图片大小。重置图片大小是指在页面、CSS、JavaScript文件等中多次重置图片大小，多次重置图片大小会导致图片多次重绘，影响性能(4)图片尽量避免使用DataURL。DataURL图片没有使用图片压缩算法，文件会变大，解码后需要渲染，加载慢，耗时长。17.如何优化渲染？具体方法如下。通过在HTML中设置Viewportmeta标签，Viewport可以加速页面的渲染，如下代码所示。
