1 / 9
文档名称:

关于前端优化(上).docx

格式:docx   大小:55KB   页数:9页
下载后只包含 1 个 DOCX 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

关于前端优化(上).docx

上传人:pppccc8 2019/4/16 文件大小:55 KB

下载得到文件列表

关于前端优化(上).docx

相关文档

文档介绍

文档介绍:关于前端性能优化除了自己总结:1•减少http请求,2•压缩并优化js/css/,从简原则4•代码规范(详见:个人知识体系思维导图)从yahoo新学到的:两页内容眼务藩Cookie图片便用CDN减少Cookie大小优化图惊®tOExpires^Cache<ontroBE^^r页面内姿使用无&)8^4°4橇®JavascriptftCSS去除墓夏驛卒遞少冷顷回便用智能鑒件处理网页内容减少http请求次数80%的响应时间花在卜载网页内容(images,stylesheets,javascripts,scripts,flash等)。减少请求次数是缩短响应时间的关键!可以通过简化页而设计来减少请求次数,但页面内容较多可以采用以下技巧。捆绑文件:现在有很多现成的库可以帮你将多个脚本文件捆绑成一个文件,将多个样式表文件捆绑成一个文件,以此来减少文件的下载次数。中可以使用ScriptManager,MVC中的BundlingoCSSSprites:就是把多个图片拼成一副图片,然后通过CSS来控制在什么地方具体显示这整张图片的什么位置。给大家看个熟悉的Sprites实例。豆瓣把他的图标集中在一起,然后我们看他如何控制只显示第一个图标的•app-icon-read{background-position:00;}•app-icon{background:url(z,/pics/app/")no-t;border-radius:lOpxlOpxlOpxlOpx;box-shadow:lpxlpx2px#999999;display:iniine-block;height:50px;width:50px;ImageMaps:也是将多幅图拼在-•起,然后通过坐标来控制显示导航。这里有个经典的例子,选屮图片屮的某个人就会将你带到不同的链接。Inlineimages:通过编码的字符串将图片内嵌到网页文本中。例如下面的inlineimage的显示效果为一个勾选的checkbox。•sample~in1ine-png{padding~left:20px;background:whiteurlCdata:image/png;basc64,iVBORwOKGgoAAAANSUhEUgAAABAAAAAQAQMAAAA1PW0iAAAAB1BMVEUAAAD///+12Z/dAAAAMO1EQVR4nGP4/5/h/l+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/,)no-repeatscrol1lefttop;}减少DNS查询次数DNS查询也消耗响应时间,如果我们的网页内容来自各个不同的domain(比如嵌入了开放广告,引用了外部图片或脚木),那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器中一段时间,所以D