篇一：WEB前端开发经验总结

发布时间：20xx-04-20 09:05:33 来源：作者：shengman 点击：21015

这里跟大家谈谈个人对WEB前端开发的一些经验（当然都是个人的一些理解，有什么地方说的欠妥或不对的地方还请包含和指正），这里我就从WEB标准开始吧。

WEB标准是什么？

说是WEB标准，不过我这里主要是对XHTML1.1 和 CSS2.1的一些经验总结。因为WEB含盖的内容实在是太多了，“WEB标准”是一系列标准的总称，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以这里要跟大家指出来一下，WEB标准不是我们所说的DIV+CSS。刚刚上面提到了――DIV+CSS，这里要说明下，这样说其实是不正确的。DIV+CSS准确的说法（个人的理解）应该是：采用W3C推荐的WEB标准中的XHTML1.1结合CSS2.0样式表制作页面的方法，DIV应该指的是XHTML标签，而CSS显示是指的CSS样式表了。

采用WEB标准开发的好处

那么W3C为什么会推荐这样的页面制作方法呢？下面我们就简单的看看采用WEB标准开发（个人理解的）相对以前TABLE布局的优势有哪些？

1、节约运营成本

看看我们的WEB标准制作方法是如何做到的？

采用WEB标准制作，我们可以做到表现很形式的分离，我们用XHTML来表现（数据），用CSS来控制（页面元素呈现的）形式。写的好的页面，XHTML代码中基本上都是用户要看的数据，还其他修饰性的东西，全部由我们的CSS来控制。这样一来我们的（XHTML）页面的体积就大大减小了，这样你在带宽上的费用就会大家降低了，这个怎么降低的，你可以想象一下，YAHOO的首页小1K，100W个人一起访问，那么带宽节约了多少？而且可以更充分的利用带宽。

而我们的CSS控制了，所有的页面元素的样式，现在想改网站的整体风格，你只需要花几分钟修改一下一个CSS文件，就可以轻松搞定了。维护的成本也下来了，省了不少钱了吧？还有，你开这个页面的速度会快很多啊，一个让你等半分钟的页面，除非里面的信息对你很有用，不然我们大家基本都没有太多的时间去用来等待的。

…… …… 余下全文

篇二：一些前端开发优化的经验总结

一些前端开发优化的经验总结

发现的一篇关于前端优化的文章，总结的很全面，要做到面面俱到很难，往往是想优化而没有时间去优化，就像我们公司，一个项目连着一个项目~新员工的培训都省了，还想优化前端啊，不过我真的想有机会和老大好好的整合下公司网站的前端代码~不过要把前端优化的工作放在平时的写代码中去，就不需要刻意的后期优化了。在项目开发中，后台需要搭建好框架，前端更是需要搭建好框架，并且在页面实现中得到实现，只有这样才能事半功倍。

前段时间简单的研究了下前端优化相关的知识，本文算是一个阶段性的总结，或者当做一个优化的参考List。

前言

前端是庞大的，包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么？

1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。

2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等；第二类则是代码级别的优化，例如Javascript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。

一、页面级优化

1. 减少HTTP请求数

这条策略基本上所有前端人都知道，而且也是最重要最有效的。都说要减少HTTP请求，那请求多了到底会怎么样呢？首先，每个请求都是有成本的，既包含时间成本也包含资源成本。一个完整的请求都需要经过DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个“漫长”而复杂的过程。时间成本就是用户需要看到或者“感受”到这个资源是必须要等待这个过程结束的，资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。另外，由于浏览器进行并发请求的请求数是有上限的(具体参见此处)，因此请求数多了以

…… …… 余下全文

篇三：网易财经前端开发总结

20xx-02-26 10:11 jaycie 博客园我要评论(0) 字号：T | T

众所周知，http请求是要开销的，减少请求数可以提高网页加载速度。常用的方法，合并css，js以及 Image maps和css sprites等。笔者所在团队的做法是根据功能分开开发，然后通过内部系统对js，css进行分组合并。

AD： 20xx云计算架构师峰会超低价抢票中

