当面试官问你如何进行性能优化时,你该这么回答(一)

背景

在开发好页面后,如何让页面更快更好的运行,是区分一个程序猿技术水平和视野的一个重要指标。所以面试时,面试官总会问你一个问题,如何进行性能优化呢?

如果你这时是头脑一片空白,或是像之前的我一样,靠死记硬背或是之前的经历,答一下压缩代码,打包代码,雪碧图,cdn,事件代理,这说明你对性能优化还是缺乏一个整体,系统的掌握,对性能优化还只是处于听说过一个方法就加上去的阶段。这样也就无从去更好的优化性能。

最近一个星期经过疯狂的面试和查询资料,我总算积累了一些经验和思考,在这个招聘的黄金时间,分享给大家,希望大家可以有一点收获。如果有收获,欢迎关注和star一下博客,github

性能优化是什么

从前端的角度来说,性能优化可以分为两个方向。从用户角度来看,一个是页面加载的很快,另一个是页面使用起来很流畅。因此,对性能优化的探索,我们可以分为页面加载时间跟页面运行效率两个方向来进行研究

从浏览器打开到页面渲染完成,花费了多少时间

是的,这个问题有点熟悉,面试官比较常问的是从浏览器打开到页面渲染完成,发生了什么事情。这个问题网上很多回答,我也不就重复的细说了。主要的过程是:

浏览器解析->查询缓存->dns查询->建立链接->服务器处理请求->服务器发送响应->客户端收到页面->解析HTML->构建渲染树->开始显示内容(白屏时间)->首屏内容加载完成(首屏时间)->用户可交互(DOMContentLoaded)->加载完成(load)

很显然,如果我们要进行加载时间的优化,我们需要从这里的每一个步骤都去思考,去总结,而避免东凑一点,西凑一点。

页面加载时间监控

有一句话说得好,If You Can't Measure It, You Can't Manage It。在对这些环节进行优化之前,我们需要知道如何监控这些环节花费了多少时间。

首先推荐一个PerformanceTiming,可以获取到很多页面加载相关的数据。 比较常用的有

DNS解析时间: domainLookupEnd - domainLookupStart
TCP建立连接时间: connectEnd - connectStart
白屏时间: responseStart - navigationStart
dom渲染完成时间: domContentLoadedEventEnd - navigationStart
页面onload时间: loadEventEnd - navigationStart

如果不使用该API,可以以服务器渲染返回的时间,或是SPA路由跳转离开的时间为起点,domContentLoaded,load等事件为结束点进行记录。或是直接上google analytics。方法很多,就不细说了。

服务器部分优化要点

后端部分可以对缓存,dns查询时间,链接时间,处理请求时间,响应时间等进行优化。

缓存就不细说了。

dns查询时间可以使用httpdns或是dns预加载,域名收敛等手段优化。我还写了篇介绍DNS和CDN的文章

建立连接的重点是长连接和链接复用,keep-alive,long-polling,http-straming,websocket或是自己写过别的协议,更好的是直接上http2。为了优化链接的环节,前端这里还需要对资源使用cdn,雪碧图,代码合并等手段。

服务器处理请求这里可以优化的点也不少,值得注意的就是移动端访问PC端页面需要跳转到移动端页面时,要再服务器端使用302跳转,不要在前端进行跳转。还有就是启用hsts,要求浏览器在之后的访问使用https,减少无谓的http跳转https,同时还可以防止ssl剥离攻击,提升安全性。

服务器发送响应环节,可以使用Transfer-Encoding=chunked,多次返回响应,具体操作查询bigpipe。还有就是减小cookie的体积等等。

前端部分优化要点

前端部分可以对白屏时间,首屏事件,可交换时间,加载完成时间进行优化。

-未完,待续-

博客文章链接web性能优化(一),github,欢迎star和follow,谢谢!

有时间的同学也可以看下我的文章大厂前端面试考什么? ,应该也有帮助

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367273.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

