介绍 最近开始刷一些书和题,此系列是介绍在读Web最佳实践的一些收获和体会. web前端发展现状 存在问题: 代码组织混乱 代码格式的问题突出 页面布局随意 网站整体性能差,没有意识到应用诸如缓存,动态加载,脚本压缩,图片压缩等提高性能技术 推荐做法: 压缩样式表和脚本文件 减少HTTP请求次数 简洁和符合W3C标准的HTML和CSS代码能减少浏览器解析的时间,加快渲染过程 页面请求数量越少,相对页面的加载速度更快 在JS代码中选择性能更好的实现方案,如延迟加载,动态加载等技术; 延迟加载 <s…

代码符合标准 标准的页面会保证正确的渲染 页面容易被搜索引擎搜索,提高搜索排名(SEO) 提高网站的易用性 网页更好维护和扩展(Validator,HTML Validator 属于Firefox插件) 停止使用不标准的标签和属性,简化HTML代码 标签没有实际意义,仅设置样式(不推荐使用) 不推荐使用blink,marquee 让HTML拥有更好的语义 移除不常用的HTML标签 样式和结构分离 HTML页面链接一个CSS(最优),提高加载速度 HTML内嵌CSS(单一页面最佳,减少加载CSS样…

1.对象的实质: 对象就是数据, 对象本身不包含方法, 但是对象有一个"指针"指向一个类, 这个类里可以有方法 2.反射是指在PHP运行状态中, 扩展分析PHP程序, 导出或者提取关于类.方法.属性.参数等的详细信息包括注释, 这种动态获取信息以及动态调用对象方法的功能称为反射API(get_object_vars.get_class等也可以实现但都不属于反射API), 可以查看Reflection系列函数 3.在PHP里遇到任何自身错误都会触发一个错误, 而不是抛出异常(对于一些情况…

Web 最佳实践   前端   选择器 尽量使用ID选择器 基于Id的选择器:先使用ID选择器定位,然后再使用find方法精确查找   // Fast: $( "#container div.robotarm" ); // Super-fast: $( "#container" ).find( "div.robotarm" ); 指定选择的上下文   // 劣质的代码:因为需要遍历整个DOM来找到.class $('.class'); // 高品…

自动排版有点乱,看着蛋疼,建议下载中文PDF版阅读或阅读英文原文. Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践.他们为此进行了 一系列的实验.开发了各种工具.写了大量的文章和博客并在各种会议上参与探讨.最 佳实践的核心就是旨在提高网站性能. Excetional Performance 团队总结出了一系列可以提高网站速度的方法.可以分为 7 大类 34 条.包括内容.服务器.cookie.CSS.JavaScript.图片.移动应用等七部分. 其…

Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎PageSpeedYSlow 摘要:前端的性能对于Web应用的用户体验来说非常重要.不要以为你的Web应用的性能已经足够好了,其实还会有很多可以提升的地方.本文将介绍Google和雅虎关于前端优化的最佳实践以及工具,你可以逐一检验你的Web应用. 前端的性能对于一个Web应用来说非常重要,如果一个Web应用的…

一.常用的前端文件的组织结构: 1.js (放置JavaScript代码) lib(放置框架JavaScript文件) custom.js 2.css(放置CSS样式代码) lib(放置框架CSS文件) images(放置用于样式中的背景图) reset.css( 统一元素默认样式的样式文件) custom.css(业务相关样式文件) 3.resource(放置页面图片文件以及其他类型资源文件) 4.index.html 代码文件整体按照文件类型的不同归类,同一类型的代码文件则需要安装具体的业务…

过滤.验证和转义数据 过滤数据 不要相信任何外部数据! 常见的有以下几种数据需要过滤:HTML,SQL查询,用户提交的信息(邮件地址.电话号码.身份证) HTML htmlentities() HTML Purifier library (https://github.com/ezyang/htmlpurifier) SQL queries PDO User profile filter_var(), filter_input() 验证数据 filter_var() FILTER_VALIDAT…

[编者按]本文作者为 Mathias Schäfer,旨在回顾在客户端大量使用JavaScript 的最佳 Web应用实践.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 对笔者来说,JavaScript 社区似乎已经陷入了一个时间扭曲隧道.我们现在进行的关于 JavaScript驱动(JavaScript-driven) Web 应用的讨论与2006年"Ajax"出现以及2012年JavaScript"单页应用"流行起来时的讨论如出一辙.只要我们站在巨人…

算起来至今,我进入软件开发行业已经有11年之久.从最初的研究人工智能,到后来的Web开发,控件开发,直到现在纯粹的Web前端开发.虽然没有大的作品问世,但也是勤勤恳恳,踏实做事,低调做人.从来不吹牛逼,不忽悠客户.从2011年起,开发培养一些新人或者实习生,把我的开发理念,做事方式也传递给了不少新人,这些人也逐渐成为了各公司的骨干. 除了一般的开发和培训新人之外,我也会写一些文章到公司的博客上.机缘巧合,有编辑找到我说希望我能出一本前端开发相关的书籍.起初我很纠结,因为自己的文采实在不行,后来想…

前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借助工具,不太容易按照既定的顺序来定义CSS属性,这是前端程序员很少给CSS样式属性排序的最主要原因. 尽管给CSS样式属性排序需要花费一些精力,但从代码的可读性和可维护性角度来考虑,这些付出还是值得的.如果CSS属性按照一定的规则排序,在开发过程中可以防止属性的重复定义,代码的检查者也能很清晰地查看…

引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了大家认可的技术文章,多篇文章也得到了编辑推荐.大家的认可也更激发了我写技术文章的热情,借助公司在博客园的账号葡萄城控件技术团队博客发布了多篇有关Web前端开发的文章,尤其是如下三篇前端开发最佳实践相关的文章引来了大家的热烈讨论: 前端代码标准最佳实践:javascript篇 前端代码标准最佳实践:C…

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

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

这个最佳实践是我目前人在做的一个站点,主要功能: oauth登录 发布文章(我称为"片段"),片段可以自定义一些和内容有关的指标,如“文中人物:12”.支持自定义排版.插图.建立相册. 多个片段可以组织在一起,形成"事件". 任意事件.片段都可以互相标记因果关系. 可以follow事件或者他人. 事件和片段模糊搜索. 我对目前前端框架的观点已在另一篇文章中讲过,这里只介绍一下目前实践的情况. 使用requirejs做模块化,上线时用r.js打包. 使用avalon做…

一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开发最佳实践>这本书的读后感,以及梳理这本书中比较有用的核心知识点 二.书之印象 <web前端开发最佳实践>其实说到底就是一本提高你的涉猎面的书籍,但是缺点就是这本书的标题是web前端开发最佳实践,但是其实也就是一些很基础的东西没有什么很高深的,所以前端最佳实践这个书名就是标题党,而且里面的东…

atitit. web 在线文件管理器最佳实践(1)--- elFinder 的使用流程解决之道 .打开浏览服务器文件夹java .net php 1. 环境:::项目java web,需要打开浏览服务器文件夹挑选文件,在返回... 1 2. 在线文件管理器要实现的基本的功能::指定开始目录,指定getfile回调 1 3. 组件选型:: elFinder (3M) ,,php web ftp 1 4. elFinder 的概念 1 5. elFinder  1.x 的使用过程 2 6. elF…

这两本书就一块儿搞了,大多数已经理解,简单做个标记.主要对自己不太了解的地方,做一些记录.   一.读<高性能网站建设指南> 0> 黄金性能法则:只有10%~20%的最终用户响应时间花在了下载HTML文档上.其余的80%~90%时间花在了下载页面中的所有组件上. 1> 尽量减少HTTP请求 2> 使用CDN 3> 添加Expires头 4> 采用Gzip压缩组件 5> 将样式表放在顶部 6> 将脚本放在底部 7> 避免CSS表达式 8> 使…

原文链接:http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_server_mobile.html Web 前端优化最佳实践最后一部分是针对移动应用的,其实只是针对 iPhone 的,目前只有两条规则. 1. 单个数据对象小于 25K (Keep Components under 25K) 这个似乎只是针对 iPhone 研究的.建议保持单个 Web 数据对象在 25 K 以下.为什么是 25K? Apple…

一.前言 在目前的移动应用开发大潮下,使用web技术进行移动应用开发正变得越来越流行,它主要使用html5.css3.js等技术,在跨平台性.可移植性方面具有无可比拟的优势,特别适合开发对性能要求不太高.项目不太庞大的应用.这对于有过web经验及刚入门移动应用的同学来说,绝对是福音. 接下来的几篇文章主要介绍使用web技术进行移动应用开发时,应遵循的一些‘最佳实践’.这里所说的最佳实践其实就是一些建议,它可以让你的程序更加高效,涉及到代码风格.标准等,例如缩进.空格.行宽.命名.代码样式.变量声…

Spring是个非常非常非常优秀的java框架,主要是用它的IOC容器帮我们依赖注入和管理一些程序中的Bean组件,实现低耦合关联,最终提高系统可扩展性和可维护性,用它来辅助我们构建web工程将会感觉非常非常非常地愉悦. Spring旗下的Spring MVC又是后来居上,设计得非常非常非常的优雅,可以用来替代Struts来做界面视图的控制(Controller)等. 现在我们就来搭建一个利用Spring和Spring MVC结合的web工程最佳实践的例子.以Spring Framework 4…

web性能权威指南 page 203 经典的性能优化最佳实践 无论什么网络,也不管所用网络协议是什么版本,所有应用都应该致力于消除或减 少不必要的网络延迟,将需要传输的数据压缩至最少.这两条标准是经典的性能优 化最佳实践,是其他数十条性能准则的出发点. 减少DNS查找 每一次主机名解析都需要一次网络往返,从而增加请求的延迟时间,同时还会阻 塞后续请求. 重用TCP连接 尽可能使用持久连接,以消除 TCP 握手和慢启动延迟;参见 2.2.2 节“慢启动”. 减少HTTP重定向 HTTP 重定向极费…

Web前端开发最佳实践(1):前端开发概述 Web前端开发最佳实践(2):前端代码重构 Web前端开发最佳实践(3):前端代码和资源的压缩与合并 Web前端开发最佳实践(4):在页面中添加必要的meta信息 Web前端开发最佳实践(5):正确闭合HTML标签,停止使用不标准的标签和属性 Web前端开发最佳实践(6):过时的块状元素和行内元素 Web前端开发最佳实践(7):使用合理的技术方案来构建小图标 Web前端开发最佳实践(8):还没有给CSS样式排序?其实你可以更专业一些 Web前端开发最佳…

前言 这篇文章本应该在上一篇文章:使用更严格的JavaScript编码方式,提高代码质量之前发布,但当时觉得这篇文章太过基础,也就作罢.后来咨询了一些初级的开发者,他们觉得有必要把这篇文章也放上来.尽管这篇文章内容基础,但是很多初中级开发者还是会犯同样的错误,发布出来也算是再一次提醒. 良好的编码习惯,这是每个程序员应具备的最基本素质.无论是前端程序员还是后端程序员,都要遵循基本的规范,减少因代码混乱而造成难以维护的局面.要做到不管有多少人共同参与同一个项目,一定要确保每一行代码都像是同一个人编…

前言 JavaScript语言由于其固有的灵活性,所以导致开发者可以写出很多诡异的代码,甚至一些较为正常的特性,如类型隐式转换.this的指代等等,也会让刚接触此语言的开发者头大不已.尤其是那些熟知其他诸如Java和C#等高级语言的开发者.使用更严格的编码方式,可以最大量避免 启用严格模式 随着JavaScript的发展,开发者及规范制定者也意识到了JavaScript语言本身的一些设计缺陷,所以在ECMAScript5中引入了严格模式.设立严格模式的目的主要是为了消除JavaScript语法上…

前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大小的手段.以下将讨论CSS代码相关的代码精简方案. 定义简洁的CSS规则 CSS的每条规则中都包含了规则的属性及属性值.定义简洁的CSS规则主要是指合并相关规则和定义简洁的属性值. 1. 合并相关CSS规则 CSS中的某些样式是由多个规则组成的,比如字体样式,就包含:font-family.font…

大家都对网站上使用的小图标肯定都不陌生,这些小图标作为网站内容的点缀,增加了网站的美观度,提高了用户体验,可是你有没有看过在这些网站中使用的图标都是用什么技术实现的?虽然大部分网站还是使用普通的图片实现,不过可供使用的技术方案还不少,这些都归功于新的Web技术的应用. 常见的小图标应用方案 1. 最简单的还是图片,图片 这个方案是使用最广的方案,简单有效.jQuery UI使用的就是这样的方案.jQuery UI是把所有需要用到的小图标放置在一张大的sprite图片中,类似如下的图片: 用法也很…

简评:8102 年了,现在 web 开发的最佳实践是什么,让本文来告诉你.原文只提到一部分,可以查看 reddit 上对此文的评论查看补充的最佳实践 https://old.reddit.com/r/programming/comments/98geji/how_to_design_for_the_modern_web/ 让用户知道你有 app 当用户(用手机或平板)访问你的网站时,必须做的第一件事就是向他们展示一个大模态框,告诉他们应该安装 app 而不是继续访问. 一个小技巧是让关闭模态框的…

前言 代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来确保重构后的代码逻辑,可对于普遍缺乏自动化测试的前端代码来说,重构之前一定要考虑再三才能下手. 有效地重构代码 我曾经有一次不算太成功的前端重构经历,所幸的是没有导致太大的问题,但教训是惨痛的.此次重构的项目本身没有足够的自动化测试,尤其是针对前端的自动化测试,所以在重构之前也预想到了重构的风险.先…

meta标签放置在HTML页面的head中,主要用于标识网站.其中基本上包含了网站的一些描述信息,例如,简介.作者等.这些信息有助于搜索引擎更准确地识别网页的内容,也有助于第三方工具抓取网站基本信息. 按照W3C的标准介绍,<meta>标签有四个属性:name.http-equiv.content和charset.<meta>标签通过name属性来表述页面文档的元信息,通过http-equiv属性设置HTTP请求指令,通过charset设置页面的字符编码.所以从属性设置分类,met…