• 微信
当前位置:首页 >> 建站学院 >> Web前端

【前端面试】干货!!!关于前端性能优化问题

作者:玄北 时间:2022-04-27 阅读数:311人阅读

都说“面试造火箭,工作拧螺丝”,不管你能力如何,面试的时候还是得说的面试官满意,虽然有些面试官水平也许就那样,但还是要过他这一关,所以今天单拿出前端性能优化这一块总结一下,希望对大家有用。

前端性能优化部分的面试题主要考察应试者对网站性能优化的了解。如何做好性能优化,哪些操作会引起性能优化的问题,性能优化指标是什么等,都值得应试者关注。

因为性能优化变得越来越重要,所以很多企业专门建立团队去做性能优化。

1、谈谈你对重构的理解。

网站重构是指在不改变外部行为的前提下,简化结构、添加可读性,且在网站前端保持一致的行为。也就是说,在不改变UI的情况下,对网站进行优化,在扩展的同时保持一致的UI。

对于传统的网站来说,重构通常包括以下方面。

  • 把表格( table)布局改为DV+CSS。

  • 使网站前端兼容现代浏览器。

  • 对移动平台进行优化。

  • 针对搜索引擎进行优化。

深层次的网站重构应该考虑以下方面。

  • 减少代码间的耦合

  • 让代码保持弹性。

  • 严格按规范编写代码。

  • 设计可扩展的API。

  • 代替旧的框架、语言(如VB)

  • 增强用户体验。

  • 对速度进行优化。

  • 压缩 JavaScript、CSS、 image等前端资源(通常由服务器来解决)。

  • 优化程序的性能(如数据读写)。

  • 采用CDN来加速资源加载。

  • 优化 JavaScript DOM。

  • 缓存HTTP服务器的文件。

2、如果一个页面上有大量的图片(大型电商网站),网页加载很慢,可以用哪些方法优化这些图片的加载,从而提升用户体验?

对于图片懒加载,可以为页面添加一个滚动条事件,判断图片是否在可视区域内或者即将进入可视区域,优先加载。

如果为幻灯片、相册文件等,可以使用图片预加载技术,对于当前展示图片的前一张图片和后一张图片优先下载。

如果图片为CSS图片,可以使用 CSS Sprite、SVG sprite、 Icon font、Base64等技术。

如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩得特别小的缩略图,以提高用户体验。

如果图片展示区域小于图片的真实大小,则应在服务器端根据业务需要先行进行图片压缩,图片压缩后,图片大小与展示的就一致了。

3、谈谈性能优化问题。

可以在以下层面优化性能。

缓存利用:缓存Ajax,使用CDN、外部 JavaScript和CSS文件缓存,添加 Expires头,在服务器端配置Etag,减少DNS查找等。

请求数量:合并样式和脚本,使用CSS图片精灵,初始首屏之外的图片资源按需加载,静态资源延迟加载。

请求带宽:压缩文件,开启GZIP 。

CSS代码:避免使用CSS表达式、高级选择器、通配选择器。

JavaScript代码:用散列表来优化查找,少用全局变量,用 innerHTML代替DOM操作,减少DOM操作次数,优化 JavaScript性能,用 setTimeout避免页面失去响应,缓存DOM节点查找的结果,避免使用with(with会创建自己的作用域,增加作用域链的长度),多个变量声明合并。

HTML代码:避免图片和 iFrame等src属性为空。src属性为空,会重新加载当前页面,影响速度和效率,尽量避免在HTML标签中写 Style属性

4、移动端性能如何优化?

优化方式如下。

  • 尽量使用CSS3动画,开启硬件加速。

  • 适当使用 touch事件代替 click事件。

  • 避免使用CSS3渐变阴影效果。

  • 可以用 transform:translateZ(0) 来开启硬件加速。

  • 不滥用 Float, Float在渲染时计算量比较大,尽量少使用。

  • 不滥用Web字体,Web字体需要下载、解析、重绘当前页面,尽量少使用。

  • 合理使用requestAnimationFrame动画代替 setTimeout。

  • 合理使用CSS中的属性(CSS3 transitions、CSS3 3D transforms、 Opacity、 Canvas、 WebGL、Video)触发GPU渲染。过度使用会使手机耗电量増加。

