找回密码
 加入怎通
查看: 216|回复: 0

高性能实现方案-页面优化_如何进行页面性能优化

[复制链接]
我来看看 发表于 2023-03-26 07:56:28 | 显示全部楼层 |阅读模式
( E' b2 v6 Q9 d, ?8 G$ G

资源压缩与合并目的是为了减少网络流量,让页面资源尽快传送到客户端降低对服务器的访问频率,减轻服务器的负荷压缩删除HTML、CSS、JS中不显示的字符,包括空格,制表符,换行符,注释等JS中还可通过混淆,减少JS中变量长度来降低文件大小。

" v( a; m9 L9 h3 g/ y

CSS和JS的压缩和混乱比HTML缩收益要大得多,通过CSS和JS压缩带来流量的减少,会非常明显如果有些图片比较大的情况下,可以对图片进行减肥,使图片在不失真的情况下,体积尽量的小合并图片合并,比如常用的一些ICON图标文件要合并成一个图片文件进行调用。

; t3 e0 t. l" ]: `

CSS和JS文件也可以进行合并文件合并的好处可以减少客户端对服务器的访问次数,但可能带新的问题,比如首屏渲染和缓存失效问题异步加载方式默认情况下javascript是同步加载的,后面的元素要等待javascript加载完毕后才能再次进行加载,对于一些不重要的javascript,如果放在head中会导致网页加载速度变慢。

' g, |1 K# u2 c, v5 @

async 方式async 属性是 HTML5 新增属性,需要 Chrome、FireFox、IE9+ 浏览器支持async 属性规定一旦脚本可用,则会异步执行async 属性仅适用于外部脚本如果是多个脚本,该方法不能保证脚本按顺序执行

* T) O4 L" X) o1 Y

defer 方式兼容所有浏览器defer 属性规定是否对脚本执行进行延迟,直到页面加载为止

9 x- M' ~# D1 @

如果是多个脚本,该方法可以确保所有设置了 defer 属性的脚本按顺序执行如果脚本不会改变文档的内容,可将 defer 属性加入到 script 标签中,以便加快处理文档的速度

/ k, O! P8 R* @

defer="defer">//代码区 1 L }% g" }) s6 [; X defer和async的区别defer和async的区别defer:在HTML解析完之后才会执行如果是多个,则按照加载的顺序依次执行async:在加载完之后立即执行。

) \$ r1 p: ^! ~( j; ?8 g# x

如果是多个,执行顺序和加载顺序无关页面静态化页面静态化是指把动态页面渲染为为静态HTML文件存储在服务器上用户访问时直接去静态服务器访问处理好的静态html文件这样做的好处是减少数据库查询次数,加快页面的响应速度。

1 U- q8 }+ T- R! B9 S1 |

页面静态化要注意的方面用户相关数据不能静态化,比如用户名、头像等个人信息动态变化的数据不能静态化,比如排行榜、新品推荐、分页排序数据等浏览器显示页面后,在页面中向后端发送Ajax请求获取的数据也不能静态化。

% d: J; u/ W' \0 _

浏览器缓存浏览器缓存,是网页性能优化里面静态资源优化的一大利器,也是无数web开发人员在工作过程不可避免的一大问题在产品开发的时候我们总是想办法避免缓存产生,而在产品发布之时又在想策略管理缓存提升网页的访问速度。

+ Q: D) P. j) r3 C* ^; Q0 N0 }2 A

浏览器在加载资源时,先根据这个资源的一些http header判断它是否命中强缓存强缓存如果命中,浏览器直接从自己的缓存中读取资源,不会发请求到服务器当强缓存没有命中的时候,浏览器会发送一个请求到服务器,通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存。

3 C. D8 @2 \. t/ J% ]0 ?

如果协商缓存命中,服务器会返回请求告诉客户端可以直接从缓存中加载这个资源,于是浏览器就就去缓存中加载这个资源;强缓存与协商缓存的共同点是:如果命中,都是从客户端缓存中加载资源,而不是从服务器加载资源数据;区别是:强缓存不发请求到服务器,协商缓存会发请求到服务器。

& K$ d8 u& M5 i& {

当协商缓存也没有命中的时候,浏览器直接从服务器加载资源数据CDN内容分发网络(Content Delivery Network),简单的理解也算是一种缓存机制将静态资源(例如 javascript,css,图片等等)缓存到离用户很近的相同网络运营商的CDN节点上。

I( o) _7 m# t% S+ N, l0 f* |

用户在访问时,指定用户最近的CDN节点返回数据提升用户的访问速度,节省服务器的带宽消耗,降低负载

0 h( K* ^# {- m! R* [. W

缓存刷新:提交缓存刷新请求后,CDN节点的缓存内容将会被强制过期当用户向CDN节点请求资源时,CDN会直接回源站拉取对应的资源返回给用户,并将其缓存缓存预热:提交缓存预热请求后,源站将会主动将对应的资源缓存到CDN节点。

8 T/ @8 i, b. }/ i1 r

当用户首次请求时,就能直接从CDN节点缓存中获取到最新的请求资源,无需再回源站拉取DNS预解析DNS(Domain Name System, 域名系统),是域名和IP地址相互映射的一个分布式数据库当浏览器访问一个域名的时候,需要解析一次DNS,获得对应域名的ip地址。

6 C/ d1 ]1 v+ S; O; O# x: o

在解析过程中,按照浏览器缓存、系统缓存、路由器缓存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序,逐步读取缓存,直到拿到IP地址这个过程可能在几毫秒到几秒之间  DNS预解析(DNS Prefetch),是根据浏览器定义的规则,提前解析之后可能会用到的域名,使解析结果缓存到系统缓存中,缩短DNS解析时间,来提高网站的访问速度。

1 S0 T( W) m& _ t! ?1 e. ` e

对国际化的站点优化效果比较明显。每天一个小知识,每天进步一点点!

% j8 [ N4 F9 C1 n h) ]2 O8 o! \4 P7 W # E8 W2 e4 a. K: k, D2 ~$ F! } 9 O, s' C8 e5 |, g: N: O 7 T' @" ?2 t$ |, R, H5 t7 j
回复

使用道具 举报

    您需要登录后才可以回帖 登录 | 加入怎通

    本版积分规则

    QQ|手机版|小黑屋|网站地图|真牛社区 ( 苏ICP备2023040716号-2 )

    GMT+8, 2026-4-3 22:03 , Processed in 0.047132 second(s), 23 queries , Gzip On.

    免责声明:本站信息来自互联网,本站不对其内容真实性负责,如有侵权等情况请联系420897364#qq.com(把#换成@)删除。

    Powered by Discuz! X3.5

    快速回复 返回顶部 返回列表