作为门户网站的前端，有许多说不出的苦楚：有些代码虽然自己也看不下去，但还是不得不硬着头皮把页面给拼上去，比如跟其他频道公用的部分：因为是公用，js、css必须写在该部分，调用的js库(网易的很多频道头部都调用了两个大同小异的js库)等都身不由己。而且作为财经门户来说，页面分多屏是显然的、再者N多异步请求的数据(股票数据要及时更新)、画股票行情图等，对于前端的性能都是极大的考验。笔者用YSlow去测评了一下各大门户的财经频道，网易财经得了个C，而老东家新浪为F，腾讯、搜狐财经都D(测试时间为xx年x月x日)，这点还是挺庆幸的，哈....

好了，废话不多说，下面笔者就yahoo的14条军规来总结一下网易财经的前端开发工作：

1、Make Fewer HTTP Requests

众所周知，http请求是要开销的，减少请求数可以提高网页加载速度。常用的方法，合并css，js以及 Image maps和css sprites等。笔者所在团队的做法是根据功能分开开发，然后通过内部系统对js，css进行分组合并，这样对于浏览器来说是一个请求，但是开发时仍然能还原成多个，方便管理和重复引用。值得一提的是，网易内部的前端代码发布系统是很值得学习、借鉴的，对于fiddler调试和性能优化工作很是方便，这里不方便透露更多，有兴趣的单独聊，哈。而css sprites是指只用将页面上的背景图合并成一张，然后通过background-position来取背景。这里笔者并不提倡看到像图片的都用图片来处理，就该项目的

…… …… 余下全文

篇四：移动平台前端开发总结

移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解，需要对HTML5和CSS3有一定的了解。

1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用

(1)<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />

(2)<meta content="yes" name="apple-mobile-web-app-capable" />

(3)<meta content="black" name="apple-mobile-web-app-status-bar-style" />

(4)<meta content="telephone=no" name="format-detection" />

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。

第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

…… …… 余下全文

篇五：前端开发经典问题总结

1、text-shadow:2px 2px 2px #f00;

