精华内容
下载资源
问答
  • 网页打开速度影响用户体验的首要因素。 硬件因素包括:服务器端、客户端和网速。服务器端主要包括:服务器的地 域,是否双线,处理能力等等;客户端的因素主要包括:用户的硬件配置、用户使用的浏览器、是否有...
    网页打开速度是影响用户体验的首要因素。
    

    硬件因素包括:服务器端、客户端和网速。服务器端主要包括:服务器的地 域,是否双线,处理能力等等;客户端的因素主要包括:用户的硬件配置、用户使用的浏览器、是否有恶意插件病毒等等;网速当然也是一个制约网页打开速度的重 要因素。

    硬件因素的改进有其先天的障碍,比如:我们不能强制用户使用多大的带 宽,或者要求用户使用某种浏览器等。相对于网站的所有者或者开发者来说,可以选择双线、高处理能力、近地域的服务器。

    软件因素是指:制作网站采用的不同技术。主要包括:

    第一:页面是动态还是静态。动态页面.jsp或者.asp等等ASP、PHP、JSP等程序实现了网页信息的动态交互,运行起来的确非 常方便,因为它们的数据交互性好,能很方便地存取、更改数据库的内容,使网站“动”起 来,如:论坛、留言板等。但是这类程序必须先由服务器执行处理后,生成HTML页面,然后再“送”往 客户端浏览,这就不得不耗费一定的服务器资源。如果在虚拟主机上过多地使用这类程序,网页显示速度肯定会慢。

    第二:页面的HTML代 码量。浏览网页实际上是将虚拟主机中的网页内容下载到本地硬盘,再用浏览器解释查看的。下载网页的快慢在显示速度上占了很大比 重,所以,网页本身所占的空间越小,那么浏览速度就会越快。

    第三:对图片的处理。包括图片采用的格式、图片的数量、图片的大小等。根 据图片的清晰度要求、大小透明度等等分别设置不同的图片格式如jpg、gif、png,可以适当的减少图片的大小;图片的大小和代码量 一样,因为loading量 的不同会影响网页的打开速度;图片的数量是影响页面打开速度关键因素,首先:图片数量多了,需要的的loading量必然增大;其次:最重要的是,浏览器每次下载图片都要去服务器提 交一次请求,服务器响应后找到相应的图片地址,才会把图片下载到本地硬盘。图片数量越多,需要服务器请求的链接也就越多,会给服务器造成较大的压力,速度 会明显变慢。

    第四:CSS/JS的 代码量和引入方式。CSS(控制页面的显 示,JS用于制作页面的动态 效果,同样需要用户下载到机器上后再被浏览器解析执行。CSS/JS代码量也会影响网页的打开速度。而一直被大家忽视的引入方式,也是影响网速重要原因,引入方式的不同关系到解析代码中的无用代码比 例,无用代码引入越多,解析越慢。不同的引入方式也关系到整站的代码量、后期优化工作量等。

    第五:HTML制作采用的技术。用Table布局和用Div布局的同一页面,使用Table布局的页面比使用Div布局的页面打开速度要慢很多,并且用户体验差。原因是,Table布局的页面只有在整个Table里的内容都loading完成时才一下显示出来,而用Div布局的页面会逐块显示。因此用Div布局的同一页面能留住更多的用户。

    解决方案:

    1.采用背景图合并。背景图合并技术是一门DIV+CSS的熟练使用和PS合图相结合的技术。通过精确到1px的CSS设置,使用PS合成背景图片,特别是小图合并,在完全不改变原来效果的情况下,大量减少页面需loading图片数量,从而大幅降低了服务器的压力,提高页面的打开速度。

    2.外部引入CSS样式。采用这种方法,最能体现DIV+CSS中的内容与显示分离的思想。我们可以通过一个CSS文件控制多个不同的页面,对于整站而言,减少了大量的代码;同时,修改一个CSS文件就可以改变多个页面的显示效果,因此这种方式也是最易 改版维护的方法;最后,因为直接写在页面的样式控制CSS最少, 所以这种方法也是页面代码最简洁的方法,有利于前后端人员之间的配合。

    3.用div+css布局,不要用table布局.

    Div+Css布局方法相对于前两种来 说已经比较普及,优势也是对比使用Table布局而言。主要有以下的特点:

    (1)大大缩减页面代码,提高页面浏览速度,缩减带宽成本;
         (2.)结构清晰,容易被搜索引擎搜索到。是 做SEO的基础技术。
         (3.)缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
         (4)强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了,有了CSS,我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题,改变字体颜色,字体样 式等等。
         (5)CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
         (6)提高易用性。使用CSS可以结构化HTML,例如:<p>标签只用来控制段落,heading标签只用来控制标题,table标签只用来表现格式化的数据等等。你可以增 加更多的用户而不需要建立独立的版本。
         (7)可以一次设计,随处发布。你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。
         (8)更好的控制页面布局。
         (9)表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,你可以减少未 来网页无效的可能。
         (10)更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的 内容,并可能给你一个较高的评价(ranking)。
         (11)Table 布局灵活性不大,你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写。
         (12)Table布局中, 垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div更能体现样式和结构相分离,结构的重构性强。
         (13)以前一些非得通过图 片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。
         (14)使页面的字体变得更 漂亮,更容易编排,使页面真正赏心悦目。
         (15)你可以轻松地控制页 面的布局 。
         (16)你可以将许多网页的风格格式同时更新,不用再一页一页 地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。

    4.根据需求的不同使用不同的图片格式。

    图片影响网页打开速度主要从三个方面:图片的数量、图片的大小、图片的颜色种类。常见格式有.jpg,.gif,.png。Png格式支持半透明,我们在需要半透明的情况下使 用,并且同时要注意ie6里 不兼容的情况。Jpg的颜色 值较多,一般是照片、广告图等较大效果较突出的图片使用的格式。Gif颜色值较少,最多支持256种颜色,一般是小图、边角、背景灯图片采用的格式。另外我们可以通过设置图片的质量来改变图片的大小,同样影响页面的打开速度。

    5.删除冗余代码。

    手写代码和用工具生成的代码又很大的不同,用工具生成的代码往往有好多的冗余无用的代码,用table布局实现同一效果 的代码量也比DIV+CSS实 现的代码量大很多。所以最好手写代码。

    6.优化精简代码。例:CSS代码精简写法:把background-color,background-position,background-image等合成一个background来设置。把padding-top,padding-right,padding-bottom,padding-left合成一个padding来使用

    7.动态效果尽量使用js而不用flash。

    8.使用对系统压力较小的算法。

    展开全文
  • web 页面加载速度优化

    千次阅读 2016-10-11 13:54:26
    一个网站的加载速度有多重要? 反正我相信之前来博主网站的人至少有 50% 在加载完成前关闭了本站。 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈。 正常来讲一个网页 4s ...

    前言

    一个网站的加载速度有多重要? 反正我相信之前来博主网站的人至少有 50% 在加载完成前关闭了本站。 为啥捏? 看图

    首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈。 正常来讲一个网页 4s 加载不完就会流失很大一部分用户,而博主的网站加载时间竟然达到了 8s 还是在电脑端,如果在移动端,加载时间会更久,体验会更差。 这样的话网站做得再难看批判者进不来不是白搭嘛,于是针对 web 页面加载速度的优化迫在眉睫。

    基于博主以前优化过其他网站,于是博主准备把这次的优化过程记录下来分享给大家借鉴。

    1. 页面分析

    先来看优化前的页面:

    加载时间 8.18s ,一共 33 个 请求,加载 1.38MB 。 可以看到对于网速较慢的浏览者光加载资源就需要 5s 以上,再加上 33 个请求切换开销,简直不能愉快的玩耍。 所以接下来的优化手段就要从加载流量和请求数量入手:

    2. 优化图片

    图片在网络流量中占有很大的比重,因此优化图片对于减少流量有着至关重要的作用。

    合并小图片:

    很多页面有很多小图标,一个一个加载就相当于一个一个请求,将这些小图片合并成一个大图片,用css 控制显示范围,这样就只需要一个请求即可加载完所有小图片,瞬间就会减少很多网络请求。

    优化图片格式:

    很多图片没有经过优化直接上传到网页中会占用很多额外的流量,比如一张屏幕大小的截图,用截图工具直接截图后的大小大概有 1MB ,此时直接上传到网页中就直接占用了 1MB 流量,但其实我们完全可以只牺牲它 40% 的质量换取缩小 10 倍的大小,网上有很多转化 web 图片的网站,当然如果你有 photoshop 的话完全可以自己导出:

    将图片在 ps 中打开,然后点击菜单栏 “文件” 菜单,选择 “储存为 web 所用格式”,出现如下对话框:

    一般情况下 jpg 图片选择品质中即可,png 格式图片选择 png8 即可,但注意有透明背景的 png 图片要选择 png24 ,否则透明背景中会出现白边,gif 图片选择 gif64 无仿色即可。

    一般经过优化的图片大小至少会有 3倍 之差,图片原大小越大优化的结果会越好。

    博主的网站最显眼的图片就是页眉上那个幽鬼的图片啦,所以就先拿它开刀,经过以上步骤优化:

    瞬间减小 4 倍,实际效果可以看看,代表着博主门面的图片经过优化后和优化前显示效果并没有明显区别,而文件大小却相差了 4 倍。

    3. 使用免费 cdn 加载第三方资源

    所有网站都会用到第三方资源,对于第三方资源,如果选择让自己的服务器提供,那么对于小型站点,本就不大的带宽相当一部分还要被公共资源占用,无形之中压缩了服务器带宽,如果把这部分资源让第三方 cdn 提供,那么对于网站加载速度会有不小的提升。

    博主选用的是 bootstrap 中文站提供的 cdn 静态库,博主看过不少国内 cdn 静态库,可以说 bootstrap 家的还是很良心的,更新及时,资源现在也很丰富,基本博主用的三方资源都能在上面找到,于是接下来就是搜索静态资源 + 替换静态资源:

     
    1. <script src="/s/js/jquery.min.js"></script>
    2. 改为
    3. <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

    这里不要写协议头,让网页自动判断使用 http 还是 https ( 关于 https 网站的部署可以看博主之前的文章: 给你的网站穿上外衣- HTTPS 免费部署指南 )

    4. 使用 cdn 储存静态资源

    一般网站 90% 的流量都用于静态资源的加载,除了用免费 cdn 加载第三方资源,还可以自己申请云空间储存自己的静态资源,进一步减小服务器的开销,让服务器只专注于提供数据或者网页渲染服务。 比如博主使用的是 X牛 ,将自己的图片什么都存在 x牛上,每个月都有免费流量,对于个人网站来说应该够用。

    5. 合并压缩 js css

    除去引用公共库,网页中还有许多自己写的 js 与 css,如果我们直接把开发环境的文件拿来用无疑很浪费流量,因此在编写好网页测试完毕后,我们应该将 css 和 js 压缩合并成一个或者几个文件,这样既减少了请求次数又减少了流量消耗,一箭双雕。 当然还有 html 压缩,不过 ms 现阶段还有一些坑,就先不用了。 说到合并压缩,第一时间播追就想到了 webpack ,前端工程化神器,简单配置一下就可以完全搞定任务:

    博主网站自己的 js 工程文件放在 /webroot/static/src/js/ 中,假如我们要将压缩合并后的文件放在 /webroot/static/dist/js/ 中:

    在 /webroot/ 下新建文件夹 webpack, 进入文件夹,新建文件 package.json:

     
    1. {
    2. "name": "RaPo3",
    3. "version": "1.0.0",
    4. "description": "",
    5. "main": "index.js",
    6. "scripts": {
    7. "test": "echo \"Error: no test specified\" && exit 1"
    8. },
    9. "author": "rapospectre",
    10. "license": "ISC",
    11. "devDependencies": {
    12. "css-loader": "^0.24.0",
    13. "style-loader": "^0.13.1",
    14. "webpack": "^1.13.2",
    15. "webpack-dev-server": "^1.15.1"
    16. }
    17. }

    保存后执行:

     
    1. npm install
    2. //或
    3. cnpm install
    4. //如果你有的话

    然后新建 webpack 配置文件 webpack.config.js:

     
    1. var webpack = require('webpack');
    2. module.exports = {
    3. entry: {
    4. base: ['../static/js/src/http.js', '../static/js/stickUp.min.js', '../static/js/src/base.js'],
    5. index: ['../static/js/src/index.js'],
    6. detail: ['../static/js/editormd.js', '../static/js/src/article.js'],
    7. know: ['../static/js/editormd.js', '../static/js/src/know.js'],
    8. list: ['../static/js/src/list.js']
    9. },
    10. output: {
    11. path: '../static/js/dist/',
    12. filename: '[name].js'
    13. },
    14. plugins: [
    15. new webpack.optimize.UglifyJsPlugin({
    16. output: {
    17. comments: false
    18. },
    19. compress: {
    20. warnings: true
    21. }
    22. }),
    23. ]
    24. }

    这里要注意的是如果你的 js 文件间的引用是传统的 html 引入后引用那么在这里合并时记得把你被引用的方法\对象等等设置为全局,比如 b.js 要引用 a.js 中的函数 c,合并前要在 a.js 中加上( 当然如果你一直用 es6/node 写 js 就不用看这里了 ):

     
    1. window.c = c;
    2. this.c = c;

    不然 c 就会被当作局部函数封装起来。

    改完后运行 webpack 提示成功后看到 dist 目录里已经输出了合并压缩好的文件,之前 12kb 的文件经过压缩合并后只有 6kb 大小,然后我们将其替换到网页中即可。

    6. 代码优化

    页面代码的优化对于页面加载速度也有不小的影响,最广为人知的:

    HTML头部的JavaScript和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,JavaScript的引入放在页面尾

    其次还有:

    1. 按需加载,把统计、分享等 js 在页面 onload 后再进行加载,可以提高访问速度;
    2. 优化 cookie ,减少 cookie 体积;
    3. 避免  的 src 为空;
    4. 尽量避免设置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能;
    5. 合理使用display属性:
         
      1. a.display:inline后不应该再使用widthheightmarginpadding以及float
      2. b.display:inline-block后不应该再使用float
      3. c.display:block后不应该再使用vertical-align
      4. d.display:table-*后不应该再使用margin或者float
    1. 不滥用Float 和 web 字体;
    2. 尽量使用CSS3动画;
    3. 使用 ajax 异步加载部分请求;

    7. HTTP2 与 gzip

    HTTP2 是以 SPDY 为基础开发的。 SPDY 系列协议由谷歌开发,于 2009 年公开。它的设计目标就是降低 50% 的页面加载时间,所以 HTTP2 在很大程度也是为了优化页面加载时间,同时 HTTP2 支持多路复用,简单说就是所有的请求都通过一个 TCP 连接并发完成。 而 gzip 大家都不陌生,就是一种压缩网页的技术,当然压缩网页进行传输的代价就是给服务器增加一些压缩的负担,当然这种牺牲是值得的。

    如何开启 HTTP2 与 gzip? 博主的网站基于 nginx + uWSGI 进行服务,因此只要在 nginx 开启 HTTP2 与 gzip 就好:

    开启 HTTP2

    nginx 1.9.5 之后才支持 HTTP2 ,而且需要配置编译参数,关于 nginx 开启 HTTP2 请直接移步博主之前的文章: nginx 配置 http2

    开启 gzip

    直接打开 nginx 配置文件, 比如博主的在 /etc/nginx/nginx.conf, 然后加上:

     
    1. server{
    2. gzip on;
    3. gzip_comp_level 6;
    4. gzip_proxied any;
    5. gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript application/x-font-woff;
    6. }

    然后重启 nginx 即可

    最后,让我们清除缓存,再次打开网站:

    总加载流量 527kb ,页面完成加载时间 1.84s,对比之前加载时间 8.18s ,1.38MB 流量,整体时间提升了 4 倍多!用手机端访问测试,简直快的飞起,不信你也来访问( 骗流量脸 )试试呀~

    最后,附上本文网站的源码以及目录结构,可以通过 commit 记录更加直观的看到优化的过程:

    https://github.com/bluedazzle/django-vue.js-blog

    欢迎来颗 star 哈哈。

    原文地址https://www.rapospectre.com/blog/web-page-loading-optimize-guide

    作者:rapospectre


    展开全文
  • Web前端性能优化——如何提高页面加载速度 前言:&nbsp; 在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最...

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

    前言: 

    在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页。也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%。网站的加载速度严重影响了用户体验,也决定了这个网站的生死存亡。

    可能有人会说:网站的性能是后端工程师的事情,与前端并无多大关系。我只能说,too young too simple。事实上,只有10%~20%的最终用户响应时间是用在从Web服务器获取HTML文档并传送到浏览器的,那剩余的时间去哪儿了?来瞄一下性能黄金法则

    只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件上。

    接下来我们将研究一下前端攻城狮如何来提高页面的加载速度。

     

    一、减少HTTP请求

    上面说到80%~90%时间花在了下载页面中的所有组件进行的HTTP请求上。因此,改善响应时间最简单的途径就是减少HTTP请求的数量。

    图片地图:

    假设导航栏上有五幅图片,点击每张图片都会进入一个链接,这样五张导航的图片在加载时会产生5个HTTP请求。然而,使用一个图片地图可以提高效率,这样就只需要一个HTTP请求。

    服务器端图片地图:将所有点击提交到同一个url,同时提交用户点击的x、y坐标,服务器端根据坐标映射响应

    客户端图片地图:直接将点击映射到操作

    复制代码
    <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
    
    <map name="planetmap" id="planetmap">
         <area shape="rect" coords="180,139,14" href ="venus.html" alt="Venus" />
         <area shape="rect" coords="129,161,10" href ="mercur.html" alt="Mercury" />
         <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
         <area shape="rect" coords="140,0,110,260" href ="star.html" alt="Sun" />
    </map>
    复制代码

    使用图片地图的缺点:指定坐标区域时,矩形或圆形比较容易指定,而其它形状手工指定比较难

    CSS Sprites

    CSS Sprites直译过来就是CSS精灵,但是这种翻译显然是不够的,其实就是通过将多个图片融合到一副图里面,然后通过CSS的一些技术布局到网页上。特别是图片特别多的网站,如果能用css sprites降低图片数量,带来的将是速度的提升。

    复制代码
    <div>
        <span id="image1" class="nav"></span>
        <span id="image2" class="nav"></span>
        <span id="image3" class="nav"></span>
        <span id="image4" class="nav"></span>
        <span id="image5" class="nav"></span>
    </div>
    复制代码
    复制代码
    .nav {
        width: 50px;
        height: 50px;
        display: inline-block;
        border: 1px solid #000;
        background-image: url('E:/1.png');
    }
    
    
    
    
    
    #image1 { background-position: 0 0; } #image2 { background-position: -95px 0; } #image3 { background-position: -185px 0; } #image4 { background-position: -275px 0; } #image5 { background-position: -366px -3px; }
    复制代码

    运行结果:

    PS:使用CSS Sprites还有可能降低下载量,可能大家会认为合并后的图片会比分离图片的总和要大,因为还有可能会附加空白区域。实际上,合并后的图片会比分离的图片总和要小,因为它降低了图片自身的开销,譬如颜色表、格式信息等。

    字体图标

    在可以大量使用字体图标的地方我们可以尽可能使用字体图标,字体图标可以减少很多图片的使用,从而减少http请求,字体图标还可以通过CSS来设置颜色、大小等样式,何乐而不为。

    合并脚本 和样式表

    将多个样式表或者脚本文件合并到一个文件中,可以减少HTTP请求的数量从而缩短效应时间。

    然而合并所有文件对许多人尤其是编写模块化代码的人来说是不能忍的,而且合并所有的样式文件或者脚本文件可能会导致在一个页面加载时加载了多于自己所需要的样式或者脚本,对于只访问该网站一个(或几个)页面的人来说反而增加了下载量,所以大家应该自己权衡利弊。

     

    二、使用CDN

    如果应用程序web服务器离用户更近,那么一个HTTP请求的响应时间将缩短。另一方面,如果组件web服务器离用户更近,则多个HTTP请求的响应时间将缩短。

     CDN(内容发布网络)是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容。在优化性能时,向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。例如,CDN可能选择网络阶跃数最小的服务器,或者具有最短响应时间的服务器。

    CDN还可以进行数据备份、扩展存储能力,进行缓存,同时有助于缓和Web流量峰值压力。

    CDN的缺点:

    1、响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享Web服务器组。

    2、如果CDN服务质量下降了,那么你的工作质量也将下降

    3、无法直接控制组件服务器

     

    三、添加Expires头

    页面的初次访问者会进行很多HTTP请求,但是通过使用一个长久的Expires头,可以使这些组件被缓存,下次访问的时候,就可以减少不必要的HTPP请求,从而提高加载速度。

    Web服务器通过Expires头告诉客户端可以使用一个组件的当前副本,直到指定的时间为止。例如:

    Expires: Fri, 18 Mar 2016 07:41:53 GMT

    Expires缺点: 它要求服务器和客户端时钟严格同步;过期日期需要经常检查

    HTTP1.1中引入Cache-Control来克服Expires头的限制,使用max-age指定组件被缓存多久。

    Cache-Control: max-age=12345600

    若同时制定Cache-Control和Expires,则max-age将覆盖Expires头

     

    四、压缩组件

    从HTTP1.1开始,Web客户端可以通过HTTP请求中的Accept-Encoding头来表示对压缩的支持

    Accept-Encoding: gzip,deflate

    如果Web服务器看到请求中有这个头,就会使用客户端列出来的方法中的一种来进行压缩。Web服务器通过响应中的Content-Encoding来通知 Web客户端。

    Content-Encoding: gzip

    代理缓存

    当浏览器通过代理来发送请求时,情况会不一样。假设针对某个URL发送到代理的第一个请求来自于一个不支持gzip的浏览器。这是代理的第一个请求,缓存为空。代理将请求转发给服务器。此时响应是未压缩的,代理缓存同时发送给浏览器。现在,假设到达代理的请求是同一个url,来自于一个支持gzip的浏览器。代理会使用缓存中未压缩的内容进行响应,从而失去了压缩的机会。相反,如果第一个浏览器支持gzip,第二个不支持,你们代理缓存中的压缩版本将会提供给后续的浏览器,而不管它们是否支持gzip。

    解决办法:在web服务器的响应中添加vary头Web服务器可以告诉代理根据一个或多个请求头来改变缓存的响应。因为压缩的决定是基于Accept-Encoding请求头的,因此需要在vary响应头中包含Accept-Encoding。

    vary: Accept-Encoding
     

    五、将样式表放在头部

    首先说明一下,将样式表放在头部对于实际页面加载的时间并不能造成太大影响,但是这会减少页面首屏出现的时间,使页面内容逐步呈现,改善用户体验,防止“白屏”。

    我们总是希望页面能够尽快显示内容,为用户提供可视化的回馈,这对网速慢的用户来说是很重要的。

    将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素,浏览器会阻塞内容逐步呈现,造成“白屏”。这源自浏览器的行为:如果样式表仍在加载,构建呈现树就是一种浪费,因为所有样式表加载解析完毕之前务虚会之任何东西

     

    六、将脚本放在底部

    更样式表相同,脚本放在底部对于实际页面加载的时间并不能造成太大影响,但是这会减少页面首屏出现的时间,使页面内容逐步呈现。

    js的下载和执行会阻塞Dom树的构建(严谨地说是中断了Dom树的更新),所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容。

    下载脚本时并行下载是被禁用的——即使使用了不同的主机名,也不会启用其他的下载。因为脚本可能修改页面内容,因此浏览器会等待;另外,也是为了保证脚本能够按照正确的顺序执行,因为后面的脚本可能与前面的脚本存在依赖关系,不按照顺序执行可能会产生错误。

     

    七、避免CSS表达式

    CSS表达式是动态设置CSS属性的一种强大并且危险的方式,它受到了IE5以及之后版本、IE8之前版本的支持。

    p {
        width: expression(func(),document.body.clientWidth > 400 ? "400px" : "auto");
        height: 80px;
        border: 1px solid #f00;
    }
    复制代码
    <p><span></span></p>
    <p><span></span></p>
    <p><span></span></p>
    <p><span></span></p>
    <p><span></span></p>
    <script>
        var n = 0;
        function func() {
            n++;
            // alert();
            console.log(n);
        }
    </script>
    复制代码

    鼠标移动了几次,函数的运行次数轻而易举的达到了几千次,危险性显而易见。

    如何解决:

    一次性表达式:

    p {
        width: expression(func(this));
        height: 80px;
        border: 1px solid #f00;
    }
    复制代码
    <p><span></span></p>
    <p><span></span></p>
    <p><span></span></p>
    <p><span></span></p>
    <p><span></span></p>
    <script>
        var n = 0;
        function func(elem) {
            n++;
            elem.style.width = document.body.clientWidth > 400 ? '400px' : "auto";
            console.log(n);
        }
    </script>
    复制代码

    事件处理机制

    用js事件处理机制来动态改变元素的样式,使函数运行次数在可控范围之内。

     

    八、使用外部的JavaScript和CSS

    内联脚本或者样式可以减少HTTP请求,按理来说可以提高页面加载的速度。然而在实际情况中,当脚本或者样式是从外部引入的文件,浏览器就有可能缓存它们,从而在以后加载的时候能够直接使用缓存,而HTML文档的大小减小,从而提高加载速度。

    影响因素:

    1、每个用户产生的页面浏览量越少,内联脚本和样式的论据越强势。譬如一个用户每个月只访问你的网站一两次,那么这种情况下内联将会更好。而如果该用户能够产生很多页面浏览量,那么缓存的样式和脚本将会极大减少下载的时间,提交页面加载速度。

    2、如果你的网站不同的页面之间使用的组件大致相同,那么使用外部文件可以提高这些组件的重用率。

    加载后下载

    有时候我们希望内联样式和脚本,但又可以为接下来的页面提供外部文件。那么我们可以在页面加载完成止呕动态加载外部组件,以便用户接下来的访问。

    复制代码
     1   function doOnload() {
     2       setTimeout("downloadFile()",1000);
     3   }
     4   
     5   window.onload = doOnload;
     6   
     7   function downloadFile() {
     8       downloadCss("http://abc.com/css/a.css");
     9       downloadJS("http://abc.com/js/a.js");
    10  }
    11  
    12  function downloadCss(url) {
    13      var ele = document.createElement('link');
    14      ele.rel = "stylesheet";
    15      ele.type = "text/css";
    16      ele.href = url;
    17  
    18      document.body.appendChild(ele);
    19  }
    20  
    21  function downloadJS(url) {
    22      var ele = document.createElement('script');
    23      ele.src = url;
    24      document.body.appendChild(ele);
    25  }
    复制代码

    在该页面中,JavaScript和CSS被加载两次(内联和外部)。要使其正常工作,必须处理双重定义。将这些组件放到一个不可见的IFrame中是一个比较好的解决方式。

     

     九、减少DNS查找

    当我们在浏览器的地址栏输入网址(譬如: www.linux178.com) ,然后回车,回车这一瞬间到看到页面到底发生了什么呢?

    域名解析 –> 发起TCP的3次握手 –> 建立TCP连接后发起http请求 –> 服务器响应http请求,浏览器得到html代码 –> 浏览器解析html代码,并请求html代码中的资源(如js、css、图片等) –> 浏览器对页面进行渲染呈现给用户

    域名解析是页面加载的第一步,那么域名是如何解析的呢?以Chrome为例:

    1.  Chrome浏览器 会首先搜索浏览器自身的DNS缓存(缓存时间比较短,大概只有1分钟,且只能容纳1000条缓存),看自身的缓存中是否有www.linux178.com 对应的条目,而且没有过期,如果有且没有过期则解析到此结束。
     注:我们怎么查看Chrome自身的缓存?可以使用 chrome://net-internals/#dns 来进行查看
    
    2.  如果浏览器自身的缓存里面没有找到对应的条目,那么Chrome会搜索操作系统自身的DNS缓存,如果找到且没有过期则停止搜索解析到此结束.
     注:怎么查看操作系统自身的DNS缓存,以Windows系统为例,可以在命令行下使用 ipconfig /displaydns 来进行查看 
    
    3.  如果在Windows系统的DNS缓存也没有找到,那么尝试读取hosts文件(位于C:\Windows\System32\drivers\etc),看看这里面有没有该域名对应的IP地址,如果有则解析成功。
    
    4.  如果在hosts文件中也没有找到对应的条目,浏览器就会发起一个DNS的系统调用,就会向本地配置的首选DNS服务器(一般是电信运营商提供的,也可以使用像Google提供的DNS服务器)发起域名解析请求(通过的是UDP协议向DNS的53端口发起请求,这个请求是递归的请求,也就是运营商的DNS服务器必须得提供给我们该域名的IP地址),运营商的DNS服务器首先查找自身的缓存,找到对应的条目,且没有过期,则解析成功。如果没有找到对应的条目,则有运营商的DNS代我们的浏览器发起迭代DNS解析请求,它首先是会找根域的DNS的IP地址(这个DNS服务器都内置13台根域的DNS的IP地址),找打根域的DNS地址,就会向其发起请求(请问www.linux178.com这个域名的IP地址是多少啊?),根域发现这是一个顶级域com域的一个域名,于是就告诉运营商的DNS我不知道这个域名的IP地址,但是我知道com域的IP地址,你去找它去,于是运营商的DNS就得到了com域的IP地址,又向com域的IP地址发起了请求(请问www.linux178.com这个域名的IP地址是多少?),com域这台服务器告诉运营商的DNS我不知道www.linux178.com这个域名的IP地址,但是我知道linux178.com这个域的DNS地址,你去找它去,于是运营商的DNS又向linux178.com这个域名的DNS地址(这个一般就是由域名注册商提供的,像万网,新网等)发起请求(请问www.linux178.com这个域名的IP地址是多少?),这个时候linux178.com域的DNS服务器一查,诶,果真在我这里,于是就把找到的结果发送给运营商的DNS服务器,这个时候运营商的DNS服务器就拿到了www.linux178.com这个域名对应的IP地址,并返回给Windows系统内核,内核又把结果返回给浏览器,终于浏览器拿到了www.linux178.com对应的IP地址,该进行一步的动作了。
    
    注:一般情况下是不会进行以下步骤的
    
    如果经过以上的4个步骤,还没有解析成功,那么会进行如下步骤:
    5.  操作系统就会查找NetBIOS name Cache(NetBIOS名称缓存,就存在客户端电脑中的),那这个缓存有什么东西呢?凡是最近一段时间内和我成功通讯的计算机的计算机名和Ip地址,就都会存在这个缓存里面。什么情况下该步能解析成功呢?就是该名称正好是几分钟前和我成功通信过,那么这一步就可以成功解析。
    
    6.  如果第5步也没有成功,那会查询WINS 服务器(是NETBIOS名称和IP地址对应的服务器)
    
    7.  如果第6步也没有查询成功,那么客户端就要进行广播查找
    
    8.  如果第7步也没有成功,那么客户端就读取LMHOSTS文件(和HOSTS文件同一个目录下,写法也一样)
    
    如果第八步还没有解析成功,那么就宣告这次解析失败,那就无法跟目标计算机进行通信。只要这八步中有一步可以解析成功,那就可以成功和目标计算机进行通信。

    DNS也是开销,通常浏览器查找一个给定域名的IP地址要花费20~120毫秒,在完成域名解析之前,浏览器不能从服务器加载到任何东西。那么如何减少域名解析时间,加快页面加载速度呢?

    当客户端DNS缓存(浏览器和操作系统)缓存为空时,DNS查找的数量与要加载的Web页面中唯一主机名的数量相同,包括页面URL、脚本、样式表、图片、Flash对象等的主机名。减少主机名的 数量就可以减少DNS查找的数量。

    减少唯一主机名的数量会潜在减少页面中并行下载的数量(HTTP 1.1规范建议从每个主机名并行下载两个组件,但实际上可以多个),这样减少主机名和并行下载的方案会产生矛盾,需要大家自己权衡。建议将组件放到至少两个但不多于4个主机名下,减少DNS查找的同时也允许高度并行下载。

     

    十、精简JavaScript

    精简

    精简就是从代码中移除不必要的字符以减少文件大小,降低加载的时间。代码精简的时候会移除不必要的空白字符(空格,换行、制表符),这样整个文件的大小就变小了。

    混淆

    混淆是应用在源代码上的另外一种方式,它会移除注释和空白符,同时它还会改写代码。在混淆的时候,函数和变量名将会被转换成更短的字符串,这时代码会更加精炼同时难以阅读。通常这样做是为了增加对代码进行反向工程的难度,这也同时提高了性能。

    缺点:

    混淆本身比较复杂,可能会引入错误。

    需要对不能改变的符号做标记,防止JavaScript符号(譬如关键字、保留字)被修改。

    混淆会使代码难以阅读,这使得在产品环境中调试问题更加困难。

    在以上提到了关于用gzip之类的压缩方式来压缩文件,这边说明一下,就算使用gzip等方式来压缩文件,精简代码依然是有必要的。一般来说,压缩产生的节省是高于精简的,在生产环境中,精简和压缩同时使用能够最大限度的获得更多的节省。

    CSS的精简

    CSS的精简带来的节省一般来说是小于JavaScript精简的,因为CSS中注释和空白相对较少。

    除了移除空白、注释之外,CSS可以通过优化来获得更多的节省:

    合并相同的类;

    移除不使用的类;

    使用缩写,譬如

    复制代码
    .right {
        color: #fff;
    
        padding-top: 0; 
    
        margin: 0 10px;
    
        border: 1px solid #111
    }
    .wrong {
        color: #ffffff;
    
        padding-top: 0px; 
    
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 10px;
        margin-right: 10px;
    
    
        border-color: #111;
        border-width: 1px;
        border-style: solid;
    }
    复制代码

    上面.right是正确的的写法,颜色使用缩写,使用0代替0px,合并可以合并的样式。另外,在精简的时候其实样式最后一行的’;’也是可以省略的。

    来看看精简的例子:

    以上分别是jquery-2.0.3的学习版(未精简)和精简版,可见精简文件的大小比源文件小了155k,而且,在精简版中jquery还做了混淆,譬如用e代替window等,从而获得最大的节省。

     

    十一、避免重定向

    什么是重定向?

    重定向用于将用户从一个URL重新路由到另一个URL。

    常用重定向的类型

    301:永久重定向,主要用于当网站的域名发生变更之后,告诉搜索引擎域名已经变更了,应该把旧域名的的数据和链接数转移到新域名下,从而不会让网站的排名因域名变更而受到影响。

    302:临时重定向,主要实现post请求后告知浏览器转移到新的URL。

    304:Not Modified,主要用于当浏览器在其缓存中保留了组件的一个副本,同时组件已经过期了,这是浏览器就会生成一个条件GET请求,如果服务器的组件并没有修改过,则会返回304状态码,同时不携带主体,告知浏览器可以重用这个副本,减少响应大小。

    重定向如何损伤性能?

    当页面发生了重定向,就会延迟整个HTML文档的传输。在HTML文档到达之前,页面中不会呈现任何东西,也没有任何组件会被下载。

    来看一个实际例子:对于ASP.NET webform开发来说,对于新手很容易犯一个错误,就是把页面的连接写成服务器控件后台代码里,例如用一个Button控件,在它的后台click事件中写上:Response.Redirect(“”);然而这个Button的作用只是转移URL,这是非常低效的做法,因为点击Button后,先发送一个Post请求给服务器,服务器处理Response.Redirect(“”)后就发送一个302响应给浏览器,浏览器再根据响应的URL发送GET请求。正确的做法应该是在html页面直接使用a标签做链接,这样就避免了多余的post和重定向。

    重定向的应用场景

    1. 跟踪内部流量

    重定向经常用于跟踪用户流量的方向,当拥有一个门户主页的时候,同时想对用户离开主页后的流量进行跟踪,这时可以使用重定向。例如: 某网站主页新闻的链接地址http://a.com/r/news,点击该链接将产生301响应,其Location被设置为http://news.a.com。通过分析a.com的web服务器日志可以得知人们离开首页之后的去向。

    我们知道重定向是如何损伤性能的,为了实现更好的效率,可以使用Referer日志来跟踪内部流量去向。每个HTTP请求都有一个Referer表示原始请求页(除了从书签打开或直接键入URL等操作),记录下每个请求的Referer,就避免了向用户发送重定向,从而改善了响应时间。

    2. 跟踪出站流量

    有时链接可能将用户带离你的网站,在这种情况下,使用Referer就不太现实了。

    同样也可以使用重定向来解决跟踪出站流量问题。以百度搜索为例,百度通过将每个链接包装到一个302重定向来解决跟踪的问题,例如搜索关键字“前端性能优化”,搜索结果中的一个URL为https://www.baidu.com/link?url=pDjwTfa0IAf_FRBNlw1qLDtQ27YBujWp9jPN4q0QSJdNtGtDBK3ja3jyyN2CgxR5aTAywG4SI6V1NypkSyLISWjiFuFQDinhpVn4QE-uLGG&wd=&eqid=9c02bd21001c69170000000556ece297,即使搜索结果并没有变,但这个字符串是动态改变的,暂时还不知道这里起到怎样的作用?(个人感觉:字符串中包含了待访问的网址,点击之后会产生302重定向,将页面转到目标页面(待修改,求大神们给我指正))

    除了重定向外,我们还可以选择使用信标(beacon)——一个HTTP请求,其URL中包含有跟踪信息。跟踪信息可以从信标Web服务器的访问日记中提取出来,信标通常是一个1px*1px的透明图片,不过204响应更优秀,因为它更小,从来不被缓存,而且绝不会改变浏览器的状态。

     

    十二、删除重复脚本

    在团队开发一个项目时,由于不同开发者之间都可能会向页面中添加页面或组件,因此可能相同的脚本会被添加多次。

    重复的脚本会造成不必要的HTTP请求(如果没有缓存该脚本的话),并且执行多余的JavaScript浪费时间,还有可能造成错误。

    如何避免重复脚本呢?

    1. 形成良好的脚本组织。重复脚本有可能出现在不同的脚本包含同一段脚本的情况,有些是必要的,但有些却不是必要的,所以需要对脚本进行一个良好的组织。

    2. 实现脚本管理器模块。

    例如:

    复制代码
     1  function insertScript($file) {
     2      if(hadInserted($file)) {
     3           return;
     4       }
     5       exeInsert($file);
     6   
     7       if(hasDependencies($file)) {
     8   
     9           $deps =<span style="color: #000000;"> getDependencies($file);
    10  
    11          foreach ($deps as $script) {
    12              insertScript($script);
    13          }
    14  
    15          echo "<script type='text/javascript' src='".getVersion($file)."'></script>";
    16  
    17      }
    18  }
    复制代码

    先检查是否插入过,如果插入过则返回。如果该脚本依赖其它脚本,则被依赖的脚本也会被插入。最后脚本被传送到页面,getVersion会检查脚本并返回追加了对应版本号的文件名,这样如果脚本的版本变化了,那么以前浏览器缓存的就会失效。

     

    十三、配置ETag

    以前浏览器缓存的就会失效。

    什么是ETag?

    实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串,是web服务器用于确认缓存组件的有效性的一种机制,通常可以使用组件的某些属性来构造它。

    条件GET请求

    如果组件过期了,浏览器在重用它之前必须首先检查它是否有效。浏览器将发送一个条件GET请求到服务器,服务器判断缓存还有效,则发送一个304响应,告诉浏览器可以重用缓存组件。

    那么服务器是根据什么判断缓存是否还有效呢?有两种方式:

    ETag(实体标签);

    最新修改日期;

    最新修改日期

    原始服务器通过Last-Modified响应头来返回组件的最新修改日期。

    举个栗子:

    当我们不带缓存访问www.google.com.hk的时候,我们需要下载google的logo,这时会发送这样一个HTTP请求:

    Request:

    GET googlelogo_color_272x92dp.png HTTP 1.1

    Host: www.google.com.hk

    Response:

    HTTP 1.1 200 OK

    Last-Modified:Fri, 04 Sep 2015 22:33:08 GMT

    当需要再次访问相同组件的时候,同时缓存已经过期,浏览器会发送如下条件GET请求:

    Request:

    GET googlelogo_color_272x92dp.png HTTP 1.1

    If-Modified-Since:Fri, 04 Sep 2015 22:33:08 GMT

    Host: www.google.com.hk

    Response:

    HTTP 1.1 304 Not Modified

    体标签

    ETag提供了另外一种方式,用于检测浏览器缓存中的组件与原始服务器上的组件是否匹配。摘抄自书上的例子:

    不带缓存的请求:

    Request:

    GET /i/yahoo/gif HTTP 1.1

    Host: us.yimg.com

    Response:

    HTTP 1.1 200 OK

    Last-Modified:Tue,12 Dec 200603:03:59 GMT

    ETag:”10c24bc-4ab-457elc1f“

    再次请求相同组件:

    Request:

    GET /i/yahoo/gif HTTP 1.1

    Host: us.yimg.com

    If-Modified-Since:Tue,12 Dec 200603:03:59 GMT

    If-None-Match:”10c24bc-4ab-457elc1f“

    Response:

    HTTP 1.1 304 Not Midified

    为什么要引入ETag?

    ETag主要是为了解决Last-Modified无法解决的一些问题:

    1. 一些文件也许会周期性的更改,但是他的内容并不改变(仅仅改变的修改时间),这个时候我们并不希望客户端认为这个文件被修改了,而重新GET;

    2. 某些文件修改非常频繁,比如在秒以下的时间内进行修改,(比方说1s内修改了N次),If-Modified-Since能检查到的粒度是s级的,这种修改无法判断(或者说UNIX记录MTIME只能精确到秒);

    3. 某些服务器不能精确的得到文件的最后修改时间。

    ETag带来的问题

    ETag的问题在于通常使用某些属性来构造它,有些属性对于特定的部署了网站的服务器来说是唯一的。当使用集群服务器的时候,浏览器从一台服务器上获取了原始组件,之后又向另外一台不同的服务器发起条件GET请求,ETag就会出现不匹配的状况。例如:使用inode-size-timestamp来生成ETag,文件系统使用inode存储文件类型、所有者、组和访问模式等信息,在多台服务器上,就算文件大小、权限、时间戳等都相同,inode也是不同的。

    最佳实践

    1. 如果使用Last-Modified不会出现任何问题,可以直接移除ETag,google的搜索首页则没有使用ETag。

    2. 确定要使用ETag,在配置ETag的值的时候,移除可能影响到组件集群服务器验证的属性,例如使用size-timestamp来生成时间戳。

     

    十四、使Ajax可缓存

    维基百科中这样定义Ajax:

    AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出。

    传统的Web应用允许用户端填写表单(form),当提交表单时就向Web服务器发送一个请求。服务器接收并处理传来的表单,然后送回一个新的网页,但这个做法浪费了许多带宽,因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求,应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。

    与此不同,AJAX应用可以仅向服务器发送并取回必须的数据,并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少(大约只有原来的5%)[来源请求],服务器回应更快了。同时,很多的处理工作可以在发出请求的客户端机器上完成,因此Web服务器的负荷也减少了。

    类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。虽然其名称包含XML,但实际上数据格式可以由JSON代替,进一步减少数据量,形成所谓的AJAJ。而客户端与服务器也并不需要异步。一些基于AJAX的“派生/合成”式(derivative/composite)的技术也正在出现,如AFLAX。

    Ajax的目地是为突破web本质的开始—停止交互方式,向用户显示一个白屏后重绘整个页面不是一种好的用户体验。

    异步与即时

    Ajax的一个明显的有点就是向用户提供了即时反馈,因为它异步的从后端web服务器请求信息。

    用户是否需要等待的关键因素在于Ajax请求是被动的还是主动的。被动请求是为了将来来使用而预先发起的,主动请求是基于用户当前的操作而发起的

    什么样的AJAX请求可以被缓存?

    POST的请求,是不可以在客户端缓存的,每次请求都需要发送给服务器进行处理,每次都会返回状态码200。(可以在服务器端对数据进行缓存,以便提高处理速度)

    GET的请求,是可以(而且默认)在客户端进行缓存的,除非指定了不同的地址,否则同一个地址的AJAX请求,不会重复在服务器执行,而是返回304。

    Ajax请求使用缓存

    在进行Ajax请求的时候,可以选择尽量使用get方法,这样可以使用客户端的缓存,提高请求速度。

     

    如果是原创文章,转载请注明出处:http://www.cnblogs.com/MarcoHan

     

    展开全文
  • 常用优化网页加载速度方法

    千次阅读 2018-05-24 16:20:01
    另外,谷歌的排名算法中也把页面加载速度作为其中一项考虑因素。因此,你网站的页面加载时间是至关重要的。从访问者的角度看,测试你的浏览器速度的一个很好的方法是清除你的浏览器缓存,然后加载页面。

    许多研究发现,页面速度和访客的滞留时间,跳出率以及收入都有直接的关系。另外,谷歌的排名算法中也把页面加载速度作为其中一项考虑因素。因此,你网站的页面加载时间是至关重要的。从访问者的角度看,测试你的浏览器速度的一个很好的方法是清除你的浏览器缓存,然后加载页面。


    小于2秒的页载入时间被认为是优良的,而且高达4秒是可接受的。而大于5秒的页面载入时间不仅影响你网站的搜索引擎排名,还会严重影响用户体验。这里列出了几种方法,可以快速提升你网站的性能。


    1. 优化图像

      图像对于吸引访客的关注是很重要的。但是你添加到页面上的每一张图片都需要用户从你的服务器下载到他们的电脑上。这无疑增加了页面的加载时间,因此很可能让用户离开你的网站。所以,优化图像是非常必要的。
      过大的图像需要的下载时间更多,因此要确保图像尽可能的小。可以使用图像处理工具如PS来减小颜色深度、剪切图像到合适的尺寸等。 

    在图片适合的情况下尽可能的减小图片大小。

    2. 去掉不必要的插件

      一个非常值得关注但经常被忽略的因素是你网站安装的插件。如今,大量免费的插件诱导网站开发者添加很多不必要的功能。您安装的每个插件都需要服务器处理,从而增加了页面加载时间。所以禁用和删除不必要的插件。
      然而,有些插件是必须的,如社交分享插件,你可以选择CMS内置的社交分享功能来代替安装插件。
      将展示网页中不用的插件和连接等尽可能去掉

    3. 减少DNS查询(DNS lookups)

      减少DNS查询是一个WEB开发人员可以用了页面加载时间快速有效的方法。DNS查询需要话费很长的时间来返回一个主机名的IP地址。而浏览器在查询结束前不会进行任何操作。对于不同的元素可以使用不同的主机名,如URL、图像、脚本文件、样式文件、FLASH元素等。具有多种网络元素的页面经常需要进行多个DNS查询,因而花费的时间更长。
      减少不同域名的数量将减少并行下载的数量,加速你的网站  

    4. 最小化重定向

      重定向增加了额外的HTTP请求,因此也增加了页面加载时间。然而有时重定向却是不可避免的,如链接网站的不同部分、保存多个域名、或者从不存在的页面跳转到新页面。
      重定向增加了延迟时间,因此要尽量避免使用它。检查是否有损坏的链接,并立即修复。

    5. 使用内容分发网络(Content Delivery Network CDN)

      服务器处理大流量是很困难的,这最终会导致页面加载速度变慢。而使用CDN就可以解决这一问题,提升页面加载速度。
      CDN是位于全球不同地方的高性能网络服务,复制你网站的静态资源,并以最有效的方式来为访客服务。

    6. 把CSS文件放在页面顶部,而JS文件放在底部

      把CSS文件在页面底部引入可以禁止逐步渲染,节省浏览器加载和重绘页面元素的资源。
      JavaScript是用于功能和验证。把JS文件放在页面底部可以避免代码执行前的等待时间,从而提升页面加载速度。
      这些都是一些减少页面加载时间和提高转换率的方法。在某些情况下,需要JavaScript在页面的顶部加载(如某些第三方跟踪脚本)。

    7. 利用浏览器缓存

      浏览器缓存是允许访客的浏览器缓存你网站页面副本的一个功能。这有助于访客再次访问时,直接从缓存中读取内容而不必重新加载。这节省了向服务器发送HTTP请求的时间。此外,通过优化您的网站的缓存系统往往也会降低您的网站的带宽和托管费用。

    8. 使用 CSS Sprites 整合图像

      多图像的网站加载时间比较久。其中一个解决方法就是把多个图像整合到少数几个输出文件中。你可以使用 CSS Sprites 来整合图像文件。这样就减少了在下载其他资源时的往返次数和延迟,从而提高了站点的速度。

    9. 压缩CSS和JavaScript

      压缩是通过移除不必要的字符(如TAB、空格、回车、代码注释等),以帮助减少其大小和网页的后续加载时间的过程。这是非常重要的,但是,你还需要保存JS和CSS的原文件,以便更新和修改代码。

    10. 启用GZIP压缩

      在服务器上压缩网站的页面是提升网站访问速度非常有效的一种方法。你可以用gzip压缩做到这一点。Gzip是一个减小发送给访客的HTML文件、JS和CSS体积的工具。压缩的文件减少了HTTP响应时间。据Yahoo报道,这大概可以减少70%的下载时间。而目前90%的通过浏览器的流量都支持Gzip压缩,因此,这是一个提示网站性能有效的选项。
      优化你的网站是留住你的访客和提升搜索引擎排名有效的途径。
      

    前端实现懒加载(lazyload)

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽。这也就是们通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载–到可视区域再加载。

    思路:
    将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src。

    关于各种宽高:

    页可见区域宽: document.body.clientWidth;
    网页可见区域高: document.body.clientHeight;
    网页可见区域宽: document.body.offsetWidth (包括边线的宽);
    网页可见区域高: document.body.offsetHeight (包括边线的宽);
    网页正文全文宽: document.body.scrollWidth;
    网页正文全文高: document.body.scrollHeight;
    网页被卷去的高: document.body.scrollTop;
    网页被卷去的左: document.body.scrollLeft;
    网页正文部分上: window.screenTop;
    网页正文部分左: window.screenLeft;
    屏幕分辨率的高: window.screen.height;
    屏幕分辨率的宽: window.screen.width;
    屏幕可用工作区高度: window.screen.availHeight;

    示例:
    jqueryLazyload方式
    下载地址:

    https://download.csdn.net/download/fu415037685/10436805

    <section class="module-section" id="container">
         <img class="lazy-load" data-original="../static/img/loveLetter/teacher/teacher1.jpg" width="640" height="480" alt="测试懒加载图片"/>
    </section>
    
    require.config({
        baseUrl : "/static",
        paths: {
            jquery:'component/jquery/jquery-3.1.0.min'
            jqueryLazyload: 'component/lazyLoad/jquery.lazyload',//图片懒加载
        },
        shim: {
            jqueryLazyload: {
                deps: ['jquery'],
                exports: '$'
            }
        }
    });
    require(
        [
            'jquery',
            'jqueryLazyload'
        ], 
        function($){
            $(document).ready(function() {     
                $("img.lazy-load").lazyload({ 
              effect : "fadeIn", //渐现,show(直接显示),fadeIn(淡入),slideDown(下拉)
              threshold : 180, //预加载,在图片距离屏幕180px时提前载入
              event: 'click',  // 事件触发时才加载,click(点击),mouseover(鼠标划过),sporty(运动的),默认为scroll(滑动)
              container: $("#container"), // 指定对某容器中的图片实现效果
              failure_limit:2 //加载2张可见区域外的图片,lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况
            }); 
          });
      });

    为了代码可读性,属性值我都写好了注释。值得注意的是预制图片属性为data-original,并且最好是给予初始高宽占位,以免影响布局,当然这里为了演示我是写死的640x480,如果是响应式页面,高宽需要动态计算。

    dome演示地址:http://www.jq22.com/yanshi390
    echo.js方式
    一款非常简单实用轻量级的图片延时加载插件echo.js,如果你的项目中没有依赖jquery,那么这将是个不错的选择,50行代码,压缩后才1k。当然你完全可以集成到自己项目中去!
    下载地址:https://github.com/helijun/helijun/tree/master/plugin/echo

    <style>
      .demo img { 
        width: 736px; 
        height: 490px; 
        background: url(images/loading.gif) 50% no-repeat;}
    </style>
    <div class="demo">
        <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">
    </div>
    <script src="js/echo.min.js"></script>
    
    <script>
    
    Echo.init({
        offset: 0,//离可视区域多少像素的图片可以被加载
       throttle: 0 //图片延时多少毫秒加载
    }); 
    
    </script>

    说明:blank.gif是一张背景图片,包含在插件里了。图片的宽高必须设定,当然,可以使用外部样式对多张图片统一控制大小。data-echo指向的是真正的图片地址。

    图片懒加载是相当常见且简单实用的功能,如果你的项目中还是傻瓜式的一次性全部加载,那么请花20分钟优化下~

    展开全文
  • 在Vue项目中,引入到...当项目在挂载到服务器上,平均都是10S以上加载出来,好家伙这加载时间,仿佛过了半个世纪,很烦人,心态boom, 开发者甚至都有种想砸电脑的冲动(·#*@#¥……&*)! 我们先来分析下前端加载
  • 10种优化页面加载速度的方法

    万次阅读 2017-03-16 13:21:18
    另外,谷歌的排名算法中也把页面加载速度作为其中一项考虑因素。因此,你网站的页面加载时间是至关重要的。从访问者的角度看,测试你的浏览器速度的一个很好的方法是清除你的浏览器缓存,然后加载页面。  ...
  • 【php】如何提高网站的加载速度

    千次阅读 2012-10-25 13:54:27
    网站的加载速度影响SEO效果的,这在许多文章中都有提到,其实原因很简单,当你把页面的加载速度加快时,搜索引擎蜘蛛就会在同样的时间内抓取到更多URL,抓取多了,收录就多了,自然的,流量就会提升,在另一方面...
  • 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站。 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈。 正常来讲一个网页 4s...
  • 小游戏加载速度的优化

    千次阅读 2018-12-01 17:31:28
    首先看下调试工具的使用,通过调试工具,找到影响游戏加载速度的地方,从而对症下药。要明白一个最基本的原理,包体越大的游戏,加载速度肯定比不过包体越小的游戏。要让包体“大”的游戏加载速度快,这并不是个矛盾...
  • 解决vue项目打包之后 加载速度过慢的问题 加载速度过慢有几种解决方法 废话不多说直接上代码 其实就是把vendor搞小一点而已(说的通俗易懂点),当然不排除其他情况。 1.router 按需加载 const Login = () =>import...
  • 前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会...
  • 因为服务器是更接近用户,他们加载更迅速。较大的网站,实现的CDN确保他们来自世界各地的游客都尽可能快的体验成为可能。 2.采用新的图像格式,以减少图像的大小。  根据HTTP归档,网站的页面权重的61%的台式电脑上的...
  • 2:谷歌搜索 网站慢的原因,然后脑补各种影响网站慢的原因,在自己网站上找一边,看看有没有原因 3:找累了观望一周,再感觉一下,网站到底慢不慢,是换网站安装程序,还是换web服务提供商,还是买哪家的cdn. 这网站...
  • web页面加载速度缓慢,如何优化?

    千次阅读 2018-04-25 23:38:00
    页面代码的优化对于页面加载速度也有不小的影响,最广为人知的: HTML头部的JavaScript和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,JavaScript的引入放在页面尾 其次还有...
  • 当网站从服器端请求的数据较大时,在有限的带宽下就会造成浏览器加载缓慢,有时候会造成页面没有响应,使用户体验变得很差,tomcat为我们提供了有效的解决了办法,就是使用压缩来解决传输问题。 tomcat使用...
  • 如果提高pdf.js加载速度之一分片下载

    万次阅读 热门讨论 2018-04-10 16:54:14
    pdf.js 功能非常强大,但是如果pdf 文件比较大, 往往会加载比较慢。影响用户体验。 问题提出: 如果 一个pdf 文件大小为:100M,如何快速的在浏览器打开 难点分析: 我和同事初期分析是,pdf 需要先完整下载...
  • 图片资源的压缩,icon资源使用雪碧 严格说来这一步不算在编码技术范围内,但是却对页面的加载速度影响很大。对于所有的图片文件,都可以在一个叫tinypng的网站上去压缩一下。网址:tinypng.com/,对页面上使用到的...
  • 提高电脑速度

    千次阅读 2007-03-27 14:42:00
    提高电脑速度一、BIOS的优化设置 在BIOS设置的首页我们进入“Advanced BIOS Features”选项,将光标移到“Frist Boot Device”选项,按“PageUP”和“PageDOWN”进行选择,默认值为“Floppy”,这表示启动时系统会先...
  • 提高电脑运行速度WIN7

    千次阅读 2018-10-06 20:40:35
     许多朋友把开机速度慢或者运行速度慢怪罪于电脑桌面的快捷方式太多,其实这是个很天真的想法,你想一下,你的电脑里都已经安装了那么大的程序了,还会在乎桌面那个1K大的快捷方式么?最好的方法就是让程序在你需要...
  • 如何提高笔记本电脑开机速度

    千次阅读 2017-12-19 23:17:33
    作为一个轻度强迫症患者,总是感觉电脑开机速度不是那么快,那么如何提高开机速度呢?于是我开始了搜索之路。 经过在网上搜索各种帖子,我了解到网上主要提供有三种方法来提高开机速度:1.为电脑配置SSD固态硬盘。2...
  • 使用vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题 当你的SPA(单页应用程序)变得复杂时,打包构建后的Javascript包会变得非常大,以至于严重影响页面的加载时间。vue-router支持WebPack内置的异步...
  • 随着时间的推移,你的女朋友Android手机或平板电脑在使用过程中,由于不断的...那么,如何为女神改善安卓手机加载速度呢,你可以参考如下内容: 清理垃圾信息 1、评估手机或平板电脑上的应用程序,并删除不再需
  • 如何提高电脑速度

    千次阅读 2007-01-01 02:59:00
    加快系统启动速度主要有以下方法:尽量减少系统在启动时加载的程序与服务;对磁盘及CPU等硬件进行优化设置;修改默认设置,减少启动等待时间等。这些方法大部分既可减少系统启动的时间,又可以节省系统资源,加快...
  • 过了这个时间才能看到暗影精灵的logo,表示Windows开始加载。 这导致暗影精灵3笔记本的开机时间接近一分钟。这在SSD大行其道的今天,是无法接受的。 发生机理 这个黑屏有背光的时间段实际上是BIOS程序在等待用户按...
  • 为什么安卓手机传文件掉电脑速度很慢?通常不会超过1m/s,一个大的文件需要很久才能传完

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,868
精华内容 13,147
关键字:

影响电脑加载速度