网络性能优化常用方法有_防御网络监听常用方法是

网络性能优化常用方法有_防御网络监听常用方法是1.减少页面请求按需加载合并压缩文件将小图标合并成雪碧图字体图标dataURL内置图片2.优化网络链接cdn,减少dns查询,避免服务器端重定向3.减少下载量压缩css图片混

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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样式优先级

先比较优先级

  1. 浏览器声明
  2. 用户普通声明
  3. 作者普通声明
  4. 作者重要声明
  5. 用户重要声明

再比较特殊性

  1. 声明来自内联的style属性则 S+1;
  2. 声明中含有id属性则 I+1;
  3. 声明中含有类、伪类、属性选择器则 C+1;
  4. 生命中含有元素、伪元素选择器则 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)
  • 用<link>代替@import
  • 避免使用滤镜

四、 JavaScript部分

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

五、Coockie部分

  • 减小Cookie体积
  • 对于页面内容使用无coockie域名

六、Image 部分

  • 优化图像
  • 优化CSS Spirite
  • 不要在HTML中缩放图像
  • favicon.ico要小而且可缓存

七、 Mobile部分

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

 

 

 

https://segmentfault.com/a/1190000004139275

代码级优化

关于图片

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

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

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

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

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

 

关于js

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

  2. 移动端使用zepto库,不允许使用jquery

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

var bike={}; bike.name='cookee'; bike.getOrderDetail=functtion(id){.....}


关于css

  1. 提炼项目的公共样式,按钮、表单。

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

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

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

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

网络性能优化常用方法有_防御网络监听常用方法是

 

 

6.避免使用通配符

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

关于html

  1. 精简dom结构,减少冗余html

  2. 语义化标签,要学会用

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/166907.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • pycharm 2021..2.3激活_在线激活「建议收藏」

    (pycharm 2021..2.3激活)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • linux如何设置环境变量_linux用户环境变量

    linux如何设置环境变量_linux用户环境变量linuxfvwm作用FVWM窗口管理器最早是对TWM的修改,可以追溯到1993年。经过几年的迭代,出现了一个可高度自定义的环境,其中可以配置任何行为,动作或事件。它支持自定义键绑定,鼠标手势,主题,脚本等。尽管FVWM在安装后立即可用,但其默认发行版仅提供绝对的最低配置。这是启动自己的自定义桌面环境的良好基础,但是,如果您只想将其用作桌面,则可能要安装由另一个用户分发的完整配置。…

  • 接口测试简介以及接口测试用例设计思路

    接口测试简介以及接口测试用例设计思路接口测试简介1.什么是接口接口就是内部模块对模块,外部系统对其他服务提供的一种可调用或者连接的能力的标准,就好比usb接口,他是系统向外接提供的一种用于物理数据传输的一个接口,当然仅仅是一个接口是不能进行传输的,我们还的对这个接口怎么进行传输进行进行一些设置和定义。开发所谓的接口是模块模块之间的一种连接,而测试眼中的接口是一种协议(对接口的功能的一种定义)2.接口的种类和分类外部接…

  • goland 2021.7 激活码【2021最新】

    (goland 2021.7 激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

  • Navicat Premium 15激活码_在线激活

    (Navicat Premium 15激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • java缓存数据并配置有效时间[通俗易懂]

    java缓存数据并配置有效时间[通俗易懂]没有用到redis只是单纯的使用内存存储数据实现的功能:缓存数据并配置有效时间,可设置默认时间自动清除缓存,也可以自己设置。直接上代码:importjava.util.LinkedList;importjava.util.List;importjava.util.Map.Entry;importjava.util.Timer;importjava.util.TimerTask;importjava.util.concurrent.ConcurrentHashMap;publ

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号