text-shadow（文字的影子）{x轴（向右为正） y轴（向下为正晕（模糊宽度没有负值） #ff00（影子颜色）}

浏览器兼容：Firefox，Opera，Chrome，Safari

box-shadow: （盒子的影子）{x轴（向右为正） y轴（向下为正晕（模糊宽度没有负值） #ff00（影子颜色） inset（内部的效果）}

可以只写x,y,color inset;另一种x,y ,blur,spread,color,inset；

不可以x,y,blur/spread,color,inset

2、border-radius（圆

角）:50px;=={border-top-left-radius:50px;border-top-right-radius:50px;border-bottom-left-radius:50px;border-bottom-right-radius:50px;}

浏览器兼容：IE9，Firefox 4+，Chrome，Safari 5+，Opera

body设置宽度对背景图片没影响

body{

margin:0 auto;

width:960px;

color:#352;

font:14px/20px "微软雅黑";

background:#352 url('../images/bg.jpg') fixed center no-repeat;}

body>header{font-size:18px;} body下的子header not孙子例子

<body>

…… …… 余下全文

篇六：WEB前端开发经验总结

ASP.NET前端开发经验总结

通过此次大作业的设计到完成，我负责的是web前端的开发，经过此次作业和结合W3C上的自学，我渐渐有了一些对前端开发的小小经验（仅为个人意见）。 WEB标准是什么？

说是WEB标准，不过我这里主要是对HTML5 和 CSS3.0的一些经验总结。因为WEB含盖的内容实在是太多了，“WEB标准”是一系列标准的总称，包括HTML5.0、HTML4.0、XHTML1.1、CSS3.0、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以这里要跟大家指出来一下，WEB标准不是我们所说的DIV+CSS。

刚刚上面提到了――DIV+CSS，这里要说明下，这样说其实是不正确的。DIV+CSS准确的说法（个人的理解）应该是：采用W3C推荐的WEB标准中的HTML5结合CSS3.0样式表制作页面的方法，DIV应该指的是HTML标签，而CSS显示是指的CSS样式表了。

采用WEB标准开发的好处

那么W3C为什么会推荐这样的页面制作方法呢？下面我们就简单的看看采用WEB标准开发（个人理解的）相对以前TABLE布局的优势有哪些？

1、节约运营成本

看看我们的WEB标准制作方法是如何做到的？

…… …… 余下全文

篇七：web前端开发知识点总结

HTML知识总结 span行级元素，多个同行块级元素，独占一行

块级元素，前后

保留一行

标题标签，h1~h6表6个等

级，加粗，前后保留一行

width：设置宽

度

height：设置高

度

alt：图片加载失

败显示的文本div文本类ph图片标签img

color：颜色

水平线

常用标签hrsize：高度（粗细）

width：宽度

（长度）

herf：超链接转

到的地址

超链接a

target_self:默认值，在当前页面打开

_blank:在新窗口

打开

带标题的框fieldsetlegend设置标题

disc：实心圆

无序列表

列表标签

有序列表ulsquare：小方块olcircle：空心圆

tr表示行th表示标题单元格，居中、加粗td

表格标签<table>caption表示一个单元格表示标题，定义在

第一行，居中

rowspan设置单元格占的行

数

colspan设置单元格占的列

数

action表单提交地址

get：显示提交参数，将参数用?和&拼接到url上

带到服务器端

method

post：隐式提交参

数

optgroup 表示分组,分组不能选,只能选分组中的option

下拉菜单<select>

<option>selected默认选中

multiple 设置下拉菜单为多选模式

表单项<form>

rows: 显示文本的行数(高度)

文本域<textarea>

cols: 显示文本的列

数(宽度)

name：参数名size：显示字符长度（控制文本框长

度）

maxlength：最大可

输入字符数

input文本框type=“text”placeholder：提示

内容

disabled：不会被提交到服务器readonly：只读（会被提交到服务

…… …… 余下全文

篇八：前端开发面试问题总结

前端开发面试问题总结

May 28, 2015

对于前端开发人员的招聘，面试是非常关键的环节，而现实的情况是，很多招聘者是开发出身，不会面试，不知道问什么，问了一些常规问题，又不知道考察些什么。

这里分享一下我在面试过程中常问的一些问题（很多问题不仅限于前端开发），注意很多问题都是开放的，作为一个面试官，不要试图准备几个选择题或填空题应付了事，面试不同与笔试，面试就是要以交流为主，互动讨论总是要比直接的答案更能体现此人的能力。

我个人认为，任何时候，考察一个应聘者，综合素质要优先于他的技术能力，做开发不是做航天飞船，一般智商不低的人通过学习都可以胜任大部分工作，关键的是人品、工作态度、分析能力、学习能力，这些都是与生俱来或潜移默化形成的，是很难通过学习获得的，它们要比现有的技术经验和技术能力更重要。

? 今天天气还不错，你是怎么过来的？

? 大概用了多久，离得远么？

? （如果远的话）是自己的房子还是租的房子？经常这样远距离上班可以适应么？

缓解一下应聘者的紧张感，让他尽快进入状态，并能了解出行方式、大概的远近。有时候工作地点远近还真是大问题，即使应聘者可以接受，但是上班时间超过1个半小时的员工幸福感和工作效率会较低，流失率会比较高。

? （用3分钟时间）简单做个自我介绍吧？

自我介绍是关键的环节，连自我介绍都说不好，说明对待面试和职业的态度很差。可以加上时间限制，或者让应聘者自由发挥，看看他把握重点的能力和控制时间的能力。自我介绍一般来说应该包含年龄，籍贯，毕业院校、专业和时间，工作过的公司和时间，主要的项目，担当的职务，用到的技术，擅长的技术等。

? 详细介绍一个对你影响比较大的项目？

? 对于你刚才说的xxx项目，我很感兴趣，你能详细说一说么？ ? 这个项目主要是解决什么问题/完成什么事情？

? 你在这个项目里的职责是什么/做了哪些事情？

…… …… 余下全文

前端开发工作总结