联系电话:029-85366199


资质荣誉
奖牌 奖牌 奖牌 奖牌
就业明星
学校新闻您现在的位置:主页 > 新闻动态 > 学校新闻 >
web前端工程师如何做好web前端开发优化
浏览次数:332  添加时间:2017-07-14 09:51
WEB前端开发性能优化一直是WEB前端工程师们所追求的,做一个好的作品出来,优化是必不可少的,那么Web前端优化都有哪些具体的内容呢?对于一个优秀的问前端工程师而言,开发设计web前端界面是web前端工程师的基础,而做好web前端开发过程中的优化就是一种提升了。
web前端开发工程师
一、Web前端优化实践之内容
1.尽量减少HTTP请求;
合并文件,比如把多个css文件合成一个;
CSSSprites利用CSSbackground相关元素进行背景图绝对定位;
图像地图(在一个图像上划分不同区域映射不同的链接);
内联图像(使用data:URLscheme在实际的页面嵌入图像数据);
2.减少DNS查找:
DNS查询完成之前浏览器不能从这个主机下载任何任何文件。
方法:DNS缓存、将资源分布到恰当数量的主机名,平衡并行下载和DNS查询;
3.避免重定向:多余的中间访问(不是绝对的避免,尽量减少)
定义:重定向用于将用户从一个url重新路由到另一个url;
损伤:重定向的延迟也很严重,因为它延迟了整个html文档的传输,在html文档到达之前,页面中不会呈现出任何东西,也没有任何组件会被下载,在用户与html文档之间插入重定向延迟了页面中的所有东西;
WEB前端
4.使Ajax可缓存
Ajax页面缓存是ajax处理数据时对一些重复相同数据进行一个缓存操作,这种设计使客户端对一些静态页面内容的请求,比如图片,css文件,js脚本等,变得更加快捷,提高了页面的响应速度,也节省了网络通信资源;
5.非必须组件延迟加载,未来所需组件预加载(异步);
6.减少DOM元素数量;
7.切分组件到多个域;
主要的目的是提高页面组件并行下载能力,但不要跨太多域;
8.最小化iframe的数量
iframes提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它包括script和css的DOM元素的创建慢了1-2个数量级;
使用iframe的页面一般不会包含太多iframe,所以创建DOM节点所花费的时间不会占很大的比重。但带来一些其它的问题:onload事件以及连接池(connectionpool)。
Iframes阻塞页面加载
及时触发window的onload事件是非常重要的。onload事件触发使浏览器的“忙”指示器停止,告诉用户当前网页已经加载完毕。当onload事件加载延迟后,它给用户的感觉就是这个网页非常慢。
window的onload事件需要在所有iframe加载完毕后(包含里面的元素)才会触发。在Safari和Chrome里,通过JavaScript动态设置iframe的src可以避免这种阻塞情况。

文章来源:www.ityunxueyuan.com

版权所有 西安兆隆计算机云学院
大话南门分校:西安市碑林区长安北路
高新分校:陕西省西安市雁塔区科技路
学院简介|课程详情|学员就业|强大师资|校园新闻