zoukankan      html  css  js  c++  java
  • web前端的性能优化

    1.尽可能的去减少HTTP的请求

    如对图片的压缩,多张图片合并成sprit图;js文件合并与压缩;css文件合并与压缩;

    另外,使用RequireJs的r.js来合并依赖的文件打包成一个文件,也是特别优的方法。

    2.使用CDN(内容分发网络)

    解决网络拥堵现象,就是在离你最近的地方,放置一台性能好链接顺畅的副本服务器,让你能够以最近的距离,最快的速度获取资源

    3.添加Expire/Cache-Control

    3.1 如果Appache开启了expire模块,当服务器向Appache请求资源的时候,Appache向服务器返回资源的时候,同时会返回一个expire的http头。而expire头的内容是一个时间值,值就是资源在本地的过期时间、存在本地。在本笃缓存阶段,找到一个对应的资源值,当前时间还没超过资源的过期时间,就直接使用这一个资源,不会发送http请求。

    3.2 Cache-Control是http协议中常用的头部之一。顾名思义,他是负责控制页面的缓存机制,如果该头部指示缓存,缓存的内容也会存在本地,操作流程和expire相似,但也有不同的地方,cache-contro有更多的选项,而且也有更多的处理方式。简单的说,服务器发送请求的时候,会添加一个时间值,本机就会根据这个时间值来判断是否要去重新获取资源

    4.启用Gzip压缩

    什么是Gzip压缩,Gzip的思想就是把文件先放在服务器先压缩一下,然后再传输,这样就可以显著的减少文件传输的大小。传送过后,浏览器就会对压缩过的文件进行解压缩,目前,所有的浏览器都能很好的支持Gzip压缩。使用Gzip的好处就是将文件的体积变小。比如,将一个原始的79KB的JS文件进行压缩后可以变成25KB的原始Gzip文件,再对这个文件进行Gzip压缩就变成15KB大小了,大大减小了文件的体积。在提升文件传输速度的时候起了至关重要的作用。

    5.将css放在页面最上面

    css是层叠样式表,就是说后面的可以把前面的样式覆盖,级别高的样式可以覆盖级别低的样式。在IE下,把样式放在页面底部的问题是,在于它禁止了网页内容的顺序显示,所以在低网速的情况下,用户在打开网页的第一时候,看到的是空白的显示。而在FireFox下,虽然这样做不会阻止样式的显示,但页面会出现闪烁的问题。为了避免上述的空白和闪烁的问题,我们应该讲css文件样式放在页面最上面。

    6.将script放在最下面

    首先我们来了解文件的加载顺序,先读取html标签,然后进入读取head和meta并解析,再读取title内容显示网页标题。然后是读取style加载样式并解析样式,读取link加载并解析外部样式表。然后是渲染DOM结构,再读取script加载外部脚本文件并且解析,最后是执行外部脚本。

    7.避免在css中使用Expressions

    什么是CSS Expression,俗称CSS表达式。CSS Expression在页面显示和缩放、页面滚动、移动鼠标时都要重新的计算样式的值,就是在不停的repiant,严重影响用户的体验

    8.把JS和CSS放到外部文件

    有很多争议,单独提取或写在页面,可以灵活运用。单独引用:提高了js和css的复用性,减少了页面的体积,提高了js和css的可维护性;写在页面:减少页面请求,提升页面渲染速度。写在页面内的情况:单页应用,不经常被访问到,或是脚本和样式很少。

    9.减少DNS查询

    这算一个比较底层的行为了,那么如何减少DNS查询呢。当我们访问一个网址时,比如域名www.baidu.com,这个时候服务器会将这个网址对应到比如127.0.0.1这样计算机可以识别的IP地址,然后服务器根据这个IP地址进行DNS查询,将查询到的地址内容返回给域名。查询过程是需要消耗大概20ms的时间,这期间浏览器是一片空白,所以我们要对这个过程进行缓存。浏览器的缓存---IE:DNS的缓存时间为30分钟,FF和chrome都均为60秒。缓存时间长的时候,会减少DNS的重复查找,这样可以节省时间;而缓存时间短的时候,可以及时的检测网站服务器的变化,保证正确性。缓存时间的长短就各有利弊了。这个时候我们得考虑单域和多域的情况,单域的情况时,我们可以将html/img/js都放在同一个域名下,而多域的情况时,我们应该讲三者分开放。比如html放在www.a.com下,img和js和css这些资源可以单独放在img.a.com下。在多域的时候,采用几个域名,这也是我们需要考虑的事情。

    10.压缩js和css

    js和css最小化,加快文件的加载速度。建议在项目正式的上线前,将js和css都进行压缩,并对各文件加上时间戳防止缓存,这样可以使线上版本是最轻量级的,可以大幅的提升网站的性能。

    11.避免重定向

    什么是重定向,其实就是用户的原始请求被重新转向到了其他请求。301 moved permanently 指用户请求的资源被移动到了另外的网址,表示的是永久的重定向。 302 Found 用户请求的资源被找到了,但不在原来的位置,表示的临时重定向。这些重定向对用户可能没有很大的影响,但对搜索引擎,它会不定期的对资源进行扫描,比如蜘蛛爬网。301会比较智能,输入旧网址就会自动跳转到新网址,而对于302,则会先找到旧王寨,再从旧网址跳转到新网址。

    那么为什么需要去避免重定向。因为这样可以减少浏览器的请求次数。当用户输入www.a.com时,浏览器会向a.com服务器请求资源,然后在通过a.com重定向到b.com服务器去请求资源,再通过a.com服务器向浏览器返回新地址b.com,然后浏览器又要去b.com请求资源。

    12.移除重复脚本

    重复的脚本会造成结果的错乱。

    13.配置实体标签(Entity Tag)

    ETag实体标签属于HTTP协议,它受web服务支持。它是使用特殊的字符串来标示某个资源。即浏览器向服务器请求某个资源,服务器收到后进行判断,发现请求的资源浏览器端已经有了,返回给浏览器这个标示告诉它使用浏览器端自己的资源就可以了。这样可以减轻服务器的很多负担。

    14.使用ajax缓存

    能够在不重新加载页面的情况下就可以刷新页面局部的内容,实现分批加载,局部更新。post和get两种请求,post是每次都执行,成功返回200,请求的内容不被缓存。get是对同一个地址簿重复执行,成功返回304,它请求的资源可以被缓存。他们的区别是:get方式请求会把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到;而post请求是通过HTTP POST机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到action属性所指的url地址,用户是看不到这个过程的。get传送的数据小,一般不大于2kb,而post请求传送的数据一般不受限制,但理论上是会根据服务器的不同来区别。get请求的安全性较低,post请求的安全性较高。

  • 相关阅读:
    HDU 1874 畅通工程续(dijkstra)
    HDU 2112 HDU Today (map函数,dijkstra最短路径)
    HDU 2680 Choose the best route(dijkstra)
    HDU 2066 一个人的旅行(最短路径,dijkstra)
    关于测评机,编译器,我有些话想说
    测评机的优化问题 时间控制
    CF Round410 D. Mike and distribution
    数字三角形2 (取模)
    CF Round410 C. Mike and gcd problem
    CF Round 423 D. High Load 星图(最优最简构建)
  • 原文地址:https://www.cnblogs.com/guoyongfeng/p/3890000.html
Copyright © 2011-2022 走看看