zoukankan      html  css  js  c++  java
  • 《高性能网站建设进阶指南》笔记

    浏览器通常在运行js上花费的时间很少,绝大部分时间都消耗在dom上。
    使用浏览器性能评估工具
    内存出现问题时,可以从这两方面入手:1.delete不再需要的js对象。2.移除不必要的dom
    代码拆分:doloto工具用于把代码分成两部分:1.onload前执行。2.onload后异步下载执行

    延迟加载代码的情况:
    1.与UI有关。在js中,动态绑定元素的交互事件。这样下载前,用户点击没有任何反应,下载后才可以点击
    2.与UI无关。可以先使用桩函数(函数体里面什么都不做,桩函数仅仅使调用的地方不报错而已),后续下载的js用同名的函数,把这个桩函数覆盖即可,达到动态的代码替换。更高级的桩函数用法,被调用时记录调用次数,等js下载完后,自动进行相同次数的调用

    常规方式加载js会阻塞页面其他资源的下载,还会阻塞脚本后面的元素渲染,使用异步加载js方式可以避免这种阻塞现象,从而提高页面加载速度
    异步的js下载:
    1.xhr注入。ajax获取js,然后创建标签,把js设置到标签中
    2.动态创建script标签,引用外部的js文件
    3.使用script的defer属性

    行内脚本会阻塞资源的下载和页面渲染,解决办法是
    2.使用defer属性处理行内脚本(?)
    3.异步启动js的执行(onload)
    ps:假如图片下载需要1s,并且启动了150ms后执行js(执行时间需要5s)。则首先下载图片,150ms后,有一个timer事件进入队列,1s后图片下载完了,渲染图片的消息进入队列。js从队列中取出第一消息是timer,接着执行js(执行时长5s),完成后取出下一个消息,渲染图片


    高效js:
    1.尽量使用局部变量,或把多次访问到的全局变量保存为局部变量来访问。(减小作用域链的访问长度)
    2.with会把一个新的对象添加到作用域链的顶部,增加了长度(with结束会自动恢复),尽量避免使用with
    3.tryCatch的catch也会增加作用域链的长度,尽量不要在catch块中执行过多代码
    4.将多次访问的对象属性保存为局部变量,替换为访问局部变量,可以较少对对象属性的查找(如循环数组的时候,把arr.length保存为局部变量来访问)
    5.访问属性的时候,访问的对象层次越低越好。a.b.c.val 效率低于 a.val
    6.obj.val 和 obj['val'] 效率上来说基本没区别
    7.操作dom对象比非dom对象消耗更大,更要注意以上的优化

    8.按照命中的频率来调整if else的判断次序,常见的放在顶部,这样命中之前所做的判断就会更少(同样的道理也可以应用到switch上)
    9.对多个if else 进行if 二分拆分 可以提高效率(但会导致括号嵌套层数增加,代码多的时候看上去很混乱)
    10.以上两个优化如果不是范围判断,而是等值判断的话,可以放到数组或对象中,这样一来可以直接命中,而不需要判断

    11.避免使用forin来遍历对象属性,这会访问到整个原型链。如果已知对象的属性,就直接访问吧
    12.连接字符串的时候是使用加法还是使用数组的join来连接,不同浏览器有不同的优化,一般情况下,加法是首选

    常见的导致js运行时间过程的原因:
    1.过多的dom操作
    2.循环次数多
    3.递归层次深

    comet:是一种提升传统ajax的速度和拓展性的技术实现的合集
    传输技术:
    1.轮询:setTimeout,定期发送ajax请求
    2.长轮询(Long polling):
    client:发送ajax请求,响应的回调函数中重新发送ajax请求
    server:接收到请求,并且等到有新数据的时候才响应,期间会一直处于连接状态,等待数据
    3.xhr流:监听ajax的readystatechange,当code=3的时候,就可以通过xhr.responseText获取响应,调用回调函数。接着code=4的时候连接还没关闭,可以在这时候发出一个新的ajax请求,达到流的复用

    4.启用gzip压缩

    代码精简:
    1.事件委托:将对个绑定在子元素上的点击事件,修改为一个绑定在父元素上的点击事件。
    2.为较长的js变量或函数设置别名(用另一个较短的变量来赋值)

    对gzip进行嗅探:
    背景:有的浏览器支持gzip,但发送的请求中没有accept-Encoding说明,导致服务器没有响应经过gzip压缩的数据,降低了效率
    解决:
    1.往页面上添加一个display:none的iframe,src指向 a
    2.a 的响应式一个压缩过的html。原文内容是:document.cookie.write(xxxx)记录一个cookie。这里的作用是如果浏览器支持gzip压缩,则通过iframe请求的a内容会被正常解析,会记录一个cookie,后续的所有请求中,如果有这个cookie,则响应经过压缩的数据,也就是不用依赖accept-Encoding了。如果浏览器不支持gzip,则iframe中的内容是乱码,不能正常解析,也就不会设置cookie了

    提高网站对资源的下载效率:
    1.资源分配到多个域名下,如a.site.com,b.site.com,,c.site.com等,浏览器对单个域名的并行连接数有限,所以多个域名,则并行连接数也会提升,但dns查找的时间会增加

    关于iframe:
    好处:文档独立于父文档
    缺点:
    1.创建iframe比创建其他元素时的消耗要高1~2个数量级,是消耗最高的元素
    2.iframe阻塞onload事件,解决办法:动态设置src值的方法
    3.与父文档共享相同域名下的并行连接数;不利于SEO,爬虫不易读取iframe中的内容

    css选择符的执行过程是从右往左的。#ta a{} 这会匹配所有的a,然后查找是否存在id=ta的的父元素及祖先元素,开销相当大。
    最右边的选择符称为关键选择符,匹配的元素越少越好

    降低reflow

  • 相关阅读:
    【数据结构】线性表&&顺序表详解和代码实例
    【智能算法】超详细的遗传算法(Genetic Algorithm)解析和TSP求解代码详解
    【智能算法】用模拟退火(SA, Simulated Annealing)算法解决旅行商问题 (TSP, Traveling Salesman Problem)
    【智能算法】迭代局部搜索(Iterated Local Search, ILS)详解
    10. js时间格式转换
    2. 解决svn working copy locked问题
    1. easyui tree 初始化的两种方式
    10. js截取最后一个斜杠后面的字符串
    2. apache整合tomcat部署集群
    1. apache如何启动
  • 原文地址:https://www.cnblogs.com/hellohello/p/7911016.html
Copyright © 2011-2022 走看看