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绑定等等;

详细版:

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

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

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

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

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

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

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

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

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

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。 对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。 最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

转载于:https://juejin.im/post/5bacf972e51d450e9649f1f7

前端面试被问到性能优化该肿么办!相关推荐

  1. 面试常问MySQL性能优化问题

    面试常问MySQL性能优化问题 知识综述: [1] MySQL中锁的种类: 常见的表锁和行锁,也有Metadata Lock等等,表锁是对一整张表加锁,分为读锁和写锁,因为是锁住整张表,所以会导致并发 ...

  2. 大厂前端面试都问些什么问题?入职爱奇艺年薪48万,面试经验总结

    前言 "金九银十"跳槽季,又到了面试求职的高峰期.好多小伙伴都会跳槽去找工作.如果你不跳槽,也建议把这篇文章看完,毕竟金九银十之后,就是金三银四了,总是逃不掉的? 你在面试的时候, ...

  3. java除了框架还需要什么_除了框架,前端面试还问什么

    原标题:除了框架,前端面试还问什么 现在的web前端技术的发展很快,各种新技术层出不穷.前后端分离的开发模式也让前端开发者的地位日益提升,自然有很多小伙伴慕名入了前端开发的坑,希望能在前端领域大展宏图 ...

  4. (建议收藏)前端面试必问的十六条HTTP网络知识体系

    大家好,我是若川.最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.已进行四个月了,很多小伙伴表示收获颇丰. 想学源码,极力推荐订 ...

  5. 世界顶级公司的前端面试都问些什么

    在过去的几年里,我在亚马逊和雅虎面试过许多前端工程师.在这篇文章中,我想分享一些技巧,帮助大家做好准备. 免责声明: 本文的目的并不是为你列出在前端面试中可能会被问到的问题,但是可以将其视为知识储备. ...

  6. 前端对所有文件请求添加header_【前端面试必问】浏览器缓存原理?送你满分答案...

    (本文适合所1-3年的前端阅读) 原文链接: http://blog.poetries.top/2019/01/02/browser-cache/ 一.浏览器缓存基本认识 分为强缓存和协商缓存 浏览器 ...

  7. 前端改变div排序_前端面试经常问到的问题

    CSS 1.盒模型 2.flex 3.css单位 4.css选择器 5.bfc 清除浮动 6.层叠上下文 7.常见页面布局 8.响应式布局 9.css预处理,后处理 10.css3新特性 animat ...

  8. 12~18k的前端面试会问什么?

    不论是跳槽还是涨薪,工资肯定是要往上走的,那么在这个12~18k这区间需要掌握那些可以拿到这工资呢?和在不同公司的小伙伴及些老大聊了下,总结了一下前端这个区间内的要求.可能会有小伙伴说这些全掌握了都不 ...

  9. 招聘前端面试应该问的问题

    1. 常见的框架会哪些?(目前前端框架被vue,react,angular三分天下,国内主要是vue然后是react,angular国内相对少一些,vue简单灵活更接近原始来发体验,大厂用react的 ...

最新文章

  1. 云平台已经成为发生网络攻击的重灾区
  2. linux配置临时IP和永久IP
  3. js中单竖杠 | 的作用
  4. 计算机应用技术工作项目是,论计算机应用技术在工程项目管理中的应用(原稿)...
  5. Shell脚本编程30分钟入门
  6. 用户管理实用命令(第二版)
  7. [Luogu 3835]【模板】可持久化平衡树
  8. HTML5动画软件工具编辑器 HTML5动画分类 工具推荐
  9. 本来连学计算机的都不是,怎么却读了计算机研究生
  10. 【问答语录】为什么各大公司请敏捷开发咨询顾问,都偏向项目管理,是不是偏了?没有核心技术思想,管理能解决实质问题?
  11. 国外大神一张图学会python-没有接触过编程Python难学吗?
  12. 人生真是圆的,从BASIC开始的程序人生,又回到了BASIC,难道。。。。。
  13. 一次澄清:数据分析思维五大误区
  14. 汤国安mooc实验数据_用漂亮的汤建立自己的数据集
  15. 新欢乐时光病毒程序源码分析
  16. wps怎么把ppt里的字体一起保存_WPS怎样将PPT中的文字导出为Word文档?
  17. RabbitMQ系列8 TTL 死信队列 延迟队列
  18. 2012 年国家集训队互测 Tree
  19. [Python36] 01 start
  20. 『尼罗河魅影之谜』的故事模式与推理内核

热门文章

  1. RuntimeError 之 : CUDA error: device-side assert triggered
  2. c++ 中的 cin.get()函数
  3. 如何检测ARP病毒,arp病毒怎么解决?
  4. 0x84bb0001 sqlserver_sqlserver 实现收缩数据库日志操作
  5. python列表元素替换的数据结构_Python基础学习数据结构(第2讲:列表;第2讲:列表创建、添加元素、插入元素、替换元素、删除元素、其他常用方法和列表派生),第二,主讲,追加,推导,式...
  6. 台式电脑主板插线步骤图_风味台式烤肠#夏天夜宵High起来!#
  7. 我隐藏的Excel工作表 你别想取消
  8. 使用BlazeDS实现Java和Flex通信之hello world
  9. 【题解】lugu P4095 Eden的新背包问题
  10. 一个页面是否应该全部组件化