前端工程师面试题(性能优化)

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介:

1. 性能优化1

1.1 页面重构怎么操作?

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

对于传统的网站来说重构通常是:

表格(table)布局改为DIV+CSS
使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
对于移动平台的优化
针对于SEO进行优化
深层次的网站重构应该考虑的方面

减少代码间的耦合
让代码保持弹性
严格按规范编写代码
设计可扩展的API
代替旧有的框架、语言(如VB)
增强用户体验
通常来说对于速度的优化也包含在重构中

压缩JS、CSS、image等前端资源(通常是由服务器来解决)
程序的性能优化(如数据读写)
采用CDN来加速资源加载
对于JS DOM的优化
HTTP服务器的文件缓存

1.2 什么叫优雅降级和渐进增强?

优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会针对旧版本的IE进行降级处理了,使之在旧式浏览器上以某种形式降级体验却不至于完全不能用。
如:border-shadow

渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新版本浏览器才支持的功能,向页面增加不影响基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。
如:默认使用flash上传,但如果浏览器支持 HTML5 的文件上传功能,则使用HTML5实现更好的体验;

1.3 前端性能优化的方法?

(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指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分,换语言是无法“优化”的。

1.4 页面从输入 URL 到页面加载显示完成

注:这题胜在区分度高,知识点覆盖广,再不懂的人,也能答出几句, 而高手可以根据自己擅长的领域自由发挥,从URL规范、HTTP协议、DNS、CDN、数据库查询、 到浏览器流式解析、CSS规则构建、layout、paint、onload/domready、JS执行、JS API绑定等等;

详细版:

  1. 浏览器会开启一个线程来处理这个请求,对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
  2. 调用浏览器内核中的对应方法,比如 WebView 中的 loadUrl 方法;
  3. 通过DNS解析获取网址的IP地址,设置 UA 等信息发出第二个GET请求;
  4. 进行HTTP协议会话,客户端发送报头(请求报头);
  5. 进入到web服务器上的 Web Server,如 Apache、Tomcat、Node.JS 等服务器;
  6. 进入部署好的后端应用,如 PHP、Java、JavaScript、Python 等,找到对应的请求处理;
  7. 处理结束回馈报头,此处如果浏览器访问过,缓存上有对应资源,会与服务器最后修改时间对比,一致则返回304;
  8. 浏览器开始下载html文档(响应报头,状态码200),同时使用缓存;
  9. 文档树建立,根据标记请求所需指定MIME类型的文件(比如css、js),同时设置了cookie;
  10. 页面开始渲染DOM,JS根据DOM API操作DOM,执行事件绑定等,页面显示完成。

简洁版:

  1. 浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求;
  2. 服务器交给后台处理完成后返回数据,浏览器接收文件(HTML、JS、CSS、图象等);
  3. 浏览器对加载到的资源(HTML、JS、CSS等)进行语法解析,建立相应的内部数据结构(如HTML的DOM);
  4. 载入解析到的资源文件,渲染页面,完成。

1.5 平时如何管理你的项目?

先期团队必须确定好全局样式(globe.css),编码模式(utf-8) 等;

编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行);

标注样式编写人,各模块都及时标注(标注关键样式调用的地方);

页面进行标注(例如 页面 模块 开始和结束);

CSS跟HTML 分文件夹并行存放,命名都得统一(例如style.css);

JS 分文件夹存放 命名以该JS功能为准的英文翻译。

图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理


原文发布时间:2018-06-27

本文来源掘金如需转载请紧急联系作者

相关文章
|
1月前
|
前端开发 JavaScript 开发者
前端开发中的组件化设计与性能优化
【10月更文挑战第7天】前端开发中的组件化设计与性能优化
39 0
|
5天前
|
SQL 缓存 监控
大厂面试高频:4 大性能优化策略(数据库、SQL、JVM等)
本文详细解析了数据库、缓存、异步处理和Web性能优化四大策略,系统性能优化必知必备,大厂面试高频。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
大厂面试高频:4 大性能优化策略(数据库、SQL、JVM等)
|
19天前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
53 1
|
1月前
|
存储 缓存 网络协议
5个Android性能优化相关的深度面试题
本文涵盖五个Android面试题及其解答,包括优化应用启动速度、内存泄漏的检测与解决、UI渲染性能优化、减少内存抖动和内存溢出、优化网络请求性能。每个问题都提供了详细的解答和示例代码。
26 2
|
2月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
2月前
|
存储 缓存 前端开发
灵魂拷问-前端到底能做些什么?--性能优化篇
作者最近在尝试对负责的平台进行性能优化,本文整理了些前端性能优化的一些常见策略。
|
2月前
|
前端开发
|
30天前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
1月前
|
缓存 前端开发 JavaScript
探索现代前端开发的性能优化策略
【10月更文挑战第11天】探索现代前端开发的性能优化策略
19 0
|
3月前
|
缓存 前端开发 JavaScript
Rails应用慢如蜗牛?揭开数据库到前端的全方位性能优化秘籍,从此告别龟速加载!
【8月更文挑战第31天】本文探讨了Ruby on Rails应用的性能优化方法,涵盖数据库查询与前端渲染。通过具体代码示例,介绍了如何使用`includes`避免N+1查询问题,利用缓存机制提高效率,以及通过合并和压缩CSS及JavaScript文件优化前端渲染。这些技巧有助于全面提升应用性能和用户体验。
48 1