201901-03 你真的了解回流和重绘吗? 回流和重绘可以说是每一个web开发者都经常听到的两个词语,我也不例外,可是我之前一直不是很清楚这两步具体做了什么事情。最近由于部门内部要做分享,所以对其进行了一些研究,看了一些博客和书籍,整理了一些内容并且结合一些例子,写了这篇文章,希望可以帮助到大家。浏览器的渲染过程本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘,如果大家想直接看如何减少回流和重绘,可以跳到后面。(这个渲染过程来... 继续阅读 >
201901-03 2018 年浏览器混战:为什么技术救不了 Edge? 随着微软正式确认放弃Edge,并基于Chromium引擎重启新的浏览器,我想借此机会分享一些有关当前Web浏览器格局的想法。Edge:注定要失败在推出3年之后,从市场份额来看,Edge无疑是失败的。根据用户的使用数据来看,它的份额仅为4-5%。这个数字居然是来自一家半垄断运营桌面操作系统的公司,而它曾经拥有80-90%的市场份额,几乎是完全垄断的。更糟糕的是,如果再算上移动市场,市场份额急剧下降至2%... 继续阅读 >
201812-07 微软正在构建一个基于 Chromium 的浏览器并计划取代 Microsoft Edge 微软终于在浏览器上认输了?在用Edge取代多年的IE之后,如今Edge也低下了头颅,承认了Chrome的胜利。MicrosoftEdge浏览器在2015年1月21日公布,并在3月30日发布了第一个预览版,并在之后成为Windows10的默认浏览器,采用EdgeHTML渲染引擎并在体验上相比IE有着多项改进。但现在 Edge默认浏览器的地位已经岌岌可危,根据windowscentral的报道,微软将放弃自家的EdgeHTML渲染引... 继续阅读 >
201705-19 WebView 缓存原理分析和应用 一、背景现在的App开发,或多或少都会用到Hybrid模式,到了WebView这边,经常会加载一些js文件(例如和WebView用来Native通信的bridge.js),而这些js文件不会经常发生变化,所以我们希望js在WebView里面加载一次之后,如果js没有发生变化,下次就不用再发起网络请求去加载,从而减少流量和资源的占用。那么有什么方式可以达到这个目的呢?先得从WebView的缓存原理入手。二、WebView的缓存类型WebView主要包括两类... 继续阅读 >
201705-06 探讨判断横竖屏的最佳实现 在移动端,判断横竖屏的场景并不少见,比如根据横竖屏以不同的样式来适配,抑或是提醒用户切换为竖屏以保持良好的用户体验。判断横竖屏的实现方法多种多样,本文就此来探讨下目前有哪些实现方法以及其中的优缺点。CSSMediaQueries通过媒体查询的方式,我们可以通过以下方法来实现根据横竖屏不同的情况来适配样式:1.内联样式@mediascreenand(orientation:portrait){ //竖屏}@... 继续阅读 >
201704-27 写好循环也不容易--8种遍历方法执行速度深度°对比 关于数组或对象遍历,相信很多人都没有深入观察过执行效率。这是一个曾在群里吵翻天的话题,读懂后你将成为遍历效率话题的大师。导读遍历数组或对象是一名程序员的基本素养之一.然而遍历却不是一件简单的事,优秀的程序员知道怎么去选择合适的遍历方法,优化遍历效率.本篇将带你走进JavaScript遍历的世界,享受分析JS循环的快感.本篇所有代码都可以直接运行,希望您通读本篇后,不止是浏览,最好是亲手去实践下.... 继续阅读 >
201703-30 浅析前端页面渲染机制 作为一个前端开发,最常见的运行环境应该是浏览器吧,为了更好的通过浏览器把优秀的产品带给用户,也为了更好的发展自己的前端职业之路,有必要了解从我们在浏览器地址栏输入网址到看到页面这期间浏览器是如何进行工作的,进而了解如何更好的优化实践,本篇主要围绕这两点展开阐述。前端页面渲染机制可谓是老生常谈,但又很有必要再谈的话题,于是还是决定写一篇,即是对知识的回顾总结,又能与大家分享,何乐而不为。网上相关类型... 继续阅读 >
201603-28 浏览器与服务器的消息通信 最近工作中遇到一个场景,商家在商家后台需要实时的获取到有没有新订单,有的话是几个;这个需求类似与日常中使用QQ或者微信时的新信息提醒一样,只要有新信息就需要提醒;商家基本在PC上使用,各式浏览器都有:如IE系列(7.0,8.0,9.0及以上),chrome内核,firefox等;功能所属的部署在Tomcat6.0上,如果技术需要可以部署到Tomcat7.0上;我们先做做技术调研,这种浏览器与服务器实时通信的方式有哪些方式。AJA... 继续阅读 >
201601-22 浏览器缓存知识小结及应用 浏览器缓存,也就是客户端缓存,既是网页性能优化里面静态资源相关优化的一大利器,也是无数web开发人员在工作过程不可避免的一大问题,所以在产品开发的时候我们总是想办法避免缓存产生,而在产品发布之时又在想策略管理缓存提升网页的访问速度。了解浏览器的缓存命中原理,是开发web应用的基础,本文着眼于此,学习浏览器缓存的相关知识,总结缓存避免和缓存管理的方法,结合具体的场景说明缓存的相关问题。希望能对有需要的人... 继续阅读 >
201512-07 浏览器 HTTP 缓存原理分析 以前项目中遇到了很多浏览器缓存相关的问题,也在网上查过资料,搞过服务器的配置,来确保客户端加载服务器资源的速度和资源有效性。最近仔细看了下http协议中和缓存相关的一些属性,总结一下。浏览器缓存原理文字版描述①浏览器第一次访问服务器资源/index.html在浏览器中没有缓存文件,直接向服务器发送请求。服务器返回 200OK,实体中返回index.html文件内容,并设置一个缓存过期时间,一个文件修改时间,一个根... 继续阅读 >
201511-17 当你输入一个网址后按回车,实际会发生什么? 英文原文:WhatreallyhappenswhenyounavigatetoaURL,编译:寒冬星空作为一个软件开发者,你一定会对网络应用如何工作有一个完整的层次化的认知,同样这里也包括这些应用所用到的技术:像浏览器,HTTP,HTML,网络服务器,需求处理等等。本文将更深入的研究当你输入一个网址的时候,后台到底发生了一件件什么样的事~1.首先嘛,你得在浏览器里输入要网址: 2.浏览器查找域名的IP地址导航的第一步是通过访问... 继续阅读 >
201508-26 浏览器可以有多快? React.js以高效的UI渲染著称,其中一个很重要的原因是它维护了一个虚拟DOM,用户可以直接在虚拟DOM上进行操作,React.js用diff算法得出需要对浏览器DOM进行的最小操作,这样就避免了手动大量修改DOM的时候造成的性能损失。等等,明明是在中间加了一层,为什么结果反而变快了呢?React.js的核心思想是认为DOM操作是缓慢的,因此可以需要最小化DOM操作,以换取整体的性能提升。DOM操作慢是有目共睹的,而其... 继续阅读 >
201508-01 Edge浏览器能为微软赢回Web开发者的心吗? 最新的Windows10操作系统带来了一个新的浏览器Edge,新的浏览器快速、稳定,而且长得也比之前的IE好看。但web开发者可能不会在意这些,它们在意的是,Edge对其站点支持和渲染情况如何。在过去十多年的时间里,web网页世界一直在发生着转变,IE曾经一统世界,但后来又被谷歌的Chrome赶超——因为Chrome更快也更可靠。通过Edge浏览器,微软期望重新赢得开发者的心,而且也看得出来的确下了功夫。... 继续阅读 >
201507-31 32种谷歌浏览器插件,程序员的福音 对于网页设计人员或网站开发者来说,更喜欢使用像FF的此类浏览器,原因是其具有强大的辅助插件,可以帮助网页制作与开发提高效率,那么同样对于GoogleCchrome浏览器来说也是具有大量的此类插件,本文收集了一些针对GoogleCchrome浏览器进行网页制作开发的插件工具。可以有效提高网页设计师或前端开发者的工作效率。无论是Firefox还是GoogleChrome,其强大的扩展都是吸引我们最大的原因之一。下面介绍的是网页设计和... 继续阅读 >
201505-27 凭这5点你应该放弃IE !改用微软Edge浏览器 很多 Windows 用户可能还不知道微软的 Edge 浏览器是什么,该浏览器在公布初期,曾称之为 Project Spartan,直到接近内测登场才更名为 Microsoft Edge,再接下来按照微软的计划,Edge 将成为未来 Windows 10 的默认浏览器。按照微软的说法,Microsoft Edge 不支持老版本的 Windows 系统,这也是与 Internet Explorer ... 继续阅读 >
201505-23 涨姿势!为什么Chrome浏览器特爱吃内存 微软用惯用的手法——改名——给IE被黑的一生画上了句号。还好,它在技术段子圈里早就有了接班人:Chrome。Chrome很好很强大,速度极快、功能很多。但同时它也是你的电脑内存不足或者耗电太快的罪魁祸首。没办法,Chrome太爱吃内存了(如头图)。为什么?我们找到了4个最关键的答案,不需要特别懂技术也可以理解。1.Chrome把你在浏览器上做的每件事都拆成独立的进程在大多... 继续阅读 >