随笔- 4  文章- 18  评论- 12  [译]作为一个web开发人员,哪些技术细节是在发布站点前你需要考虑到的   前日在cnblogs上看到一遍文章<每个程序员都必读的12篇文章>,其中大多数是E文的. 先译其中一篇web相关的”每个程序员必知之WEB开发”. 原文: http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-appli…

对自己无知这件事本身的无知真的挺可怕 认知偏差现象一直存在于我们每个人身上,谁也避免不掉,不过是有的人了解这件事儿,有的人不怎么知道而已,这就产生了「无知而不自知」的认知偏差.当然,这时候你自己忽悠自己倒没什么,顶多让自己每天感觉自己挺厉害的,沉浸于虚幻的优越感中,以为自己比大多数人都优秀,这倒不是一件什么坏事情,但是,如果你和别人沟通交流中展现出来,那挺可怕的,况且有时候你自己并不知道,达克效应(Dunning-Kruger Effect)描述的就是这种现象. 避免这种现象在自己身上的存在,没…

WEB应用上线程序员注意事项: 单元测试 前后端联调 界面和用户体验 DEBUG 性能 SEO 安全性…

作者:尚春链接:https://www.zhihu.com/question/38989845/answer/79201080来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 技术的复杂性也分两个维度:概念和实现.Vue.React.Angular 三者来说的话: 概念上:Vue ≍ React << Angular 实现上:Vue << React < Angular.React 的实现确实有些过度 三者有相通之处,例如组件化,这是大势所趋.三…

作为一个前端project师,那不只就是公开地处理那些美丽的html5, css3 和javascript特效.小而重要的一部分工作就是要让项目朝着代码稳定和代码标准方向进展.设计.信息结构以及后台限制都会成为我们设计出精致.简洁和无懈可击前端代码的绊脚石.以下将给大家提供3个实用的技巧,只是你要巧妙的运用,由于每一个技巧都是有使用范围的. 实际上,对于前端project师来说,影响项目的过程,那是相当困难的.这不是说我们的工作没有价值,而是我们得真正把问题给攻克了吗没有.仅仅要简单的混杂下cs…

web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识 ——不会WPO.SEO的前端工程师不是好码农 作为一名web前端工程师,除了要实现上级的要求,满足其所需要的功能,还要在平时代码编辑的习惯上考虑web性能优化以及SEO. 首先是为人处事的问题,凡事不要等别人说你了才知道做.我很喜欢那一句话:我们是人,不是奴隶,要有自主性. 这些基本的东西上级肯定会要求,与其留到领导跟你说的时候再改,不如一次到位.你耳根清净,他得闲考虑其他更有价值的问题. 旁言不做赘述,直奔主题. we…

    亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染)   react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载好,这较大程度地拖慢了首屏渲染速度.有一些方式能够较好地解决这个问题:   1.webpack的按需加载(代码分割)http://www.css88.com/doc/webpack2/guides/code-splitting/ (这与本篇文章没有太大关系,所以我只丢链接) 2.我们这篇文章提到的r…

一.清理垃圾代码 清理垃圾代码是指删除页面中的冗余代码,可以删除80%的冗余代码. 垃圾代码主要指那些删除了也不会对页面有任何影响的非必要代码. 最常见的垃圾代码,空格 空格字符是网页中最常见的垃圾代码.但并不是指标签,而是有代码编辑环境下敲击空格所产生的符号,每个空格相当一个字符,那么也就是说,一个页面,空格就占页面体积的15%,100K的页面,有15K是空格字符. 空格字符最常出现 在代码的开始和结束处,还有就是空行中. 这些都是容易产生垃圾代码的地方.消除这样的垃圾代码的方法就是选中代码然…

    亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染)   react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载好,这较大程度地拖慢了首屏渲染速度.有一些方式能够较好地解决这个问题:   1.webpack的按需加载(代码分割)http://www.css88.com/doc/webpack2/guides/code-splitting/ (这与本篇文章没有太大关系,所以我只丢链接) 2.我们这篇文章提到的r…

