博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
web前端优化之浏览器渲染优化
阅读量:6860 次
发布时间:2019-06-26

本文共 781 字,大约阅读时间需要 2 分钟。

hot3.png

用户访问买个页面要通过请求和等待两个过程,这个瞬间大概消耗了一下几部分时间:

(1)数据在网络上传输的时间;

(2)站点服务器接受处理请求并生成回应数据的时间;

(3)浏览器在本地渲染的时间。

主要分析浏览器渲染优化

(1)减少http请求的次数,因为每个请求都要通过以上三步才能返回完全正常的数据,根据功能和数据加载流程合并相应的js,css,images 减少其请求的次数;

(2)减少带宽,压缩对应的文件去掉一些空格,注释提高相应速度;

(3)把样式表放在上面可以“显式”地提高页面的显示效率。我之所以称之为“显式”,是因为用户眼睛看到和感觉上的速度提升,实际的页面传输效率并没有得到提高。 但这么做不代表它是无意义的,在某些时候,你明明已经看到页面已经下载完毕,但却发现它的布局还在不断地变化,这是因为样式表没有进行初始化的原因。

(4)把脚本放到下面,可以减少浏览器的等待时间,将文档的显示提高的最高的优先级显示,然后再执行脚本,这样用户几乎就感觉不到等待。

(5)将JavaScript和CSS存放到外部文件中,可以有效地将js, css文档缓存到本地,当你请求同样包含以上js, css的脚本的时候,便无需重新下载,直接从缓存中载入了。此外,它还有一个很明显的优点,就是增强了可重用性,你不必在每个页面都重复地写上一大串的代码,造成资源和带宽的浪费。

(6)用data:URL scheme的方式把图片内容代码直接嵌入html代码中,这样会增大html代码的体积,改进的方式是把内嵌图片嵌入到css中(css被缓存),这样就会更好的减少http请求数而且不增大html的体积。

(7)利用GZip和缓存控制头(Cache-Control headers)

转载于:https://my.oschina.net/lifeyun/blog/138349

你可能感兴趣的文章
问题总结
查看>>
深度解析利用ES6进行Promise封装总结
查看>>
零基础的你还在纠结怎么学习Python编程吗?
查看>>
Flask在Windows环境下的部署
查看>>
力扣(LeetCode)56
查看>>
图片懒加载通俗易懂
查看>>
浅析vue2.0的diff算法
查看>>
协方差深入解读
查看>>
使用Node.js和WebHDFS REST API访问Hadoop HDFS数据
查看>>
聊聊flink Table的Over Windows
查看>>
基本排序算法
查看>>
Node常用命令备忘
查看>>
阿里云ECS上CentOS系统配置从入门到进门
查看>>
民航业智能升级,安防巨头‘大华’如何利用 AI 保障机场安全
查看>>
支持向量机分类实战
查看>>
java-基础-JNI本地栈
查看>>
中国人工智能学会通讯——增强学习是人工智能的未来 1.3 增强学习的核心技术...
查看>>
2017全球SDNFV技术大会倒计时 大会完整日程曝光!
查看>>
浪潮将在GTC17发布AI超级计算机及软件
查看>>
IBM量子计算机商用化新突破:化学模拟新算法
查看>>