5、如何对网站的文件进行优化?

可以进行文件合并、文件压缩使文件最小化;可以使用CDN托管文件,让用户更快速地访问;可以使用多个域名来缓存静态文件。

6、请说出几种缩短页面加载时间的方法。

具体方法如下。

(1)优化图片

(2)选择图像存储格式(比如,GIF提供的颜色较少,可用在一些对颜色要求不高的地方)

(3)优化CSS(压缩、合并CSS)

(4)在网址后加斜杠

(5)为图片标明高度和宽度(如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小。如果图片很多,浏览器需要不断地调整页面。这不但影响速度,而且影响浏览体验。当浏览器知道高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容,从而优化加载时间,提升浏览体验)。

7、哪些方法可以提升网站前端性能?

精灵图合并,减少HTTP请求;压缩HTML、CSS、JavaScript文件;使用CDN托管静态文件;使用 localstorage缓存和 mainfest应用缓存。

8、你知道哪些优化性能的方法?

具体方法如下。

(1)减少HTTP请求次数,控制CSS Sprite、JavaScript与CSS源码、图片的大小,使用网页Gzip、CDN托管、data缓存、图片服务器

(2)通过前端模板 JavaScript和数据,减少由于HTML标签导致的带宽浪费,在前端用变量保存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,把图片组合成雪碧图。

(5)开启服务器端的Gzip压缩(对文本资源非常有效)。

(6)使用CDN(对公开库共享缓存)。

(7)延长静态资源缓存时间。

(8)把CSS放在页面头部把 JavaScript代码放在页面底部(这样避免阻塞页面渲染而使页面出现长时间的空白)

10、平时你是如何对代码进行性能优化的?

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

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

11、针对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)减少重绘和回流。

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事件)中修改视图,这会导致多次渲染。

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设置 Viewport元标签, Viewport可以加速页面的渲染,如以下代码所示:

<meta name="viewport" content="width=device=width,initial-scale=1">

(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渲染.

18、如何设置DNS缓存?

在浏览器地址栏中输入URL以后,浏览器首先要查询域名( hostname)对应服务器的IP地址,一般需要耗费20~120ms的时间。

DNS查询完成之前,浏览器无法识别服务器IP,因此不下载任何数据。基于性能考虑,ISP运营商、局域网路由、操作系统、客户端(浏览器)均会有相应的DNS缓存机制。

(1)正IE缓存30min,可以通过注册表中 DnsCacheTimeout项设置。

(2) Firefox混存1 min,通过 network.dnsCacheExpiration配置。

(3)在 Chrome中通过依次单击“设置”→“选项”→“高级选项”,并勾选“用预提取DNS提高网页载入速度”选项来配置缓存时间。

19、什么时候会出现资源访问失败?

开发过程中,发现很多开发者没有设置图标,而服务器端根目录也没有存放默认的 Favicon.ico,从而导致请求404出现。通常在App的 webview里打开 Favicon.ico,不会加载这个 Favicon.ico,但是很多页面能够分享。

如果用户在浏览器中打开 Favicon.ico,就会调取失败,一般尽量保证该图标默认存在,文件尽可能小,并设置一个较长的缓存过期时间。另外,应及时清理缓存过期导致岀现请求失败的资源。

20、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的属性来自动获取数据。

21、哪些方法能提升移动端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;

先给大家总结这么多,后期有更好的再补充。

over~~~

转载请注明——本文源自【玄北博客】www.xuanbeiweb.cn

免责声明:本站部分文章、数据、图片来自互联网,

如果侵犯了你的权益请来信告知我们删除,否则不承担相应法律责任。邮箱:xuanbei@xuanbeiweb.cn

标签: 前端 干货
玄北头像

玄北

Hi~如果您正好看到这里,可以扫一扫微信二维码加我为好友,我是一个喜欢交朋友的人,我知道您也是哦~

玄北微信

发表评论:

评论记录:

暂无评论——欢迎您的点评!