二叉搜索时与双向链表python_JZ26-二叉搜索树与双向链表

1、中序遍历,当前结点,以及左侧排好序的双向链表,再调整当前结点的指针指向最前结点/* struct TreeNode {int val;struct TreeNode *left;struct TreeNode *right;TreeNode(int x) :val(x), left(NULL), right(NULL) {} };*/ class Solution …

dva使用心得

组件在异步数据到来前已经完成初始化&#xff0c;是导致constructor中无法取到所需数据的原因。所以最直接的方法&#xff0c;就是修改组件创建的时间 //把原来的组件内部控制显示/* <ComponentName show{modelName.show}/> *///更改为状态直接控制组件是否存在{ modelN…

html右缩进怎么设置,WPS中怎么设置右缩进两个字符?

回答&#xff1a;打开我们的Word文档&#xff0c;调整好我们的文字内容&#xff0c;然后全选我们的文字内容&#xff0c;注意要分段时按下键盘上的回车键另起一行。请点击输入图片描述接着&#xff0c;我们点击顶部菜单栏的“开始”菜单&#xff0c;在开始菜单下面的子菜单中找…

VS2013专业版+QT5.6.3+qt-vs-addin-1.2.5环境搭建

一、工具资料&#xff1a; 1.vs2013专业版地址&#xff1a;http://download.csdn.net/download/u010368556/10238145 2.qt各版本地址&#xff1a;http://download.qt.io/archive/qt/ 3.qt-vs插件地址&#xff1a;http://download.qt.io/archive/vsaddin/ 二、环境搭建过程&…

不到50行代码实现一个能对请求并发数做限制的通用RequestDecorator

使用场景 在开发中&#xff0c;我们可能会遇到一些对异步请求数做并发量限制的场景&#xff0c;比如说微信小程序的request并发最多为5个&#xff0c;又或者我们需要做一些批量处理的工作&#xff0c;可是我们又不想同时对服务器发出太多请求&#xff08;可能会对服务器造成比…

使用ActiveMQ和HornetQ通过WebSocket通过STOMP轻松进行消息传递

消息传递是用于构建不同级别的分布式软件系统的极其强大的工具。 通常&#xff0c;至少在Java生态系统中&#xff0c;客户端&#xff08;前端&#xff09;从不直接与消息代理&#xff08;或交换&#xff09;进行交互&#xff0c;而是通过调用服务器端&#xff08;后端&#xff…

yum 安装mysql的位置_Yum安装MySQL以及相关目录路径和修改目录

有些时候,为了方便,有些同学喜欢通过yum的方式安装MySQL,没有设置统一的文件目录以及软件目录,那么就会为后续的维护工作带来很大的麻烦&#xff01;下面就简单介绍一下yum安装MySQL的步骤以及这类安装下的相关目录路径,最后简单介绍下如何更改文件目录&#xff01;YUM安装MySQ…

【laravel】【转发】laravel 导入导出excel文档

1、简介 Laravel Excel 在 Laravel 5 中集成 PHPOffice 套件中的 PHPExcel &#xff0c;从而方便我们以优雅的、富有表现力的代码实现Excel/CSV文件的导入和 导出 。 该项目的GitHub地址是&#xff1a; https://github.com/Maatwebsite/Laravel-Excel 。 本文我们将在Laravel中…

javaScript--DOM

一、JavaScript JavaScript这门语言由 DOM、BOM、ECMAScript 组成。 DOM&#xff1a;document object model 文档对象模型。体现在代码中就是 document 对象。 BOM&#xff1a;browser object model 浏览器对象模型。体现在代码中就是window对象。 ECMA&#xff1a;核心语法。包…

计算机原理及应用课程,课程介绍

《计算机原理及应用》课程的计划学时为70学时&#xff0c;其中课堂授课为58学时&#xff0c;课程实验为12学时。另外&#xff0c;还设置了2周课程综合性实验。三、教学内容(一)理论教学《计算机原理及应用》的课程内容共分为9部分&#xff0c;其具体内容、知识点和课时分配如下…

