• 前端开发,页面加载速度性能优化,如何提高web页面加载速度


    一个网页访问速度的快慢,  不仅看它服务器的配置,这里除去你空间主机配置很烂的情况以外,我们从网站开发方面来探讨,前端技术需要从哪些方面提高访问的速度,需要用到哪些技术手段。

    文件的加载

    图标的加载:图标尽量使用“sprite雪碧图”或者字体图标,区别就做自适应用字体图标保证缩放的高清度,如果只是Pc端就建议采用雪碧图,通过定位来设置背景图标的显示。

    样式的加载:不要使用内联样式,一般除了公用的样式通过外部引用,内部页面的建议在<head>头部通过style的来直接写入。

    图片的加载:可以通过预加载或者异步加载的形式,如果是大小比较小的时候,建议采用base64形式写入。

    js的加载:js一般都选择在页面尾部加载(建议将.js库文件地址替换成CDN的地址)。如果页面内容不是非重要的,需要seo抓取的,我们可以同ajax的异步模式来获取内容。

    按需加载:这个是网站性能优化立竿见影的一项。比如图片:<img src="伪装地址" width="360" height="250" data-src="实际地址">

    压缩,精减文件体积

    模块公用化:对应页面公用的模块需要采用公共引用,避免重复造轮子,增加不必要的内容。

    程序结构:这个需要你有一定的开发经验,如果通过更少,更精炼的代码实现相同的功能。

    文件压缩与合并:采用gulp,Grunt,uglify等方式来实现。这里使用方法不做讲解。

    GZIP压缩 :可以通过服务器动态脚本进行,也可以更简单的使用apache服务器可以在网站根目录。

    其他操作

    缓存技术:除了js,css,image浏览器默认都会有缓存外,数据可以先判断缓存是否存在,没有再去服务器请求获取,减少服务器压力的同时,也优化的页面加载。

    延迟显示:采用让用户可以更快地看见可见区域的内容,延迟加载或展现可见区域外的内容。

    cdn加速:可以让网站内容发布到最接近用户的网络“边缘”,使用户可以就近取得所需的内容,提高用户访问网站的响应速度。

    减少http请求量:如果网站收到太多的HTTP请求,它的访客就会有响应时间延迟的体验,这不仅增加了CPU使用率也增加了页面的加载时间。

    避免页面堵塞:在脚本执行中,如果过程出现中止,只能完了才会继续原先的加载,就会出现页面堵塞。因此建议避免阻塞型的JavaScript,尤其是外部脚本。

  • 相关阅读:
    关于通胀,交易手续费和加密货币的货币政策
    私有链和联盟链的机会与挑战
    耶鲁大学公开课:博弈论第九节(笔记)
    区块链匿名技术
    区块链对比数据库
    硬盘 分区 格式化 和挂载
    Nginx实战系列之功能篇----后端节点健康检查
    Nginx实战系列之功能篇----后端节点健康检查
    Nginx实战系列之功能篇----后端节点健康检查
    Nginx实战系列之功能篇----后端节点健康检查
  • 原文地址:https://www.cnblogs.com/ypppt/p/12906248.html
Copyright © 2020-2023  润新知