编程以来遇到的常见的前端优化(持续更新)
来源:互联网 发布:裁员补偿标准n的算法 编辑:程序博客网 时间:2024/05/22 05:23
常见的一些优化,在做题和实际开发中遇到优化的点和解决办法.
1.字符串的连接效率
字符串的连接机制
var str ;str = 'this is a string';str = str + ',another string.';
对于这个连接操作JS的处理机制是:
(1)新建一个临时字符串,
(2)将新字符串赋值为 str + ',another string.' ,然后返回这个新字符串
(3)并同时销毁原始字符串
因此字符串的连接效率较低。
提高效率的办法是用数组的join函数,使用join代替字符串拼接这个技巧对于IE6、7有显著性能提升,同时对现代浏览器,没有太过明显的性能损耗。则可以将需要连接的字符串push进一个数组,用join('')将其转化为字符串。
实例:阿里巴巴2011年前端笔试题:
// 请把以下用于连接字符串的JavaScript代码修改为更高效的方式<pre name="code" class="javascript">var htmlString = '< div class=''container'' > ' + ' < ul id=”news-list” > ';for (var i = 0; i < NEWS.length; i++) { htmlString += '< li > < a href=" +NEWS[i].LINK + '" > +NEWS[i].TITLE + '< /a > < /li > ';}htmlString += '< /ul > < /div > ';优化后为:
var htmlString = "<div class=<span style="line-height: 25.2px; font-family: verdana, Arial, Helvetica, sans-serif;">”</span><span style="line-height: 25.2px; font-family: verdana, Arial, Helvetica, sans-serif;">container”>" + "<ul id=”news-list”>";</span>for (var i = 0; i < NEWS.length; i++) { var newsItem = NEWS[i]; htmlString += "<li><a href="" + newsItem.LINK + ">" + newsItem.TITLE + "</a></li>";}htmlString += "</ul></div>";
2.大规模的循环体是主要的优化对象
在JavaScript中,我们可以使用
for(;;)
,while()
,for(in)
三种循环,事实上,这三种循环中for(in)的效率极差,因为它需要查询散列键,只要可以,就应该尽量少用。for(;;)
和while循环,while循环的效率要优于for(;;)
,因为for(;;)
结构的问题,需要经常跳转回去。常用的循环优化都会将循环倒过来,最常用的for循环和while循环都是前测试循环,而如do-while这种后测试循环,可以避免最初终止条件的计算,因此运行更快。3.性能优化
从hexo博客进阶-性能优化中学习到的。
先来说说我们在面试中经常遇到的一个问题,
在浏览器输入url到页面打开,都做了些什么?
- 1浏览器里输入网址
- 2浏览器查找域名对应的IP地址:这一步包括DNS具体的查找过程,包括:浏览器缓存->系统缓存->路由器缓存…
- 3浏览器向web服务器发送一个HTTP请求
- 4服务器的永久重定向响应(从
http://example.com
到http://www.example.com
)- 关于为什么要重定向。其中一个原因跟
搜索引擎
排名有关。如果一个页面有两个地址,就像http://example.com/
和http://www.example.com/
,搜索引擎会认为它们是两个网站,结果造成每一个的搜索链接都减少从而降低排名。所以要把带www的和不带www的地址归到同一个网站排名下。还有一个原因是用不同的地址会造成缓存友好性变差
。
- 关于为什么要重定向。其中一个原因跟
- 5浏览器跟踪重定向地址,发起GET请求
- 6服务器”处理”请求,向浏览器发回一个HTML响应
- 7浏览器解析显示HTML
- 8浏览器发送请求获取嵌入在 HTML 中的资源(如图片、音频、视频、CSS、JS等等)
- 9浏览器发送异步请求(ajax请求等)
- 分析
- 少发送请求
- 压缩文件
- Css Sprite
- js/css位置
0 0
- 编程以来遇到的常见的前端优化(持续更新)
- 项目中遇到的bug(web前端-持续更新)
- 常见的前端面试题——(持续更新...)
- SAP 中遇到的常见语句(持续更新)
- 编程时遇到的报错总结(持续更新)
- 总结Unity遇到的坑及优化(持续更新)
- 遇到的数学公式摘记(持续更新)
- Jenkins遇到的问题(持续更新)
- ReactJS前端项目 问题与解决记录(刚接触前端,根据项目中遇到的坑持续更新)
- c#编程中遇到的错误 持续更新
- java编程中遇到的一些错误 持续更新
- 编程生涯中遇到的难以解决的大小问题(持续更新)
- 那些奇葩而又常见的前端问题(遇到就更新)
- c++(c语言)编程过程中遇到的细微问题总结(持续更新)
- C++编程所遇到的error(持续更新和补充)
- Unity知识四:Unity编程过程中遇到的小问题(持续更新)
- 学编程以来第一次遇到的灵异事件
- 编程的良好习惯(持续更新)
- 轻松理解javascript中的局部变量与全局变量以及this的问题
- Serialize and Deserialize Binary Tree
- Avoiding duplicate symbol errors during linking by removing classes from static libraries
- 微信SDK踩过的那些坑。。登录分享支付
- 计蒜客挑战难题:元素移除
- 编程以来遇到的常见的前端优化(持续更新)
- Android源码编译(3)---下载源码
- 计算机网络基础知识总结
- 使用Gallery来实现图片的3D效果
- 开通博客了,争取每周4篇技术类博客。
- 计蒜客挑战难题:寻找插入位置
- 【易语言界面开发系列教程之(EX_UI使用系列教程(12)--EX组件(列表框EX))】
- storm学习(3) Trident
- ionic build android 出现Error: spawn cmd ENOENT