21道关于性能优化的面试题(附答案),前端快速开发框架

   日期:2024-12-26    作者:f72js 移动:http://ljhr2012.riyuangf.com/mobile/quote/37805.html
  • 合理使用CSS中的属性(CSS3 transitions、CSS3 3D transforms、 Opacity、 Canvas、 WebGL、Video)触发GPU渲染。过度使用会使手机耗电量増加。

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

21道关于性能优化的面试题(附答案),前端快速开发框架

可以进行文件合并、文件压缩使文件最小化;可以使用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压缩(对文本资源非常有效)。


特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号