百度技术的博客_前端技术

前端重构实践（二） —— 模块化开发

在上一篇文章中我介绍了我们对N产品性能优化的整个历程，主要偏重优化方法。本篇我将介绍在这一过程中，我们的代码出现了什么样的问题，以及我们是如何通过前端重构来解决掉这些问题，并产生了哪些收益。

性能

前端

js代码压缩

原创 2012-10-22 15:08:40 2127 阅读

前端重构实践（一） —— 性能优化

前言：最近一直在做性能优化和模块化改造的工作，并完成了一次前端重构。在这里总结出一些经验和得失来帮助大家思考。共两篇文章，第一篇讨论性能优化，第二篇讨论模块化框架。而之所以把这两个话题放到一起，是因为这两项工作都涉及到对前端代码进行不同程度的重构，而且模块化改造其实是我们在对性能优化做到一定程度之后发现必须要做的一件事情。本篇是性能优化的部分，下面我把我们的产品简称为N页面。

性能

前端

js代码压缩

原创 2012-10-22 14:53:12 1625 阅读

WEB交互的划时代革新--HTML5中WebSocket应用【1】

最近在考虑把项目中的通知模块单独提取出来，做一些即时提醒，快速响应。由于访问量大了之后，Ajax轮询的方式发送的请求数太过庞大，所以考虑使用WebSocket来缓解压力，当然了，WebSocket可以做的事情可不止这些，今天首先来在各个技术之间做个对比，看看它牛掰的地方，有个大体的认识。

职场

WEB

休闲

HTML5

原创 2012-03-30 12:46:00 2463 阅读

流量低峰也烦人-lighttpd耗时长问题追查

如果你用lighttpd1.5(以下lighttpd均指1.5)做静态文件服务器，或者你虽然用lighttpd处理php请求，但是用到$PHYSICAL作为mod_proxy_core的条件，且某个时候你的单机流量很低(几个/s), 或许你也有类似的问题，但是影响程度或许不会引起你的注意！

流量

休闲

lighttpd

流量低峰

耗时长

原创推荐 2012-02-07 10:02:26 3659 阅读 1点赞

CC-lib无线跨平台web页面自动化生成技术的设计实现

摘要：前端开发通常需要开发多套web页面代码，从而为不同的移动终端浏览器开发不同的web页面，例如低端手机需使用wml，高端手机则支持html和javascript等。本文介绍了一种跨平台web页面自动化生成技术，该技术利用php设计了一个中间层（CC-lib），可以屏蔽底层的web展示语言的差异，程序运行时动态生成各个UI组件的wml/xhtml/html代码，从而可以有效降低前端开发人员的页面开发维护成本。

无线

CC-lib

web前端

浏览器兼容

自动化生成

原创 2011-11-24 12:11:23 743 阅读

如何用 JS 实现 3D ×××效果

本文将分享如何用 JS 写出一个 3D 赛车，我之前曾在技术交流会上也讲过一次（这里是当时用的 PPT），后来有同学反馈说讲得太深奥没听懂。其实 PPT 里说的更多的是三维图形的基础知识，实现原理体现的稍微少一些，那么本文将着重从实现原理这块做一些补充。先看赛车的示例：http://ucren.com/racing/，还是半成品状态，很多功能没有实现，不过目前也没有后续的开发计划。

3D

实现

休闲

JS

赛车效果

原创 2011-11-01 05:11:55 2047 阅读

基于fiddler来模拟限速

适应读者 FE研发工程师对fiddler有基本了解的的同学对web性能优化感兴趣的同学

职场

限速

模拟

休闲

fiddler

原创 2011-11-01 05:11:06 3587 阅读 1点赞 1评论

JS 3D 模型

最近断断续续地写出了这么个东西：http://ucren.com/demos/d3d/index.html。这是一个简单的 JS 3D 模型，能跑在包括 IE6 的所有浏览器上，结合一下 tween 缓动算法，理论上已经可以完美模拟像 http://www.cu3ox.com/ 这个网站上方 banner 的各种变换效果了。介绍一下实现细节，矢量绘图仍然用的是 Raphael 库，Raphael 我在《如何用 JS 实现 3D 赛车效果》这篇文章里有过介绍。此外，我参考了大量关于三维透视的文章，在下面的一些实现上用到了很多相关知识。

职场

模型

JS

休闲

3D

原创 2011-11-01 05:11:02 2626 阅读

前端优化之图片优化自动化

前端图片优化介绍随着前端页面越来越复杂，尤其是一些社区型的页面中，图片成了页面中不可或缺的资源，并且随着产品功能的叠加图片大小越来越多。以下是几个网站的图片所占的比重。

优化

图片

休闲

前端

自动化

原创 2011-10-21 11:10:11 1072 阅读

Web server调研分析

