zoukankan      html  css  js  c++  java
  • Web前端性能杂记

      前面说过,用户感受的响应时间是取决于诸多因素的,我们几乎不能得到真实的用户响应时间。对于Web应用前端性能的研究也不是为了准备得到一个响应时间,其性能一部分取决于Web服务器和应用服务器(下载资源,执行等),另一部分取决于浏览器的实现机制、界面JS文件的执行等,所以我们讨论前端性能的目的是减少总的响应时间,或者说让用户“感觉很快”。

    一、与前端性能相关的头信息

    a)Accept-Encoding:编码方式。是否支持压缩,支持何种格式的压缩;

    b)Connetion:连接。是否持久连接;

    c)Expires:返回数据的到期时间。与浏览器的缓存机制有关,此处不细说,详情请看http相关的头域说明;

    二、浏览器从输入URL开始到页面完全可用的大致过程

    a)连接到URL所在服务器;

    b)获取页面对应的HTML文档;

    c)解析文档并获取所需要的资源;

    d)页面上的JS文件与CSS文件;

    e)onload事件。

    三、提高前端性能的常用方法

      从第二点的过程来看,主要有两大思路:

    ①减少页面加载所需要的时间:从请求的数据、请求的并发度以及网络传输时间等方面着手;

    ②提升用户的观感,让用户觉得页面很快:让页面尽快开始显示着手。

    3.1  减少网络时间

    ①.使用DNS缓存技术

    ②.减少需要传输文件的尺寸

    ③.加快文件传输速度

    3.2  减少发送的请求数量

    ①.利用浏览器缓存

    ②.使用合并的图片文件

    3.3  提高浏览器下载的并发度

    ①.JS文件放在HTML文档的最后

    ②.使用多个域名

    3.4  让页面尽早开始显示

    ①.将样式表的引用放在HTML文档的开头(如放在<Head>标签中)

    ②.将JS的引用放在HTML文档的最后

    --------------------------------------------------------------分割线--------------------------------------------------------------

      对于协助测试前端性能的工具,有HttpWatch、Chrome自带的开发者工具(F12)、Page Speed工具、YSlow等。我用过一段时间的YSlow,操作很简单,而且也会给出优化前端性能的建议,有兴趣的看客不凡去试试。安装包大概需要点百度功底,教程的话,百度即可,看一遍就懂了。对于性能测试,我们平时更多的还是针对服务器、数据库等,此文记录纯为了解,开拓自身眼界。

    ____江湖没什么好,也就酒还行

  • 相关阅读:
    03《高效程序员的45个习惯》阅读笔记2
    02《高效程序员的45个习惯》阅读笔记1
    关于“foreach循环”中遇到的几个问题总结
    pageContext.request.contextPath} JSP取得绝对路径
    读书笔记1
    java中字节数组byte[]和字符(字符串)之间的转换
    本学期阅读计划
    问题账户需求分析
    准备食物
    【bzoj4551】【NOIP2016模拟7.11】树
  • 原文地址:https://www.cnblogs.com/zichuan/p/10187496.html
Copyright © 2011-2022 走看看