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

文件的加载

图标的加载:图标尽量使用“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，尤其是外部脚本。

前端开发，页面加载速度性能优化，如何提高web页面加载速度的更多相关文章

  1. 前端性能优化：细说JavaScript的加载与执行

    本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐心付出一定会 ...

  2. 性能优化-css，js的加载与执行

    前端性能优化 css,js的加载与执行 javascript是单线程的 一个网站在浏览器是如何进行渲染的呢? html页面加载渲染的过程 html渲染过程的一些特点 顺序执行,并发加载 词法分析 并发 ...

  3. 一步一步实现listview加载的性能优化

    listview加载的核心是其adapter,本文针对listview加载的性能优化就是对adpter的优化,总共分四个层次: 0.最原始的加载 1.利用convertView 2.利用ViewHol ...

  4. MyEclipse6.5的速度性能优化大提速(转)

    MyEclipse是Eclipse的插件,也是一款功能强大的J2EE集成开发环境,支持代码编写.配置.测试以及除错.现在看一下MyEclipse6.5版本的速度性能优化大提速.优化MyEclipse6 ...

  5. 用Netty开发中间件：高并发性能优化

    用Netty开发中间件:高并发性能优化 最近在写一个后台中间件的原型,主要是做消息的分发和透传.因为要用Java实现,所以网络通信框架的第一选择当然就是Netty了,使用的是Netty 4版本.Net ...

  6. 用Netty开发中间件：高并发性能优化(转)

    用Netty开发中间件:高并发性能优化 最近在写一个后台中间件的原型,主要是做消息的分发和透传.因为要用Java实现,所以网络通信框架的第一选择当然就是Netty了,使用的是Netty 4版本.Net ...

  7. Java 性能优化手册 — 提高 Java 代码性能的各种技巧

    转载: Java 性能优化手册 - 提高 Java 代码性能的各种技巧 Java 6,7,8 中的 String.intern - 字符串池 这篇文章将要讨论 Java 6 中是如何实现 String ...

  8. [MySQL性能优化系列]提高缓存命中率

    1. 背景 通常情况下,能用一条sql语句完成的查询,我们尽量不用多次查询完成.因为,查询次数越多,通信开销越大.但是,分多次查询,有可能提高缓存命中率.到底使用一个复合查询还是多个独立查询,需要根据 ...

  9. Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

随机推荐

  1. Java实现第八届蓝桥杯分巧克力

    分巧克力 题目描述 儿童节那天有K位小朋友到小明家做客.小明拿出了珍藏的巧克力招待小朋友们. 小明一共有N块巧克力,其中第i块是Hi x Wi的方格组成的长方形. 为了公平起见,小明需要从这 N 块巧 ...

  2. Linux 终止进程

    kill命令 kill -l,查看可用的进程号 支持64种,常用的三种,1代表重启,9代表强制终止,15代表正常终止 kill -1 进程ID号,重启进程 killall -9 进程名,杀死对应的全部 ...

  3. Fiddler工具学习使用总结

    1.初识fiddler: 作用:截获http/HTTPS请求,查看截获的请求内容,伪造客户端请求和服务器响应,测试网站性能,解密https的web会话,提供插件. 工作环境:支持素有操作系统和所有浏览 ...

  4. 容器技术之Dockerfile（三）

    前面我们聊到了dockerfile的 FROM.COPY .ADD.LABAL.MAINTAINER.ENV.ARG.WORKDIR.VOLUME.EXPOSE.RUN.CMD.ENTRYPOINT指 ...

  5. Java编程技术之浅析JVM内存

    JVM JVM->Java Virtual Machine:Java虚拟机,是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的. 基本认知: ...

  6. css3中的skew(skewX,skewY)用法

    这是html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  7. 实验四 Linux系统C语言开发环境学习

    项目 内容 这个作业属于哪个课程 Linux系统与应用 这个作业的要求在哪里 作业要求链接 学号-姓名 17041428-朱槐健 作业学习目标 1.Linux系统下C语言开发环境搭建 2.学习Linu ...

  8. js原型链、继承、this指向等老生常谈却依然不熟的知识点——记录解析

    开始记录学习过程—— 很详细的解析过程——https://juejin.im/post/5c72a1766fb9a049ea3993e6 借鉴阅读——https://github.com/KieSun ...

  9. Nice Jquery Validator 内置属性

    required - 必填 适用于 input.textarea.select 输入框.(checkbox 与 radio 请使用 checked 规则)字段必填,则值不能为空.字段非必填,则值为空的 ...

  10. 别人开发三年30k，而我才12K，看完他面试前狂刷的面试题，我惊了

    朋友做Java开发三年多的时间了,在老东家勤勤恳恳工作了三年多,工资也就是从刚开始的8K涨到了12K,天天给我吐槽他的工资低.2019年中下旬开始就一直在各种地方找资源,刷面试题,想要“骑驴找马”,所 ...