摘要简单可依赖的架构首先需要有一个简单可依赖的前端WebServer集群。本文通过深入调研当前主流的异步web服务器Lighttpd和Nginx，从业界使用情况、架构原理、扩展开发、功能对比、性能对比等多个方面进行分析。调研分析

Web服务器

Firewall

Nginx

Lighttpd

Usertrack

原创 2011-10-10 03:10:59 2815 阅读

Html5很给力——代码可实现的视觉效果

“Html5”一出生就伴随着各种争论，不过有几个业界大佬的保驾护航、极力推动，相信随着支持webkit浏览器的普及，HTML 5会越来越普及、越来越强大，一定是必然趋势。

职场

休闲

给力

视觉效果

原创推荐 2011-08-17 00:00:00 2840 阅读

Velocity 2011会议分享

6月12号我和其它同事一起前往美国参加了Velocity 2011的会议，在此期间学习到了很多性能优化方面的经验和方法，通过本文整理出来分享给大家。启程我们乘坐12号下午4点的国航飞机出发，经过11小时到达了旧金山国际机场，由于时差的关系，到了旧金山后的当地时间是12号中午12点，感觉像穿越了。下飞机后我们租了2辆车，在美国租车是最经济方便的交通工具，因为地广人稀，除了大城市其它地方都很少见到公交和出租车，导航仪很精确，很顺利就从机场开到了宾馆。

职场

休闲

velocity

性能

前端技术

原创 2011-07-12 01:07:01 1237 阅读

初识前端模板

“模板”这个词，可能很多人第一印象是后端的技术（Smarty，Velocity等），但本文要讲的却不是后端的概念，而是前端开发中所使用到的一种技术，也就是“前端模板”技术

职场

模板

休闲

前端

初识

原创 2011-07-11 20:23:24 761 阅读

前端开发中的MCRV模式

针对前端开发中基于ajax的复杂页面开发所面临的代码规模大，难以组织和维护，代码复用性、扩展性和适应性差等问题，本文尝试以MVC思想为基础，结合Web前端开发中内容-结构-表现-行为相分离的开发标准

开发

模式

休闲

前端

MCRV

原创 2011-07-08 17:34:23 806 阅读

web前端课程课件汇总

请各位同学注意，后续的课件将在本贴中汇总。

职场

汇总

休闲

web前端

课程课件

原创 2011-06-23 19:26:20 2789 阅读

即时通信与浏览器多TAB通信

摘要浏览器与服务器端的即时通信技术解决了在线聊天等产品中涉及到的复杂网络环境下的问题；采用多tab通信技术来处理现代浏览器的跨页面通信，分析特定疑难问题的技术解决方案。 TAG 即时通信，多tab通信

休闲

即时通信

浏览器

贴吧技术

跨页面通信

原创 2011-06-23 11:06:36 1118 阅读

以圆桌骑士为例浅尝HTML5游戏开发

随着XHTML的逐渐式微，Chrome，Safari，FireFox，Opera等现代浏览器正在积极完善HTML5实现，IE9也加入到标准的行列并将在今年上半年发布正式版，HTML5时代来临了。在各种HTML5特性中，最吸引人的莫过于canvas标签，其提供的绘图API将颠覆以往web表现力匮乏的形象。随着浏览器对canvas的普遍支持，利用canvas实现的web应用会出现爆发性的增长。本人尝试了使用canvas开发2d卷轴游戏，与大家分享。

游戏开发

HTML5

圆桌

骑士

浅尝

原创 2011-06-23 10:06:17 1142 阅读

如何做到API兼容

本文主要介绍什么是API，以及API兼容的重要性，最终给出方案如何评估API，以及如何做到API兼容。

休闲

评估

如何

开发者

编程

原创 2011-06-21 15:04:40 2176 阅读

JavaScript项目持续集成方案

本文通过三个方面对持续集成实现进行讲述：首先，如何跨越从Html方式的用例组织到自动化测试所必须的用例执行动态组织；

JavaScript

项目

休闲

持续

集成方案

原创 2011-06-20 10:11:12 1422 阅读

百度与中科院,北航联合开展web前端前沿技术课程

随着互联网发展，前端展示、交互，以及性能和安全的要求越来越高，加上HTML5新技术和产品多终端需求，前端技术在产品中发挥的重要性更加凸显。百度web前端研发部精心准备为中科院研究生院以及北京航天航空大学的学生准备了 web前端前沿技术系列讲座课程。课程从web前端发展趋势，到CSS样式表，JS语言等前端专业领域，再到前沿的HTML5&CSS3，地图API，web安全

百度

联合

北航

web前端

中科院

原创 2011-06-17 16:41:10 1827 阅读

Python脚本覆盖率分析方法介绍

Python凭借其面向对象的特点，清晰简洁的语法以及丰富而强大的类库，已经在越来越多的应用领域中获得了青睐。

