简单提一下前端性能优化有哪些（页面优化）；

从页面的角度出发：

1、通过文件合并，css雪碧图，使用base64等方式减少HTTP请求数，避免过多的请求造成等待的情况；

2、通过DNS缓存等机制来减少DNS的查询次数；

3、通过设置缓存策略，对常用不变的资源进行缓存；

4、通过延迟加载的方式，来减少页面首屏加载时需要请求的资源，延迟加载的资源当用户需要访问时，再去请求加载；

5、通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速递；

在服务器方面：

1、使用CDN服务，来提高用户对于资源请求时的响应速度；

2、服务器端自用Gzip、Deflate等方式对于传输的资源进行压缩，减少传输文件的体积；

3、尽可能减小cookie的大小，并且通过将静态资源分配到其他域名瞎，来避免对静态资源请求时携带不必要的cookie；

二、提高前端性能的方法

要优化提升前端性能，有以下两大方法：

①减少页面加载所需时间；

②提升用户角度的观感体验（让用户觉得页面更快）；

减少页面加载所需时间，可以从请求数量、请求并发度及网络传输时间等方面着手；提升用户观感，则主要从让页面尽快展示入手；下面一一介绍：

1、减少网络时间

浏览器从服务端获取HTML文档和资源都需要经历“DNS解析——建立连接——获取连接——断开连接”的过程；如果能减少DNS解析和文件在网络上传输的时间，性能自然能得到提升。

①使用DNS缓存技术

使用DNS缓存技术可以让用户获得更快的DNS解析时间，一般而言，由于浏览器本身就具有一定的DNS缓存机制，所以服务端的DNS缓存并不能带来太大的性能提升。

②减少需要传输的文件尺寸

在网络带宽有限的情况下，减少传输的文件尺寸可以提升很大的性能。常见的有将文件进行压缩的方法，除此之外，还有使用混淆等方法尽量减少JS文件和样式表的大小，从JS文件和

样式表中去除不需要使用的部分等，都可以起到减少需要传输文件尺寸的作用。

③加快文件传输速度

Internet网站的用户通常分布在一个较广阔的区域内，Internet本身的多层次网络结构导致从某一个节点到另一些节点之间的可用带宽和网络传输速度都比较慢；这种情况下使用CDN技术，

让用户尽可能访问到对用户节点而言更快速的服务器就可以加快文件传输速度。

国内而言，移动联通电信三大运营商之间并没有建立良好的互联互通，通常需在三个服务商所在网络中设置GDN服务器；另外，出于地域原因，建立CDN也是种常见的方法。

CDN(Content Delivery Network):内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。

2、减少发送的请求数量

在短连接情况下，每个请求都需要经过“建立连接——发送数据——断开连接”的过程，因此减少请求数量可带来显著的性能提升；即使使用持久连接方式，由于浏览器与每个服务器之间的

建立的持久连接数量是有限的，减少必须的请求也可以带来性能提升。

①利用浏览器缓存

为了充分利用浏览器缓存，需要在服务端保证每个可以被缓存的资源在被服务端返回时附带合适的expries头信息；此外，为了保证有尽可能多的内容可以被缓存，也要求网站尽可能将页面

中较少改变的部分提取出来。

△保证服务端返回资源的响应头带有Expires信息，使得资源可以被缓存；

△用引用方式引用样式表和JS脚本。如果使用内嵌的样式表和JS脚本，每次HTML文档的变化都会导致样式表和JS脚本重新加载，无法充分利用缓存；当然，在没有缓存或样式表与JS脚本

经常变动的情况下，引用方式使用样式表和JS脚本反而会导致更多的http请求；

△使用更多的URI可以被缓存。

②使用合并的图片文件

当页面包含很多个小图片文件时，可以考虑将小图片文件合并为一个大的图片文件，在页面使用CSS Sprites技术将大图片显示为分隔开的小图片，在没有缓存的情况下，将许多小图片合并为

大图片文件可以大量减少http请求数。

3、提高浏览器下载的并发度

①JS文件放在HTML文档最后

在某些浏览器上，JS文件的下载和执行会阻止其他页面资源文件的下载和执行，之道JS文件下载和执行完，其他资源文件才可以开始下载和执行，因此，将JS文件放在HTML文档最后可以保证

