从一道经典的前端面试题---谈前端性能优化

简介: 从一道经典的前端面试题---谈前端性能优化

程序员面试题库分享

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

2、前端技术导航大全      推荐:★★★★★

地址:前端技术导航大全

3、开发者颜色值转换工具   推荐:★★★★★

地址 :开发者颜色值转换工具

从一道经典的前端面试题---谈前端性能优化

在浏览器中输入一个网址后,发生了什么?

这是一道非常经典的面试题,包含前端大部分的基础知识点。

  1. 第一步 浏览器通过DNS查找该域名的 IP 地址
  2. 第二步 浏览器根据解析得到的IP地址向 web 服务器发送一个 HTTP 请求
  3. 第三步 服务器收到请求并进行处理
  4. 第四步 服务器返回一个响应
  5. 第五步 浏览器对该响应进行解码,解析html为dom、解析css 为css-tree、dom+ css 生成render-tree 绘图
  6. 第六步 页面显示完成后,浏览器发送异步请求。
  7. 第七步 整个过程结束之后,浏览器关闭TCP连接。

我们先总结一下这些步骤中,有哪些性能优化的点:

  1. dns预加载
  2. 减少加载的文件

一、DNS 预解析

DNS 解析也是需要时间的,可以通过预解析的方式来预先获得域名所对应的 IP。这样就能节省第一步通过域名查找ip的时间。

<link rel="dns-prefetch" href="//www.zhihu.com">

二、减少加载文件,浏览器缓存

通常浏览器缓存策略分为两种:强缓存和协商缓存,并且缓存策略都是通过设置 HTTP Header 来实现的

强缓存

强缓存不需要请求接口,每次发起http请求资源时,直接用浏览器的缓存

强缓存可以通过设置两种 HTTP Header 实现:ExpiresCache-Control 。强缓存表示在缓存期间不需要请求,state code200

协商缓存

协商缓存需要请求接口,询问后端缓存的文件是否更改,更改了就只能重新请求,没有改变就直接用缓存

  • 如果缓存过期了,就需要发起请求验证资源是否有更新。协商缓存可以通过设置两种 HTTP Header 实现:Last-ModifiedETag
  • 当浏览器发起请求验证资源时,如果资源没有做改变,那么服务端就会返回 304 状态码,并且更新浏览器缓存有效期。

从index.js的加载来看待这个问题

1.首次加载,http请求,server正常返回

  • 返回响应头加上强缓存的说明
  • expires:web 11 Aug 2019 20:50:00 (过期时间)
  • cache-control : max-age=3000000 (时间戳,http1.1 精准,优先级高)
  • 两个header都是后端告诉浏览器,这个文件多少时间内不过期
  • 浏览器接受到上面两个header 就会把文件保存起来

2.1个小时内再请求这个文件

  • 浏览器识别到强缓存命中,请求不发出,直接用本地的缓存文件,状态码是200 from cache
  1. 2个小时后,再次请求这个文件,强缓存失效,使用协商缓存
  • 浏览器不会直接发出请求,而是问一下后端,header带上请求头
  • if-modified-since:日期 , 询问后端这个日期之后,这个文件有没有修改过
  • 后端告诉没有修改过,使用缓存 状态码是304 not modified
  • 优先级更高的是etag(文件的指纹),内容不变指纹不变

4.如果后端告诉你改过了,就只能重新加载了

如何高效利用缓存

1.缓存时间过长

  • 发布上线了,用户端还用缓存,会有bug

2.缓存时间过短

  • 重复加载文件太多,浪费带宽

解决:

1.模板(html)不能有缓存

强缓是针对静态资源使用,动态资源需要慎用。除了服务端页面可以看作动态资源外,那些引用静态资源的html也可以看作是动态资源,如果这种html也被缓存,当这些html更新之后,可能就没有机制能够通知浏览器这些html有更新,尤其是前后端分离的应用里,页面都是纯html页面,每个访问地址可能都是直接访问html页面,这些页面通常不加强缓存,以保证浏览器访问这些页面时始终请求服务器最新的资源

2.文件名+hash值

利用webpack打包,当文件内容有改变的时候。生成文件名的hash值也会改变,这样文件名就变了,浏览自然会重新请求,而不是用缓存中的文件。

