网络性能优化常用方法

谁借莪１个温暖的怀抱￠ 2021-08-14 00:03 501阅读 0赞

1.减少页面请求

按需加载 合并压缩文件 将小图标合并成雪碧图 字体图标 dataURL 内置图片

2.优化网络链接

cdn, 减少dns查询, 避免服务器端重定向

3.减少下载量

压缩css图片 混淆压缩js代码 服务器端启用gzip压缩

4.启用缓存

5.页面内部优化

css置顶 ---- 为避免当页面变化时重绘页面元素，浏览器会阻塞页面呈现，直到样式表解析完毕

js置底 ---- script元素会阻塞后续内容的解析，因为script中可以同过document.write来更改页面

不会缩短加载时间,但会减少页面呈现时间

白屏时间 fetchStart – app-cache-- dns-- tcp – request – response

前端性能监测器

https://www.cnblogs.com/bldxh/p/6857324.html

CSS样式优先级

先比较优先级

浏览器声明  
用户普通声明  
作者普通声明  
作者重要声明  
用户重要声明  
再比较特殊性

声明来自内联的style属性则 S+1；  
声明中含有id属性则 I+1；  
声明中含有类、伪类、属性选择器则 C+1；  
生命中含有元素、伪元素选择器则 E+1；  
https://www.cnblogs.com/ohmyrose/p/8047859.html

进行性能优化，首先要知道评价页面性能的指标

https://segmentfault.com/a/1190000004176324

网站性能优化工具大全-----HTML CSS JavaScript如何优化  
https://segmentfault.com/a/1190000002418920

异步加载css和JavaScript脚本

https://segmentfault.com/a/1190000002589116

只有 10%~20% 的最终用户响应时间花在了下载 HTML 文档上。其余的 80%~90% 时间花在了下载页面中的所有组件中;

另外一点是，优化后台需要花费比较大的成本，优化前端只需要适当地遵循一些法则会有较大的提升，相对低成本高收益

提高前端性能的黄金法则

https://segmentfault.com/a/1190000004645141

虽然书中的很多手段都已经过时了，但是思路基本没变，取其精华就好。

前端性能优化一味奉行“最佳实践”有时候反而过犹不及，所以针对项目的实际情况来优化才是明智的选择。

提升网页性能

http://www.w3cplus.com/performance/10-ways-minimize-reflows-improve-performance.html

网页卡顿的调试方法

都可以啊，timeline 比较直接，一般先看这个。  
profile，可以详细的看具体的调用信息。

页面只要不低于30帧 就都是流畅  
一般到26都看不出来

flash 是多少帧？  
gif一般8-12帧吧

大部分都用24帧……

帧率要求高的一般都是3d  
转动视角 对帧率要求很高

Excetional Performance 团队总结出了一系列可以提高网站速度的方法。可以分为 7大类 35条。  
包括内容 、服务器 、 CSS 、 JavaScript 、Cookie 、图片 、移动应用 ，七部分。

一、内容部分

尽量减少 HTTP请求  
减少 DNS查找  
避免跳转  
缓存 Ajxa  
推迟加载  
提前加载  
减少 DOM元素数量  
用域名划分页面内容  
使 frame数量最少  
避免 404错误  
二、服务器部分

使用内容分发网络  
为文件头指定Expires或Cache-Control  
gzip压缩文件内容  
配置ETag  
尽早刷新输出缓冲  
使用GET来完成AJAX请求  
避免空的图像来  
三、CSS部分

把样式表置于顶部  
避免使用CSS表达式（Expression）  
用代替@import  
避免使用滤镜  
四、 JavaScript部分

把脚本置于页面底部  
使用外部JavaScript和CSS  
削减JavaScript和CSS  
剔除重复脚本  
减少DOM访问  
开发智能事件处理程序  
五、Coockie部分

减小Cookie体积  
对于页面内容使用无coockie域名  
六、Image 部分

优化图像  
优化CSS Spirite  
不要在HTML中缩放图像  
favicon.ico要小而且可缓存  
七、 Mobile部分

保持单个内容小于25K  
打包组件成复合文本

https://segmentfault.com/a/1190000004139275

代码级优化

关于图片  
页面内的大图，特别是banner图，登录页背景图等，使用第三方的cdn加速。同时做一遍压缩，如果压缩之后还超过200kb，则和设计师沟通是否取消或者更换图片。

精灵图必备，各种小图标，小icon，做到一张图片里面去。

尽量使用icon font代替小图标，icon font的优点可以甩普通的icon图标几条街，随意调整大小，改变颜色，太cool！！

如果项目很大，公司不差钱，最佳方案是把图片资源放在单独的服务器上，配置独立的域名，图片资源的加载由图片域名加载，很多大公司的静态资源都是由独立的服务器来存放和分发的

我一般和设计师讨价还价的底线就是图片必须加载流畅，如果用户打开网页图片加载半天出不来，就算我们的图片做的再漂亮，又有什么卵用！

关于js  
第三方的js库，必须使用min版。站点内部的lib，每次发布上线之前必须使用gulp压缩合并。

移动端使用zepto库，不允许使用jquery

