web前端性能优化

    xiaoxiao2021-04-18  53

    01:减少http请求

    :使用css Sprite : 合并js css : 原因这是由于浏览器对同 一个host并行 并行下载的限制http请求次数 :越多总体下载速度越慢

    02 :使用CDN 当页面中有很多资源的时候可以从不同服务器中读取

    :同时提高并行下载速度

    03:添加http Expires为图片视频之类很少改变的资源

    : 设置长的Expires时间将直接减少http请求 : 如果资源设置了Expires头为将来的某个时间,下次访问时候浏览器 : 发现资源还没有过期,会直接从缓存中读取,不会再次产生http请求

    04 : 将css 放在顶部

    05:将js放在底部

    :JS会阻塞对其后面内容的呈现

    :JS会阻塞对其后面内容的下载

    06:避免使用css表达式

    07:将css js 放在外部文件中

    08:通过使用Keep-Alive和较少的域名来减少DNS查找

    09:精简css 和js 文件

    10:寻找一种避免重定向的方法

    11:移除重复的脚本

    12:配置Etag

    13:确保Ajax 请求遵守性能,必要时应具备长久的expires头

    14 : 避免使用iframe

    15:避免使用空连接属性

    :空链接是指img link script iframe 元素 的src 或href 的属性值为空

    16:避免节点深层级嵌套

    :层级越深的节点在初始化构建时,所占内存越多 :通过浏览器HTML解析器会将整个HTMl的结构存储为DOM数结构 :当节点嵌套层次越深构建的DOM树层级也越深

    17:减少HTMl文档大小

    :删除对执行结果无影响的空格空行和注释; :避免table布局 :使用HTML5

    18:显示设置的图片宽高

    :有时需要在页面加载完之前,就对页面进行定位 :若页面中的图片没有指定尺寸 或尺寸与实际图片大小不符 :浏览器会在图片下载完成之后再“回溯”该图片并重新显示 :从而浪费时间 故最好为页面的图片设置指定尺寸

    19:避免脚本 阻塞加载

    :浏览器在解析常规的scrit标签会等待script 下载完毕后 才解析执行 :之后的html代码就制定等待。故应该将脚本放在文档的末尾

    20:避免使用@import

    : 避免使用css表达式 :避免使用统配选择器 :避免正则的属性选择器 :移除无匹配的样式

    21:使用事件代理

    :缓存选择器查询结果 :避免频繁的IO操作 :避免频繁的DOM操作
    转载请注明原文地址: https://ju.6miu.com/read-674626.html

    最新回复(0)