做网站教程 第一课,爱站网爱情电影网,wordpress收不到邮箱验证码,找工程包工平台一、什么是前端性能优化从用户访问资源到资源完整的展现在用户面前的过程中#xff0c;通过技术手段和优化策略#xff0c;缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。二、为什么要做前端性能优提升网站性能#xff0c;提升用户体验三、前端性能优化的原则1、… 一、什么是前端性能优化 从用户访问资源到资源完整的展现在用户面前的过程中通过技术手段和优化策略缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。 二、为什么要做前端性能优 提升网站性能提升用户体验 三、前端性能优化的原则 1、因地制宜 2、不出bug 四、从浏览器发起请求到页面能正常浏览都有哪些阶段 预处理——DNS解析——建立连接——发起请求——等待响应——接受数据——处理元素——布局渲染 五、性能优化的具体方法 一内容层面 1、DNS解析优化DNS缓存、减少DNS查找、keep-alive、适当的主机域名 2、避免重定向 3、切分到多个域名 4、杜绝404 二网络传输阶段 1、减少传输过程中实体的大小 请减少HTTP请求基本原理当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时将会频繁的与服务器建立连接与释放连接这必定会造成资源的浪费且每个HTTP请求都会对服务器和浏览器产生性能负担。解决方法请看第二点。 1缓存 2cookie优化 因为Cookie是本地的磁盘文件每次浏览器都会去读取相应的Cookie所以建议去除不必要的Coockie使Coockie体积尽量小以减少对用户响应的影响 使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响 Cookie是有生命周期的所以请注意设置合理的过期时间合理地Expire时间和不要过早去清除coockie都会改善用户的响应时间。 3文件压缩Accept-Encodingg-zip 图片数据最大关键是压缩图片 1图片的格式 2使用base64转换为二进制编码嵌入 原理引入图片路径通过base64转换为二进制定义一个函数在其中通过转换的编码canvas绘制出一个新的图片 3压缩图片和使用图片Sprite技术 基本原理: 注其实压缩图片和图片精灵是两个方面的技术可是既然都是关于图片的优化还是放到一块吧。 现在由于工作的细分专业的前端工程师已经少有机会去切图了可是关于图片压缩还是得略微了解一般图片压缩的方式有 1.缩小图片分辨率 2.改变图片格式 3.降低图片保存质量 2、减少请求的次数 1文件适当的合并 2雪碧图 3、异步加载并发,requirejs 4、预加载、延后加载、按需加载 5、请正确理解 Repaint 和 Reflow 注Repaint 和 Reflow 也就是重绘和重排 基本原理 Repaint(重绘)就是在一个元素的外观被改变但没有改变布局(宽高)的情况下发生如改变visibility、outline、背景色等等。 Reflow(重排)就是DOM的变化影响到了元素的几何属性宽和高浏览器会重新计算元素的几何属性会使渲染树中受到影响的部分失效 浏览器会验证DOM树上的所有其它结点的visibility属性这也是Reflow低效的原因。如改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化style属性 如果Reflow的过于频繁CPU使用率就会噌噌的往上涨所以前端也就有必要知道 Repaint 和 Reflow的知识。 三渲染阶段 1、js放底部css放顶部 基本原理 注这个是很基础且必须遵循的知识点可是为了文章的完整性勉为其难加进来吧嘿嘿。 引入外部文件好处是显而易见的而且是项目稍稍复杂一点的时候就有必要了这样做了。 易维护、易扩展方便管理和重复利用。 正确的方式 JavaScript是浏览器中的霸主为什么这么说因为在浏览器在执行JavaScript代码时不能同时做其它事情 即每次出现都会让页面等待脚本的解析和执行不论JavaScript是内嵌的还是外链的JavaScript代码执行完成后 才继续渲染页面。这个也就是JavaScript的阻塞特性。 因为这个阻塞的特点建议把JavaScript代码放到标签以前这样既能有效的防止JavaScript的阻塞又能使得页面的HTML结构能更快的释放。 2、减少重绘和回流 3、合理使用Viewport 等meta头部 4、减少对DOM的操作 原理对DOM操作的代价是高昂的这在网页应用中的通常是一个性能瓶颈 在《高性能JavaScript》中这么比喻“把DOM看成一个岛屿把JavaScript(ECMAScript)看成另一个岛屿两者之间以一座收费桥连接”。 所以每次访问DOM都会教一个过桥费而访问的次数越多交的费用也就越多。所以一般建议尽量减少过桥次数。 减少对DOM元素的查询和修改查询时可将其赋值给局部变量。 注在IE中:hover会降低响应速度 四数据传输类型 使用JSON格式来进行数据交换 基本原理 JSON是一种轻量级的数据交换格式采用完全独立于语言的文本格式是理想的数据交换格式。同时JSON是 JavaScript原生格式 这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。 与XML序列化相比JSON序列化后产生的数据一般要比XML序列化后数据体积小所以在Facebook等知名网站中都采用了JSON作为数据交换方式。 JS操作JSON 在JSON中有两种结构 对象和数组。 一个对象以 “ { ” 开始“ } ” 结束。每个“名称”后跟一个 “ : ” “名称/值 对”之间使用 “ , ”逗号分隔。 名称用引号括起来值如果是字符串则必须用引号括起来 数值型则不需要。如 var obj{name:darren,age:24,location:beijing} 数组是值value的有序集合。一个数组以 “ [ ” 开始 “ ] ” 结束。值之间使用 “ , ” 逗号分隔。如 var jsonlist[{name:darren,age:24,location:beijing},{name:weidong.nie,age:24,location:hunan}]; 对这种数组和对象字面量的操作是非常方便且高效的。如果预先知道JSON结构的情况下使用JSON进行数据传递简直是太美妙了 可以写出很实用美观可读性强的代码。如果你是纯粹的前台开发人员一定会非常喜欢JSON。 五脚本执行阶段 1、缓存节点尽量减少节点的查找 2、减少节点的操作innerHTML 3、避免无谓的循环break、continue、return的适当使用 4、事件委托请看 三 下面的 4 原理事件委托就是利用事件冒泡只指定一个事件处理程序就可以管理某一类型的所有事件。简单来说就是委托给父元素来做 转载于:https://www.cnblogs.com/eye-color/p/6893462.html
