前端性能优化（面试的时候使用的，只有方法，具体详细的随后添加）

最新推荐文章于 2022-10-31 21:14:20 发布
最新推荐文章于 2022-10-31 21:14:20 发布
阅读量119 收藏 1
点赞数
文章标签： 前端 面试 ViewUI
原文链接：http://www.cnblogs.com/zpfqi/p/9569521.html
版权
  1.  减少 HTTP 请求

　　　　了解HTTP请求缓存机制，合理利用缓存

  1. 减少 DNS 查询
  2. 避免重定向
  3. 缓存 Ajax 请求

　　　　页面中不会经常变化的数据可以存放到浏览器本地存储中

  1. 延迟加载
  2. 预先加载
  3. 减少 DOM 元素数量
  4. 划分内容到不同域名
  5. 尽量减少 iframe 使用
  6.  避免 404 错误

  7. 补充规则：定义字符集，并放在<head>顶部。大多数浏览器会暂停页面渲染，直到找到字符集定义。

 　　什么情况下域名重定向有用

　　

　　1、如果你想为网站更换域名，利用301重定向将原本的域名重定向至现在的域名。

　　2、如果你想删除网站中的不合理或无意义的目录，利用301重定向到网站首页。

　　3、如果你想把其他的一些闲置域名共同指向某一个在用的网站，利用301重定向就能够轻松实现。

　　4、如果你想实现网站URL的规范化，比如xxyfkj.cn和www.xxyfkj.cn的规范化，利用301重定向就可以完成。

 

更多详细性能优化方法参考下面文章

作者：minwe
原文地址：https://csspod.com/frontend-performance-best-practices/

 

转载于:https://www.cnblogs.com/zpfqi/p/9569521.html