你真的了解css像素嘛?

在日常开发中&#xff0c;px一定是大家接触过最多的css单位&#xff0c;但是你真的了解px嘛&#xff1f;1px在屏幕中到底是多大呢&#xff1f;另外不知道大家有没有过下面这些疑惑: 为什么一个元素在pc上和移动端的物理尺寸不一样&#xff0c;但是两者的视觉效果上却差不多呢&…

Apache Camel 2.12 –支持后退,以减少较积极的轮询路线

这是另一篇博客文章&#xff0c;介绍了下一个Apache Camel 2.12版本中即将进行的改进和新功能。 在上一个博客中&#xff0c;我谈到了路由直接支持的cron表达式 。 这篇博客文章与之相关&#xff0c;因为我们对轮询路由具有另一个新功能&#xff08;使用计划的轮询使用者&…

django框架概述

------------------MVC与MVT框架------------------- 1、MVCMVC框架的核心思想是&#xff1a;解耦。降低各功能模块之间的耦合性&#xff0c;方便将来变化时&#xff0c;更容易重构代码&#xff0c;最大程度上实现代码的重用。m表示model&#xff0c;重要用于对数据层的封装&am…

小鬼难缠--python小bug备忘

今天编译pyhon做人脸识别&#xff0c;遇到几个问题&#xff0c;做个记录吧。 编译报错&#xff1a; File "harrClassifier.py", line 17, in <module> flagscv2.CV_HAAR_SCALE_IMAGEAttributeError: module object has no attribute CV_HAAR_SCALE_IMAGE 定位根…

mysql for mac中文_mysql for Mac 下创建数据表中文显示为?的解决方法

在我的绝版Mac mini下安装了mysql 5.7版本&#xff0c;实例中&#xff0c;在通过load data 导入数据时发现表中的中文显示为 &#xff1f;通过百度&#xff0c;发现多个版本的解决方法&#xff0c;将其中一个成功解决的方法贴上来&#xff1a;大多方法都是这样&#xff1a;需要…

计算机科学计算方面分为,计算机方面的专业分为哪些类?【资讯与计算科学】和【电脑科学与技术专业】有什么不同?...

计算机方面的专业分为哪些类&#xff1f;【资讯与计算科学】和【电脑科学与技术专业】有什么不同&#xff1f;以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;计算机方面的专业分为哪些类&am…

Java异常处理教程(包含示例和最佳实践)

异常是可能在程序执行期间发生的错误事件&#xff0c;它会破坏其正常流程。 Java提供了一种健壮且面向对象的方式来处理异常情况&#xff0c;称为Java异常处理 。 我们将在本教程中研究以下主题。 Java异常处理概述 异常处理关键字 异常层次 有用的异常方法 Java 7自动资源…

GMTC 大前端时代前端监控的最佳实践

本文来自阿里云前端监控团队&#xff0c;转载请注明出处本文为2018年6月21日&#xff0c;在北京举办的GMTC(全球大前端技术大会)&#xff0c;下午性能与监控专场&#xff0c;由阿里云前端监控团队前端技术专家彭伟春带来的演讲稿&#xff0c;现场反馈效果非常好&#xff0c;地上…

mysql有子查询么_sql-带有子查询的mysql更新查询

谢谢&#xff0c;我不知道使用INNER JOIN进行更新。在原始查询中&#xff0c;错误是要命名子查询&#xff0c;该子查询必须返回一个值&#xff0c;因此不能使用别名。UPDATE CompetitionSET Competition.NumberOfTeams (SELECT count(*) -- no column aliasFROM PicksPointsWHE…

『性能测试』文章大汇总

为了方便阅读&#xff0c;我重新整理本文&#xff0c;将包含本博客所有与性能测试有关的内容。 ------------------------------------------- 近两年市面上的性能测试书籍很多了&#xff0c;但大部分书都在讲loadrunner的操作技巧项目与项目实践。我不认为有什么问题&#xff…