分析

脚本

Python

方法介绍

覆盖率

原创 2011-05-06 20:13:00 2562 阅读

tangram开发中使用的开源工具介绍

tangram是百度前端研发部推出的一个开源js库，在百度各产品线上广泛使用。在开发tangram项目时，tangram开发团队制定了一个开发流程，用来保证项目质量和进度。在这个流程中，我们使用了各种开源工具来辅助提高效率，取得了良好的效果。本文将简要介绍这些开源工具和使用体会，希望对提升你的开发效率和质量有所帮助。

工具

开源

开发

休闲

tangram

原创 2011-04-15 16:48:10 1063 阅读

模块化的Javascript库 —— Tangram

模块化的Javascript库 —— Tangram Tangram是一个适用面广、高度模块化的Javascript库。内含大量基础方法与Javascript组件，开发人员能基于它便捷地完成开发工作。本文将介绍Tangram的历史、设计原理和系统架构，旨在帮助各位读者更好地了解Tangram。

JavaScript

休闲

模块化

Tangram

Javascript库

原创 2011-02-28 16:26:00 1030 阅读

浏览器的加载与页面性能优化

本文将探讨浏览器渲染的loading过程，主要有2个目的：了解浏览器在loading过程中的实现细节，具体都做了什么研究如何根据浏览器的实现原理进行优化，提升页面响应速度

浏览器

加载

休闲

页面

性能优化

原创 2011-02-15 17:12:23 6540 阅读

Htmlfuzz异常网页构造

Fuzz test（模糊测试），并不是一种新技术。早在1989年就被威斯康星州的麦迪逊大学BartonMiller教授发明已经有20年的历史。所谓模糊测试，即用随机坏数据（它是在正常数据上的微小变异）攻击一个程序，然后等着观察哪里遭到了破坏。

网页

异常

休闲

构造

Htmlfuzz

原创 2011-02-11 14:10:23 1026 阅读

【百度分享】javascript中函数调用过程中的this .

在函数的调用中，this是个什么东西，又是由什么决定的呢？在ecma262中，这是个比较绕的东西，其描述散落在世界各地。

javascript

过程

休闲

this

函数调用

原创 2011-01-10 10:38:00 683 阅读

WAP页面设计与实现小贴士

目前绝大多数手机都支持WAP 2.0。WAP 2.0的页面设计具有更好的视觉效果，更接近网页。不过由于手机千差万别，手机浏览器的能力也各不相同，直接照搬网页的设计与实现，很可能让你的WAP页面出现问题。以下小贴士来自于我们的页面设计与开发实践。

设计

实现

WAP

页面

小贴士

原创 2011-01-07 13:23:23 729 阅读

【百度分享】javascript中的数据类型

最近对javascript型有些感想，想分3个部分和大家分享一下，先说说数据类型的分析：

职场

数据

javascript

类型

休闲

原创 2010-12-27 11:30:10 454 阅读

Tangram 前端库通过 Github 开源了

Tangram 是百度内部一直在开发和使用的前端库之一，功能与 jQuery 、 Prototype 等库类似，主要功能是简化 DOM 操作，并且扩展 JavaScript 语言。这部分功能准确来说属于 Tangram Core ，另外一个叫做 Tangram Component 的库提供一些类似 YUI 、 Sencha 这个级别的组件。

开源

通过

Tangram

前端库

Github

原创 2010-12-24 12:12:12 541 阅读

百度前端技术交流会视频

张克军：豆瓣前端团队的工作方式

技术

百度

休闲

前端

交流会

原创 2010-11-08 18:21:21 1312 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

百度技术博客

前端重构实践（二） —— 模块化开发

前端重构实践（一） —— 性能优化

WEB交互的划时代革新--HTML5中WebSocket应用【1】

流量低峰也烦人-lighttpd耗时长问题追查

CC-lib无线跨平台web页面自动化生成技术的设计实现

如何用 JS 实现 3D ×××效果

基于fiddler来模拟限速

JS 3D 模型

前端优化之图片优化自动化

Web server调研分析

Html5很给力——代码可实现的视觉效果

Velocity 2011会议分享

初识前端模板

前端开发中的MCRV模式

web前端课程课件汇总

即时通信与浏览器多TAB通信

以圆桌骑士为例浅尝HTML5游戏开发

如何做到API兼容

JavaScript项目持续集成方案

百度与中科院,北航联合开展web前端前沿技术课程

Python脚本覆盖率分析方法介绍

tangram开发中使用的开源工具介绍

模块化的Javascript库 —— Tangram

浏览器的加载与页面性能优化

Htmlfuzz异常网页构造

【百度分享】javascript中函数调用过程中的this .

WAP页面设计与实现小贴士

【百度分享】javascript中的数据类型

Tangram 前端库通过 Github 开源了

百度前端技术交流会视频