weixin_30699443
关注
2020年面试题-前端性能优化
SiQianglove的博客
11-30 1129
1、Web前端项目性能优化 一、尽量减少前端HTTP请求 浏览器并发线程数有限，所以针对资源文件的优化，一般有： 1、 合并脚本文件和CSS文件 2、 CSS Sprites利用CSS background相关元素进行背景图绝对定位,把多个图片合成一个图片。 二、浏览器缓存 在用户浏览网站的不同页面时，很多内容是重复的，比如相同的JS、CSS、图片等。如果我们能够建议甚至强制浏览器在本地缓存这些文件，将大大降低页面产生的流量，从而降低页面载入时间。 1、添加Expires头和Cache-Control
谈谈前端性能优化-面试版
最新发布
loveX001的博客
02-27 646
当我们去面试的时候，很大概率会被面试官问这么一个问题：你有尝试过对项目做性能优化吗？或者你了解哪些性能优化的方法？听到这个问题的你可能是这样的：似曾相识但又说不清楚，往往只能零散地说出那么几点，难以做到有条理的回答。那么，本文就带你简单了解前端性能优化的几个主要方面，旨在抛砖引玉。css的解析和js的执行是互斥的（互相排斥），css解析的时候js停止执行，js执行的时候css停止解析；无论css阻塞，还是js阻塞，都不会阻塞浏览器加载外部资源（图片、视频、样式、脚本等）；
前端面试——前端性能优化的方法
qcc0716的博客
12-30 133
前端性能优化的方法 减少http请求次数：css Sprites、js、css源码压缩、图片大小控制合适；网页Gzip,cdn托管，data缓存，图片服务器 前端模板 JS+ 数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数 用innerHTML代替DOM操作，减少DOM操作次数，优化JavaScript性能 当需要设置的样式很多时设置className而不是直接操作style 少用全局变量，缓存DOM节点查找的结果。减少IO读取操作 避免
前端性能优化
weixin_34285318的博客
05-12 89
网页内容： 1、 减少HTTP请求 2、 减少DNS查询次数 3、 避免页面跳转 4、 使用延迟加载 5、 异步请求 Ajax 6、 提前加载 7、减少DOM元素数量 8、根据域名划分内容 9、 减少Iframe数量 10、 避免404 服务器： 使用CDN托管 添加Expires或Cache-Control报文 Gzip压缩传输文件 配置Etags 尽早flush输出 使用get Ajax请求...
前端页面性能优化，面试必知
shiningyn的博客
08-25 687
前端页面性能优化1、css放置在页面顶部，js文件依据需求放置。2、尽可能少的 设置 全局变量。3、尽量减少DOM 操作4、不要再标签中设置样式，最好外部引用 CSS文件。5、减少http 请求，合理设置 HTTP 缓存；（最有效的办法）6、使用浏览器缓存7、如果遇到大的文件，可以将文件放置在一个定时器中 ，利用异步操作，等其他的文件加载完成后，再加载 定时器中的文件。8、CSS Sprites9...
前端如何进行性能优化（面试题）
weixin_59519449的博客
02-07 378
前端如何进行性能优化！！！
必知必会篇-前端性能优化之加载优化
老司机的后备箱
10-31 1983
懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。使用图片懒加载就可以解决上述问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。懒加载适用于图片较多，页面较长的页面场景中。**懒加载与预加载的区别：**一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
前端vue经典面试题78道（重点详细简洁）
热门推荐
weixin_59519449的博客
03-21 7万+
1.自我介绍 2分钟，200-300个字，主旨自己基本情况，工作经历，优点，兴趣爱好，职业规划，邀约 2.vue面试题 1.v-show和v-if区别的区别： v-show通过css display控制显示和隐藏，v-if组件真正的渲染和销毁，而不是显示和隐藏，频繁切换状态使用v-show 否则v-if 2.为何v-for要用key 快速查找到节点，减少渲染次数，提升渲染性能 3.描述vue组件声明周期mm 单组件声明周期图 挂载： beforeCreate => created =
前端性能优化——从 10 多秒到 1.05 秒
ersorn
01-09 255
关于 性能优化 是个大的面，这篇文章主要涉及到 前端 的几个点，如 前端性能优化 的流程、常见技术手段、工具等。 提及 前端性能优化 ，大家应该都会想到 雅虎军规，本文会结合 雅虎军规 融入自己的了解知识，进行的总结和梳理
【前端面试题】10—21道关于性能优化的面试题
油墨香^-^的博客
06-01 3565
随着前端项目不断扩大，浏览器渲染的压力变得越来越重。配置好一点的计算机可以顺利地展现页面；配置低一些的计算机渲染页面的性能就不那么可观了。 性能优化部分的面试题主要考察应试者对网站性能优化的了解。如何做好性能优化，哪些操作会引起性能优化的问题，性能优化指标是什么等，都值得应试者关注。 因为性能优化变得越来越重要，所以很多企业专门建立团队去做性能优化。 1、谈谈你对重构的理解。 网站重构是指在不改变外部行为的前提下，简化结构、添加可读性，且在网站前端保持一致的行为。也就是说，在不改变UI的情况下，对网
前端面试—网站性能优化
qq_37012533的博客
11-29 2280
1.1 浏览器缓存 浏览器在向服务器发起请求前，会先查询本地是否有相同的文件，如果有，就会直接拉取本地缓存，缓存策略如下图：
前端面试之性能优化篇
BIGDgreen
04-06 1170
关于这个，面试官常常会问你，说说你知道的性能优化方式（我在腾讯二面的时候被问到）。 目录图片的懒加载和预加载预加载懒加载页面白屏如何排错如何减少白屏时间和首屏时间FP和FCP减少白屏时间和首屏时间的方式浏览器卸载旧页面到新页面加载完成的整个过程（window.performance.timing）总结一下性能优化方式 图片的懒加载和预加载 预加载 预加载简单来说就是将所有所需的资源提前请求加载到本...
前端面试指南性能优化篇
王二狗
08-04 1384
什么是渐进增强？渐进增强是指在 web 设计时强调可访问性、语义化 HTML 标签、外部样式表和脚本。保证所有人都能访问页面的基本内容和功能，同时为高级浏览器和高带宽用户提供更好的用户体验。核心原则如下:1.所有浏览器都必须能访问基本内容 2.所有浏览器都必须能使用基本功能 3.所有内容都包含在语义化标签中 4.通过外部CSS提供增强的布局 5.通过非侵入式、外部javascript提供增强
前端性能优化一篇搞定【面试题】
飞鱼日记的博客
09-14 734
衡量网页的性能是一个比较琐碎的事情，因为没有某一个指标或数字可以直接告诉我们网页的性能怎样。优化的目的在于让页面加载的更快，对用户操作响应更及时，为用户带来更好的用户体验，对于开发者来说优化能够减少页面请求数，能够节省资源。 简短的概括： 前端性能优化 前端性能监控 框架性能优化 正文从这里开始~~~ 一、前端性能优化 文件加载的更少 缓存，CDN （详细资料：解析Web缓存及其最佳实践） 图片优化 静态问件优化 浏览器优化 文件合并压缩等常规操作 代码执行的更少 1）节流防抖 （详.
前端面试题汇总---性能优化篇（1）
weixin_42246997的博客
03-05 1356
**如何进行网站性能优化** - content方面 - 减少HTTP请求：合并文件、CSS精灵、inline Image - 减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询 - 避免重定向：多余的中间访问 - 使Ajax可缓存 - 非必须组件延迟加载 - 未来所需组件预加载 - 减...
前端性能优化，搞定面试
超美腻的程序媛的博客
06-06 444
性能优化 串讲 问题列表 初始阶段 -> 加载优化 首页加载慢的优化 优化图片的做法 实现 Webpack 打包优化 实现 CDN 加速 运行阶段 -> 渲染优化 渲染十万条数据如何不造成卡顿 学习目标 理解前端优化中两个分类 了解导致前端性能问题的根本原因 知道一些常用的性能问题的解决方案 问题详解 初始阶段 1. 首页加载慢的优化 #####问题分析 首页加载图片过多 首页的请求量过多 首页请求的静态资源（HTML、CSS、JS、图片…）过大 结论：所有加载慢的问题最
2022前端面试-性能优化篇
weixin_43842488的博客
04-20 1368
2022前端面试-性能优化篇
web前端性能优化的一些方法
BigDaddy233333的博客
11-08 279
web前端是应用服务器处理之前的部分，前端主要包括：HTML,CSS,javascript,image等各种资源，针对不同的资源有不同的优化方式。  （2）减少DNS查找： 内容优化 (1)减少HTTP请求数:这条策略是最重要最有效的，因为一个完整的请求要经过DNS寻址， 与服务器建立连接，发送数据，等待服务器响应，接收数据这样一个消耗时间成本和资源成本的复杂的过程。 常见方法：合并...
前端性能优化面试宝典：策略与技巧
前端面试中，性能优化是必考的话题，因为其对用户体验和网站加载速度的重要性。面试官可能会询问对重构的理解，以及针对不同场景的性能优化策略。首先，关于重构，它旨在在保持用户界面(UI)不变的前提下，优化代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值