• 《高性能网站建设进阶指南》笔记


    浏览器通常在运行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

  • 相关阅读:
    小程序自定义日历组件
    uni-app 区分环境
    uniapp开发微信小程序获取用户手机号
    flex布局中子元素宽度失效的问题
    使用 VSCode 创建 SpringBoot RESTful 增删改查接口项目并发布
    [译] 如何使用 WebGL 技术进行风力地图可视化
    Cesium Primitive API 实践:绘制一个三角形
    ArcPy 输出路径神坑:不能有短横线
    【问题记录】本地没有更新远程仓库的jar包
    k8s 的pod按照时间排序
  • 原文地址:https://www.cnblogs.com/hellohello/p/7911016.html
Copyright © 2020-2023  润新知