浅谈Web性能优化

faster

Web性能优化是一个广泛而琐碎的话题,需要时间和经验的积累才能侃侃而谈,这里简要总结一些。

使用CDN

CDN全称Content Delivery Network,即内容分发网络。CDN的原理是尽可能的在各个地方分布机房缓存数据,这样用户便能就近访问资源,加速资源的加载。这与游戏设置多个区域服务器类似。
所以静态资源尽量使用CDN加载,而且浏览器对于单个域名有请求并行下载上限,使用不同CDN可以增加同时下载的数量,且没有了Cookie的带宽压力。

合并文件以减少请求次数

可以合并JS、CSS、图片减少文件的数量来减少发送请求的次数,节省网络请求时间,加快页面加载。

使用gzip压缩内容

gzip能够压缩任何一个文本类型的响应,包括html,xml,json。大大缩小请求返回的数据量。

调整CSS、JS文件在的位置

将css放在前面,将js放在最后。js会阻塞html的渲染。

在请求头使用Cache-Control和Etag

使用缓存能大幅度加快网页加载速度。
Cache-Control:在设置时间内使用本地缓存(资源没有更新),不用想服务器发送请求。
Etag:向服务器发送请求,服务器根据表示进行资源对比,如果不用更新则返回状态码304(Not Modified),告诉浏览器使用本地缓存。

DNS 预解析

DNS 解析也是需要时间的,可以通过预解析的方式来预先获得域名所对应的 IP。

<link rel="dns-prefetch" href="//yuchengkai.cn">

减少域名个数以减少DNS查询次数

但域名的减少则相应地会减少浏览器并行下载资源的个数,所以这是一个需要权衡的解决方案。

预加载

预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源。

<link rel="preload" href="http://example.com">

懒加载

将不关键的资源延后加载。原理是只加载可视区域内需要的内容。对于图片来说,先设置图片标签的 src 属性为一张占位图,将真实的图片资源放入一个自定义属性中,当进入自定义区域时,就将自定义属性替换为 src 属性,这样图片就会去下载资源,实现了图片懒加载。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,650评论 1 45
  • 1、尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容,这部分时间包括下载页面中的图像、样式...
    兔子不打地鼠打代码阅读 545评论 0 1
  • 相关概念 阻塞渲染 JS下载、执行时肯定会阻塞渲染例如下图中代码,对于浏览器,接收到html文档后,解析到a.js...
    LouisJ阅读 1,085评论 0 32
  • Authentic learning and why you can’t choreograph success ...
    黄一倚阅读 311评论 0 0
  • 亲爱的同学们,你喜欢写日记吗?提起写日记,你有没有感到头疼,总是觉得没什么可写呢?今天王刚老师的创意写作课...
    陕县2016赵爱丽阅读 1,033评论 0 1