Web 前端最佳实践

Web 最佳实践


前端

选择器

  • 尽量使用ID选择器
  • 基于Id的选择器:先使用ID选择器定位,然后再使用find方法精确查找
  1. // Fast:
  2. $( "#container div.robotarm" );
  3. // Super-fast:
  4. $( "#container" ).find( "div.robotarm" );
  • 指定选择的上下文
  1. // 劣质的代码:因为需要遍历整个DOM来找到.class
  2. $(‘.class‘);
  3. // 高品代码:因为只需在指定容器范围内进行查找
  4. $(‘.class‘, ‘#class-container‘);

这一条是否有上一条等同?

  • 多级查找:右边尽量指定得详细点而左边则尽量简单点
  1. // Unoptimized:
  2. $( "div.data .gonzalez" );
  3. // Optimized:
  4. $( ".data td.gonzalez" );
  • 避免冗余
  1. $( ".data table.attendees td.gonzalez" );
  2. // Better: Drop the middle if possible.
  3. $( ".data td.gonzalez" );
  • 不要ID与其它选择器混搭 
    ID已经表示唯一了,再加上其它选择符只会加重选择器的负担
  1. $(‘#outer #inner‘); // 脏
  2. $(‘div#inner‘); // 乱
  3. $(‘.outer-container #inner‘); // 差
  4. $(‘#inner‘); // 干净利落,后台只需调用document.getElementById()
  • 不要使用万能选择器
  1. $( ".buttons > *" ); // Extremely expensive.
  2. $( ".buttons" ).children(); // Much better.
  3. $( ".category :radio" ); // Implied universal selection.
  4. $( ".category *:radio" ); // Same thing, explicit now.
  5. $( ".category input:radio" ); // Much better.

Dom 操作

  • 避免DOM节点频繁流化

    样本代码

    1. $.each( myArray, function( i, item ) {
    2. var newListItem = "<li>" + item + "</li>";
    3. $( "#ballers" ).append( newListItem );
    4. });
    • 方法一: 临时detach

      1. var ballers = $("#ballers");
      2. var parent = ballers.parent();
      3. ballers.detach();
      4. $.each(myArray, function(i, item) {
      5. var newListItem = "<li>" + item + "</li>";
      6. ballers.append(newListItem);
      7. });
      8. parent.append(ballers);
      9. var table = $( "#myTable" );
      10. var parent = table.parent();
      11. table.detach();
      12. // ... add lots and lots of rows to table
      13. parent.append( table );
    • 方法二:创建临时DOM节点
      1. var frag = document.createDocumentFragment();
      2. $.each( myArray, function( i, item ) {
      3. var newListItem = document.createElement( "li" );
      4. var itemText = document.createTextNode( item );
      5. newListItem.appendChild( itemText );
      6. frag.appendChild( newListItem );
      7. });
      8. $( "#ballers" )[ 0 ].appendChild( frag );
    • 方法三:append html
      1. var myHtml = "";
      2. $.each( myArray, function( i, item ) {
      3. myHtml += "<li>" + item + "</li>";
      4. });
      5. $( "#ballers" ).html( myHtml );
  • 临时改变多个节点样式
  1. // Fine for up to 20 elements, slow after that:
  2. $( "a.swedberg" ).css( "color", "#0769ad" );
  3. // Much faster:
  4. $( "<style type=\"text/css\">a.swedberg { color: #0769ad }</style>")
  5. .appendTo( "head" );
  6. //预定义css类会更好
  7. // .swedberg_color{color:#0769ad}
  8. $( "a.swedberg" ).addClass("swedberg_color" );

CSS

JS 编码

  • 代码组织

    • 链式写法要换行

      1. $("#myLink")
      2. .addClass("bold")
      3. .on("click", myClickHandler)
      4. .on("mouseover", myMouseOverHandler)
      5. .show();
    • 链式写法中避免使用匿名函数,否则会严重影响代码易读性
    • 使用变量保存选择器结果方便重用
      1. //bad
      2. $("#myLink").addClass("bold");
      3. //stuff
      4. $("#myLink").on("click", myClickHandler)
      5. //better
      6. var myLink=$("#myLink").addClass("bold");
      7. //stuff
      8. myLink.on("click", myClickHandler)
    • 利用闭包保持代码整洁
      1. //bad
      2. var privateThing = "secret";
      3. var publicThing = "not secret";
      4. var changePrivateThing = function() {
      5. privateThing = "super secret";
      6. };
      7. var sayPrivateThing = function() {
      8. console.log( privateThing );
      9. changePrivateThing();
      10. };
      11. sayPrivateThing();
      12. //better
      13. var feature = (function() {
      14. // Private variables and functions
      15. var privateThing = "secret";
      16. var publicThing = "not secret";
      17. var changePrivateThing = function() {
      18. privateThing = "super secret";
      19. };
      20. var sayPrivateThing = function() {
      21. console.log( privateThing );
      22. changePrivateThing();
      23. };
      24. // Public API
      25. return {
      26. publicThing: publicThing,
      27. sayPrivateThing: sayPrivateThing
      28. };
      29. })();
      30. feature.sayPrivateThing();
  • 利用“事件冒泡”机制进行事件绑定
  1. //bad
  2. $(‘ul>li‘).on(‘click‘,clientHandler);
  3. //better
  4. $(‘ul‘).on(‘click‘,‘li‘,clientHandler);
  • 数组循环中不要每次循环都访问数组的长度,应该先缓存长度
  1. //好的写法
  2. var myLength = myArray.length;
  3. for ( var i = 0; i < myLength; i++ ) {
  4. // do stuff
  5. }
  6. //好的写法
  7. for ( var i = 0,myLength=myArray.length; i < myLength; i++ ) {
  8. // do stuff
  9. }
  10. //差的写法
  11. for ( var i = 0; i < myArray.length; i++ ) {
  12. // do stuff
  13. }
  • 其它
  1. //bad
  2. // 糟糕:调用了三次attr
  3. $myLink.attr("href", "#").attr("title", "my link").attr("rel", "external");
  4. //better
  5. // 不错,只调用了一次attr,css函数与此类似
  6. $myLink.attr({
  7. href: "#",
  8. title: "my link",
  9. rel: "external"
  10. });

参考

jQuery 优化

+

时间: 2024-10-11 23:47:33

Web 前端最佳实践的相关文章

javascript基础-《web前端最佳实践》

先贴代码 1 <form action=""> 2 <p> 3 <label for="x">Number:</label> 4 <input id="x" name="x" type="number" /> 5 </p> 6 <input id="submit" type="submit"

Google Web开发最佳实践(一)

这篇文章最初是在阿里通信前端团队的github博客(http://aliqin.github.io)上看到的,原文地址https://developers.google.com/web/fundamentals/(要翻墙).既然要去阿里了,就得先熟悉熟悉环境,既然是最佳实践,就得自己亲自实践一下. 1.创建网站的内容和结构 内容是任何网站最重要的部分.所以让我们为内容而设计,而不要让设计支配内容.在这个手册中,我们首先确定我们需要的内容,基于这个内容创建一个页面结构,然后在简单的线性布局里呈现页

[转]ASP.NET Core Web API 最佳实践指南

原文地址: ASP.NET-Core-Web-API-Best-Practices-Guide 转自 介绍# 当我们编写一个项目的时候,我们的主要目标是使它能如期运行,并尽可能地满足所有用户需求. 但是,你难道不认为创建一个能正常工作的项目还不够吗?同时这个项目不应该也是可维护和可读的吗? 事实证明,我们需要把更多的关注点放到我们项目的可读性和可维护性上.这背后的主要原因是我们或许不是这个项目的唯一编写者.一旦我们完成后,其他人也极有可能会加入到这里面来. 因此,我们应该把关注点放到哪里呢? 在

[WebView学习之六]:Web Apps最佳实践规则

上一篇我们学习了([WebView学习之五]:调试Web Apps),今天我们来继续学习. (博客地址:http://blog.csdn.net/developer_jiangqq),转载请注明. Author:hmjiangqq Email:[email protected] 为移动设备开发Web页面以及Web应用程序(Application)和开发传统的桌面Web浏览器相比存在一些不同的地方以及难点.为了帮助你更好的开发以及为移动设备开发出更加有效的Web应用程序,以下讲到的开发实践规则将会

前端最佳实践001

1.在页面加载完成执行多个函数 不能实现的做法如下 function f1(){console.log(1);}; function f2(){console.log(2);}; window.onload=f1; window.onload=f2; //结果2 f2覆盖了f1 应该这样做: function f1(){console.log(1);}; function f2(){console.log(2);}; window.onload=function(){f1();f2();}; 2

响应式web设计最佳实践

响应式设计分2种: 响应式一:小尺寸,大尺寸设备展示的内容,结构没多大差别,布局差异不大(仅仅只是横竖摆放及个数问题而已). 响应式二:小尺寸设备和大尺寸设备展示的内容结构差别很大,布局差异大,html结构变化大,比如tmall. 针对以上2种情况,使用不同的响应式设计 响应式一解决方案: 1,共用统一套html 2,使用media query加载不同的css样式:small.css, large.css.其中small.css和large.css又分别是响应式 3,图片资源动态加载节省流量:使

ASP.NET Core Web API 最佳实践指南

https://www.cnblogs.com/hippieZhou/p/11966373.html 原文地址: ASP.NET-Core-Web-API-Best-Practices-Guide 原文地址:https://www.cnblogs.com/94cool/p/12388416.html

Web前端优化最佳实践及工具集锦

前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快.对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升.下图显示了页面加载速度对于用户体验的影响. 你的Web页面的速度是否已经足够快了?其实可能还有很多可以提升的地方.Google和雅虎也提出了一些Web应用的前端优化建议,并发布了一些工具,你可以逐一检验你的Web应用,以便达到更高的性能. 这些优化不仅仅可以给用户提供更好的体验,从开发者角度来说,进行优化还可以减少页面的请求数.降低请求所占的带宽.减少资

paip.前端加载时间分析之道优化最佳实践

1.另存为 ,查看文件尺寸..和图片. 2.view the 另存为的htm静态的文件单个的加载,看时间...可以排除编程语言的问题and 数据库.. ##页面加载速度对于用户体验的影响. 1秒内,最好的.. 5秒, >>5秒 ,坏的.. ##index 一.Google的Web优化最佳实践 二.雅虎的Web优化最佳实践 2. 服务器优化 4. CSS优化 5. JavaScript优化 作者 老哇的爪子 Attilax 艾龙,  EMAIL:[email protected] 转载请注明来源