当文件内容没有改变的时,hash值不变、文件名不变,浏览使用缓存的文件,不发送请求

三、减少加载的文件,图片懒加载

什么是图片懒加载

当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),当图片出现在浏览器的可视区域内时,才设置图片真正的路径,让图片显示出来。这就是图片懒加载。

如何加载图片

    <div class="img-container">
        <img  data-src="./01.jpeg" alt="">
    </div>
    <div class="img-container">
        <img  data-src="./02.jpg" alt="">
    </div>
    <div class="img-container">
        <img  data-src="./03.jpeg" alt="">
    </div>

只需要把data-src中的地址放到src的里面就好了

imgs[i].src = imgs[i].getAttribute('data-src')

如何判断一个元素出现在视野中?

元素相对顶点的距离(文字) <= 窗口高度 + 滚动的距离

附完整代码

<script>
    const imgs = document.querySelectorAll('img')
    // 获取可视区域高度
    const viewHeight = window.innerHeight || window.documentElement.clientHeight
    console.log(viewHeight,imgs)
    function loadImg(){
      for(let i=0; i<imgs.length;i++){
        console.log(imgs[i].getBoundingClientRect().top)
        let dis = viewHeight - imgs[i].getBoundingClientRect().top
        if(dis>0){
          imgs[i].src = imgs[i].getAttribute('data-src')
        }
      }
    }
    loadImg()
    window.addEventListener('scroll',loadImg)
  </script>

后记:

这道题目中还涉及到很多知识点,像TCP/UDP、浏览的渲染过程、重绘和回流(重排)等,如果大家感兴趣,下次再和大家谈谈这些内容。

程序员面试题库分享

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

2、前端技术导航大全      推荐:★★★★★

地址:前端技术导航大全

3、开发者颜色值转换工具   推荐:★★★★★

地址 :开发者颜色值转换工具

相关文章
|
1月前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
138 5
|
4月前
|
前端开发 JavaScript 索引
前端性能优化:虚拟滚动技术原理与实战
前端性能优化:虚拟滚动技术原理与实战
578 80
|
4月前
|
缓存 监控 前端开发
前端性能优化:现代框架的关键策略
前端性能优化:现代框架的关键策略
237 74
|
4月前
|
缓存 前端开发 JavaScript
前端性能优化:打造流畅的用户体验
前端性能优化:打造流畅的用户体验
|
8月前
|
缓存 前端开发 UED
如何优化前端性能以提高加载速度
前端性能优化对提升网站加载速度至关重要,直接影响用户体验、SEO排名和转化率。本文介绍了优化前端加载速度的关键技巧,包括最小化HTTP请求、使用CDN、优化图片、利用浏览器缓存、压缩文件和实现懒加载。通过这些方法,可以显著减少页面加载时间,提高网站的整体性能和用户满意度。
|
9月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
5月前
|
存储 SQL 关系型数据库
京东面试:mysql深度分页 严重影响性能?根本原因是什么?如何优化?
京东面试:mysql深度分页 严重影响性能?根本原因是什么?如何优化?
京东面试:mysql深度分页 严重影响性能?根本原因是什么?如何优化?
|
7月前
|
机器学习/深度学习 人工智能 JSON
Resume Matcher:增加面试机会!开源AI简历优化工具,一键解析简历和职位描述并优化
Resume Matcher 是一款开源AI简历优化工具,通过解析简历和职位描述,提取关键词并计算文本相似性,帮助求职者优化简历内容,提升通过自动化筛选系统(ATS)的概率,增加面试机会。
715 18
Resume Matcher:增加面试机会!开源AI简历优化工具,一键解析简历和职位描述并优化
|
6月前
|
人工智能 算法 数据库
美团面试:LLM大模型存在哪些问题?RAG 优化有哪些方法?_
美团面试:LLM大模型存在哪些问题?RAG 优化有哪些方法?_
|
7月前
|
人工智能 JavaScript 前端开发
Vue 性能革命:揭秘前端优化的终极技巧;Vue优化技巧,解决Vue项目卡顿问题
Vue在处理少量数据和有限dom的情况下技术已经非常成熟了,但现在随着AI时代的到来,海量数据场景会越来越多,Vue优化技巧也是必备技能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

热门文章

最新文章

  • 1
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 2
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 3
    实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数