性能优化有很多方面:细节决定成败,系统慢是由一个又一个的小细节造成的,所以开发初期做好充足的准备,开发中认真负责,不偷工减料,维护期更注重代码质量,这样才会让我妈的系统稳定高效. 1.0 使用CDN(加快网页响应速度,提高用户体验) 2.0 减少HTTP请求数 3.0减少DNS查询 4.0避免重定向 5.0 图片懒加载和预加载(改善用户体验的策略,并不能提高性能,但是可以明显改善用户体验和减轻服务器压力) 6.0 减少DOM元素数量(这个针对HTML代码的质量) 7.0减少对DOM的操作 (针对…

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要考虑三方面: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加…

影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的. 除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这样才能给我们的用户带来更好的用户体验.不仅仅如此,如果前端优化得好,他不仅可以为企业节约成本,他还能给用户带来更多的用户,…

SEO是 search Engine Optimization   (搜索引擎优化) SEO: ①白帽SEO(普通SEO做的优化) 网站标题.关键字.描述 网站内容优化 Robot.txt文件 网站地图 增加外链引用 ②黑帽SEO 哥们你不做那种(嘻嘻)网站应该不太需要吧! 现在我说说前端工程师的SEO ①网站结构布局 扁平化结构 控制首页链接数量(中小型网站<=100) 目录层次不要太复杂(一般不要超过三层   三层之后基本很难被爬到啦) 根据内容使用合理的 HTML标签 面包屑导航( 有人问…

我知道,网站改版很是让人头疼.首先,这个过程需要很长时间还有大量工作要做,并且通常结果不会如你的预期.其次,改版确实有破坏之前为 SEO 所做努力的风险. 但不要因为通常网站改版带来排名下降就认为这是必然发生的.本指南,我们将着眼于采取一些步骤来确保让改版后的网站 SEO 情况更好,而非更糟. 在我们承诺开始网站改版之前,有一个问题你必须有一个明确的,肯定的的答案. 你的网站真的需要改版吗? 众所周知, 网页设计趋势变化很快, Web 2.0, 视差技术 , HTML 5 -不可能并且也没必要每…

1. 引言 SEO 即搜索引擎优化,很多web开发人员本应该熟悉,至少需要了解的一个知识点.像百度.必应等搜索引擎其实一直都在进化.但是有些优化的技巧可能在短时间内不变. 今天就给大家介绍几个专门针对Asp.net MVC网站的SEO技巧, 当然有些技巧也通用于其他website. 2.  SEO工具 首先介绍下一个 SEO 的一个小工具(SEO Toolkit),这个工具有点类似于一些分析exe程序性能的工具.但是不同的是它主要针对网站分析出哪些页面需要做SEO优化. 如果你已经有一个网站上线…

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加…

BigRender 当一个网站越来越庞大,加载速度越来越慢的时候,开发者们不得不对其进行优化,谁愿意访问一个需要等待 10 秒,20 秒才能出现的网页呢? 常见的也是相对简单易行的一个优化方案是 图片的延迟加载.一个庞大的页面,有时我们并不会滚动去看下面的内容,这样就浪费了非首屏部分的渲染,而这些无用的渲染,不仅包括图片,还包括其他的 DOM 元素,甚至一些 js/css(某些js/css 是根据模块请求的,比如一些 ajax),理论上,每增加一个 DOM,都会增加渲染的时间.有没有办法能使得…

说明 性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表: 配置信息缓存 artisan config:cache 路由缓存 artisan route:cache 类映射加载优化 artisan optimize   ,线上环境 php artisan optimize --force 自动加载优化 composer dumpautoload 使用 M…

一.选择器性能优化建议 1. 总是从#id选择器来继承 这是jQuery选择器的一条黄金法则.jQuery选择一个元素最快的方法就是用ID来选择了. 1 $('#content').hide(); 或者从ID选择器继承来选择多个元素: 1 $('#content p').hide(); 2. 在class前面使用tag jQuery中第二快的选择器就是tag选择器(如$(‘head’)),因为它和直接来自于原生的Javascript方法getElementByTagName().所以最好总是用t…

第6章影响 MySQLServer 性能的相关因素 前言: 大部分人都一致认为一个数据库应用系统(这里的数据库应用系统概指所有使用数据库的系统)的性能瓶颈最容易出现在数据的操作方面,而数据库应用系统的大部分数据操作都是通过数据库管理软件所提供的相关接口来完成的.所以数据库管理软件也就很自然的成为了数据库应用系统的性能瓶颈所在,这是当前业界比较普遍的一个看法.但我们的应用系统的性能瓶颈真的完全是因为数据库管理软件和数据库主机自身造成的吗?我们将通过本章的内容来进行一个较为深入的分析,让大家了解到一…

在上一篇文章<我是如何来做网站优化(Seo)的?(一)>讲述了网站优化几个注意项目. 在我们日常网站维护中,难免会使用到各种工具,文章的第二节我们就来讲讲这些工具. 网站提交通道 百度站长平台:百度站长工具,提供了用户提交Sitemap的功能,Ping服务,并给出了一些URL优化建议.网站安全检测工具. Google Tools:谷歌网站管理员工具,可以获取到谷歌抓取.编入索引和搜索流量的数据,同时接收关于用户网站上所存在的问题的通知. Bing Tools :微软必应网站管理员工具,获取到必…

1.前段性能的意义 对于访问一个网站,最花费时间的并不是后端应用程序处理以及数据库等消耗的时间,而是前端花费的时间(包括请求.网络传输.页面加载.渲染等).根据web优化的黄金法则: 80%的最终用户响应时间花在前端程序上,而其大部分时间则花在各种页面元素,如图像.样式表.脚本和Flash等,的下载上.减少页面元素将会减少HTTP请求次数.这是快速显示页面的关键所在. 根据著名的“2-5-8原则”,用户访问一个页面: 当用户能够在2秒以内得到响应时,会感觉系统的响应很快: 当用户在2-5秒之间得…

我猜你是在网络上搜索“ajax如何被搜索引擎收录”.“ajax SEO”.“ajax SEO友好”等关键词来到这里的.你可能已经很疲惫了,因为前段时间我也这样搜索,但是我发现搜索到的内容质量不高,有的只针对 google 的,有的不完整.但是,没关系.你只要再坚持一会,就可以真正找到解决方案了. 我们都知道当搜索引擎的蜘蛛爬行到你的站点,然后收录你站点的内容.但是蜘蛛不执行js,也就是说如果你站点的内容是通过ajax动态加载的,那么搜索引擎是不会收录到这部分的内容的.如果我们的站点非常多的内容是…

如何解决网站分页导致的SEO问题 分页(pagination)是一种自动分页机制,可以将移动Web窗体中的内容分割成一组组较小的页进行呈现,以适合于特定的设备,该机制还呈现可用于浏览到其他页的用户界面元素. 虽然说对于网站中出现的分页现象(如:栏目列表分页.文章内容分页),大家都习以为常了,感觉使用起来也很方便.但从网站优化的角度来说,网站分页还 是对SEO优化会产生一些负面影响,虽然这些影响可能对用户来说,不是很明显,但对于搜索引擎来说,这些负面影响还是会造成一定的障碍.那么到底网站分页 对网…

影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的. 除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这样才能给我们的用户带来更好的用户体验.不仅仅如此,如果前端优化得好,他不仅可以为企业节约成本,他还能给用户带来更多的用户,…

本系列目录 我们经常说"404错误",你知道他指的是什么意思么? 404其实是Http报头所包含的一个"状态码",表明该Http请求失败.那么除此之外,还有哪些常用的状态码呢?这些状态码和SEO又有什么关系呢? 每次当用户代理(可以理解为就是IE和Firefox)向Web站点请求一个URL地址,服务器都会给予回复,回复内容包括两部分:HTTP报头,和被请求的内容.但仅从浏览器上我们通常只能看到内容而看不到报头信息.所以,我们需要通过一些浏览器插件来观察他们.就我个人…

1.请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行.而当我们请求的网页文件中有很多图片.CSS.JS甚至音乐等信息时,将会频繁…

我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可以打印出来或者设为桌面背景. 一.选择器性能优化建议 1. 总是从#id选择器来继承 这是jQuery选择器的一条黄金法则.jQuery选择一个元素最快的方法就是用ID来选择了. $('#content').hide(); 或者从ID选择器继承来选择多个元素: $('#content p').hid…

背景 HHVM 是 Facebook 开发的高性能 PHP 虚拟机,宣称比官方的快9倍,我很好奇,于是抽空简单了解了一下,并整理出这篇文章,希望能回答清楚两方面的问题: HHVM 到底靠谱么?是否可以用到产品中? 它为什么比官方的 PHP 快很多?到底是如何优化的? 你会怎么做? 在讨论 HHVM 实现原理前,我们先设身处地想想:假设你有个 PHP 写的网站遇到了性能问题,经分析后发现很大一部分资源就耗在 PHP 上,这时你会怎么优化 PHP 性能? 比如可以有以下几种方式: 方案1,迁移到性能…

Google Anlytics 分析代码是异步加载的,一般来讲不会影响网页性能,但是技术部的网页性能报告里老是提到ga.js的状态为Aborted,说明ga虽然是异步跟踪,但某些情况下对网页性能与加载时间确实存在影响   Google分析代码到底会不会影响网页性能?本地托管ga.js是否可行?本文提供本地服务器托管ga.js的基本思路与实现方法. Google Anlytics 分析代码是异步加载的,一般来讲不会影响网页性能,但是技术部的网页性能报告里老是提到ga.js的状态为Aborted.出…