给js代码一个全局命名空间，举个例子，我们的项目是某个自行车官网，全局命名空间就叫bike，和本项目有关的所有js方法，函数，变量，全部挂在bike的下面

var bike=\{\};  
bike.name=‘cookee’;  
bike.getOrderDetail=functtion(id)\{…\}

关于css  
提炼项目的公共样式，按钮、表单。

命名。面向属性命名，通用模块可以面向模块命名，比如头部header，尾部footer等，其他请尽量使用面向属性的命名方式，这样可以给css最大程度的复用自由，关于什么是面向属性的命名方式，请参考推荐

样式分离再分离，在css里面不要使用id属性，留着id给js使用

减少css的层级嵌套，由于css的渲染是从右向左的，关于网页的渲染，这个细说起来又可以写一篇文章了。如果你的层级标签嵌套多层，想想要浪费多少渲染时间，对于移动端毫秒必争的加载时间，你还有什么理由不改进你的代码

优雅的名字可以让人一目了然，放一张前人总结的图，没事的时候多看看，潜移默化的记住这些名字

6.避免使用通配符

7.不使用标签名或类名修饰ID规则：如果规则使用ID选择器作为关键选择器，不要给规则添加标签名。因为ID本身就是唯一的，添加标签名会不必要地降低匹配效率。

8.不使用标签名修饰类：相较于标签，类更具独特性。

9.尽量选择最具体的方式：造成低效的最简单粗暴的原因就是在标签上使用太多规则。给元素添加类可以更快细分到类方式，可以减少规则去匹配标签的时间。

10.关于后代选择器和子选择器：避免使用后代选择器，非要用的话建议用子选择器代替，但子选择器也要慎用，标签规则永远不要包含子选择器。

11.利用可继承性：没必要在一般内容上声明样式。

关于html  
精简dom结构，减少冗余html

语义化标签，要学会用

移动端，使用svg绘图代替canvas绘图，canvas会有严重的锯齿(如果有同学有实践过的解决锯齿的方案，我愿恭听)

发表评论取消回复

表情：

评论列表（有 0 条评论，501人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java字符串操作：常用方法及性能优化

在Java中，字符串是主要的数据类型之一。处理字符串有很多内置的方法，同时也有性能优化的策略。以下是常用的字符串操作和性能优化： 1. **基本操作**： - `len

深藏阁楼爱情的钟/ 2024年12月07日 18:03/ 0 赞/ 5 阅读

相关 MYSQL 优化常用方法

如何优化你的MYSQL呢?请看下面:(不错的优化方案) 1、选取最适用的字段属性 MySQL可以很好的支持大数据量的存取，但是一般说来，数据库中的表越小，在它上面执行的查

﹏ヽ暗。殇╰゛Y/ 2024年03月31日 13:54/ 0 赞/ 94 阅读

相关网络编程常用方法

-------------------- 获取 host / 获取 host / public String getHost(St

矫情吗；*/ 2024年03月24日 19:57/ 0 赞/ 59 阅读

相关 SQLite 常用性能优化配置

文章目录日志模式同步提交临时文件内存映射页面大小其他操作大家好，我是只谈

红太狼/ 2022年09月06日 10:16/ 0 赞/ 271 阅读

相关 Oracle SQL性能优化常用方法

（1）选择最有效率的表名顺序(只在基于规则的优化器中有效)： ORACLE的解析器按照从右到左的顺序处理FROM子句中的表名，FROM子句中写在最后的表(基础表 driv

清疚/ 2022年08月12日 00:30/ 0 赞/ 442 阅读

相关 linux性能优化常用命令

最主要的工作是优化系统配置，使应用在系统上以最优的状态运行，但是由于硬件问题、软件问题、网络环境等的复杂性和多变性，导致对系统的优化变得异常复杂，如何定位性能问题出在哪个方面

川长思鸟来/ 2022年07月14日 23:45/ 0 赞/ 239 阅读

相关 Phoenix性能优化常用手段

1. 建表优化 Salting 翻译成中文是加盐的意思，本质是在hbase的rowkey的byte数组的第一个字节位置设定一个系统生成的byte值，这个byte值是由主

清疚/ 2022年05月08日 11:46/ 0 赞/ 502 阅读

相关前端性能优化常用总结

正文前端优化层出不穷，移动端大行其道的现在，我们可以说优化好移动端，PC端也将会更好。所以，我们可以综合以下图片进行一些分析，如图： ![clipboard.png][]

淩亂°似流年/ 2022年04月23日 14:54/ 0 赞/ 367 阅读

相关常用sql优化方法

1.尽可能建立索引，包括条件列，连接列，外键列； 2.尽可能让where中的列顺序和复合索引中的列顺序一样； 3.尽可能不要使用select \ ，而只列出自己需要的字段列

女爷i/ 2022年03月19日 03:18/ 0 赞/ 337 阅读

相关网络性能优化常用方法

1.减少页面请求按需加载合并压缩文件将小图标合并成雪碧图字体图标 dataURL 内置图片 2.优化网络链接 cdn, 减少dns查询, 避免服务器端重定向 3

谁借莪１个温暖的怀抱￠/ 2021年08月14日 00:03/ 0 赞/ 502 阅读