JS文件不会阻止任何其他元素的下载。

②使用多个域名

浏览器对服务器的连接限制是基于域名的。比如S服务器有2个域名a.com和b.com，在浏览器限制最多与同一个域名建立2个连接时，浏览器实际上可以与服务器S建立4个连接；

一般大型网站都拥有几个域名，根据文件类型（静态资源、动态资源、JS脚本等）选择合适的服务器进行部署，也是个很好的做法。

4、让页面尽早开始显示

①将样式表的引用放在HTML文档的开头（如放在<Head>标签中），这样可以使样式表在一开始就被下载下来，一旦样式表下载完成，浏览器就可以使用样式表中定义的样式开始在屏幕上

显示页面元素；另外，也避免了新样式表可能带来的屏幕显示的重绘。

②将JS的引用放在HTML文档的最后，这样JS文件的下载和执行会在所有页面都下载完成后，不会阻止其他页面元素的显示。从用户感官上说，JS文件的下载和执行时间完全不会被用户感觉到。

简单提一下前端性能优化有哪些（页面优化）；相关推荐

页面放在哪_seo页面怎么优化？seo页面优化有哪些方法？
seo页面怎么优化?seo页面优化有哪些方法?seo如何优化好页面以对搜索引擎友好?可实现的方式可多样化,效率较高的方式为找到优质网站的各类型页面模型优势,直接使用到自己的站点.假设某一个网站的首页关 ...
关于html页面优化,关于html页面优化的实例详解
1. 减少HTTP请求数. (1) 合并JS文件和CSS文件. (2) 合并框架图片及相对变动较少的图片或成一张,通过CSS背景切割来完成渲染. (3) 合理使用本地Cache来缓存JS/CSS/IM ...
zblog php 优化,Zblog单页面优化，Zblog后台地址修改
ZBLOG程序,其实这款博客程序是一款挺经典的国产博客程序了,只不过以前只有ASP版本,而且好像很长时间没有更新了,但近些年ZBLOG重磅推出PHP版本,后台风格依然是扁平化简洁风格,而且互联网科技在 ...
腾讯云前端性能优化大赛火热招募中！
腾讯云首届前端性能优化大赛即将启动,2021年11月29日至2021年12月12日,赛事正式向广大前端开发者与技术达人启动线上招募,一场首屏耗时之间的"巅峰对决"即将上演!赶紧参与 ...
前端服务器获取js文件偶尔慢_我所认识的前端性能优化
现象: 用户体验差网页太卡打不开(卡.慢) 服务器带宽流量(成本) 服务器压力从哪处理:各处的缓存地址缓存减少DNS的解析请求.预解析DNS(不是"解析DNS") TCP缓 ...
前端性能优化之WebP图片
前言前端性能涉及方方面面, 根据优化角度切入点的不同可以分为页面工程优化和代码细节优化两大方向. 页面工程优化: 从页面请求开始, 涉及网络协议. 资源配置. 浏览器性能. 缓存等: 代码细节优化: ...
【技术分享】Go 工程化-前端性能监控接入层 Layout 设计实践
作者:黎志航&张翔,腾讯监控高级工程师前言本文主要介绍腾讯云前端性能监控(RUM)在全新接入层上的 Go 工程化实践,介绍 Go 项目布局(下文称 Project Layout)的设计理 ...
外贸行业网站的seo优化推广怎么做?优化技巧详解
从事外贸行业的人员相信经常能听到,"外贸行业不行啦,不要轻易踏进外贸行业".但是据数据显示,"2021年1月至4月,我国外贸进出口.出口.进口同比分别增长28.5%.33 ...
前端性能优化：当页面渲染遇上边缘计算
简介: 当前几种常见的前端性能优化方案仍然不可避免地会存在一些缺点.本文在 ESI (Edge Side Include) 的基础上,提出了一种新的优化思路:边缘流式渲染方案(ESR),即借助 CDN ...

简单提一下前端性能优化有哪些（页面优化）；

简单提一下前端性能优化有哪些（页面优化）；相关推荐

最新文章

热门文章