浅谈网页基本性能优化规则小结
|
针对浏览器网页的一些优化规则 页面优化 静态资源压缩 借助构建工具（webpack、gulp）适当压缩图片、脚本及样式等网页静态资源。 CSS雪碧图、base64内联图片 将站内小图标合并成一张图，使用css定位截取对应图标；适当使用内联图片。 样式置顶、脚本置底 页面是一个逐步呈现的过程，样式置顶能更快呈现页面给用户；<script> 标签置顶会阻塞页面后面资源的下载。 使用外链的css和js 多个页面引用公共静态资源，资源复用减少额外的http请求。 避免空src的图片 避免不必要的http请求。 <!-- 空src的图片依然会发起http请求 --> <img src=http://www.jb51.net/web/"" alt="image" /> 避免在html中缩放图片 图片尽量按需求使用指定规格的尺寸，而不是加载一张大图片再将它缩小。 <!-- 实际图片尺寸为600x300，在html中缩放为了200x100 --> <img src=http://www.jb51.net/web/"/static/images/a.png" width="200" height="100" alt="image" /> Preload预加载 给link标签的rel设置preload属性，可以让浏览器在主渲染机制介入前就预加载资源。这种机制可以更早的获取资源且不阻塞页面的初始化。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link ref="preload" href=http://www.jb51.net/web/"style.css" as="style"> <link ref="preload" href=http://www.jb51.net/web/"main.js" as="script"> <link ref="stylesheet" href=http://www.jb51.net/web/"style.css"> </head> <body> <script src=http://www.jb51.net/web/"main.js"></script> </body> </html> 例子中预加载了css和js文件，在之后的页面渲染中，一旦使用它们就会立即调用。 可指定as的类型加载不同类型的资源。 style script video audio image font document ... 该方式也可跨域预加载资源，设置crossorigin属性即可。 <link rel="preload" href=http://www.jb51.net/web/"fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> CSS 选择器 选择器的优先级从高到低排列为： ID选择器 类选择器 标签选择器 相邻选择器 h1 + p{ margin-top: 15px; } 选择紧接在h1元素后出现的段落，h1和p元素拥有共同的父元素。 子选择器 h1 > strong {color:red;} 后代选择器 h1 em {color:red;} 通配符选择器 属性选择器 *[title] {color:red;} img[alt] {border: 5px solid red;} 伪类选择器 选择器使用经验： 优先选择类选择器，可替代多层标签选择器； 慎用ID选择器，虽然它效率高，但是在页面中是唯一的，不利于团队协作和维护； 合理利用选择器的继承性； 避免css表达式。 减少选择器的层级 建立在上一条选择器的优先级之上，应尽量避免多层次的选择器嵌套，最好不要超过3层。 .container .text .logo{ color: red; } /*改成*/ .container .text-logo{ color: red; } 精简页面样式文件，去掉不用的样式 浏览器会进行多余的样式匹配，影响渲染时间，另外样式文件过大也会影响加载速度。 利用css继承减少代码量 利用css的可继承属性，父元素设置了样式，子元素就不用再设置。 常见的可以继承的属性比如：color，font-size，font-family等；不可继承的比如：position，display，float等。 属性值为0时，不加单位 css属性值为0时，可不加单位，减少代码量。 .text{ width: 0px; height: 0px; } /*改成*/ .text{ width: 0; height: 0; } JavaScript 使用事件委托 给多个同类DOM元素绑定事件使用事件委托。 <ul id="container"> <li class="list">1</li> <li class="list">2</li> <li class="list">3</li> </ul> // 不合理的方式：给每个元素都绑定click事件 $('#container .list').on('click', function() { var text = $(this).text(); console.log(text); }); // 事件委托方式：利用事件冒泡机制将事件统一委托给父元素 $('#container').on('click', '.list', function() { var text = $(this).text(); console.log(text); }); 需要注意的是，虽然使用事件委托时都可以将事件委托给document来做，但这是不合理的，一个是容易造成事件误判，另一个是作用域链查找效率低。应该选择最近的父元素作为委托对象。 使用事件委托除了性能上更优，动态创建的DOM元素也不需要再绑定事件。 DOMContentLoaded 可在DOM元素加载完毕（DOMContentLoaded）后开始处理DOM树，不必等到所有图片资源下载完后再处理。 // 原生javascript document.addEventListener("DOMContentLoaded", function(event) { console.log("DOM fully loaded and parsed"); }, false); // jquery $(document).ready(function() { console.log("ready!"); }); // $(document).ready()的简化版 $(function() { console.log("ready!"); }); 预加载和懒加载 预加载 利用浏览器空闲时间预先加载将来可能会用到的资源，如图片、样式、脚本。 无条件预加载 一旦onload触发，立即获取将来需要用到的资源。 图片资源预加载。（）。 基于用户行为的预加载 对于用户行为可能进行的操作进行判断，预先加载将来可能需要用到的资源。 当用户在搜索输入框输入时，预先加载搜索结果页可能用到的资源； 当用户去操作一个Tab选项卡时，默认显示其中一个，当要去点击（click）其他选项时，在鼠标hover时，就可先加载将来会用到的资源； 懒加载 除页面初始化需要的内容或组件之外，其他都可以延迟加载，如剪切图片的js库、不在可视范围的图片等等。 图片懒加载。（判断图片是否在可视区域范围内，若在，则将真实路径赋给图片） 避免全局查找 任何一个非局部变量在函数中被使用超过一次时，都应该将其存储为局部变量。 （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |