浏览器的优化问题

优化:
1.代码层面的优化
     1。提高JS代码复用性,缩小JS文件大小。
     2。减少DOM选择和计算,dom操作,变量操作的结果缓存,下次直接使用缓存结果
     3。CSS文件优化,正确使用display属性,否则会影响页面的渲染;不滥用float;不申明过多的fontsize;标准化各种浏览器的前缀;避免使用高级的选择器,耗时长,尽量使用id,class选择器,避免使用内联style;尽量使用css3动画
     4。资源加载,按需加载和异步加载;
     5。压缩所有的html css js
     6。减少重绘和回流;
     7使用touchstart,touchend click;
     8html中使用viewport;
     9。touchmove scroll事件会导致多次渲染;
     10。避免空的src 减少html中的src请求
 
2框架级优化
    使用第三方资源时,由于资源不可控,所以要慎选择。要根据项目需求和其对比性的影响去综合考虑,选择合适的框架以及库文件,同时使用异步加载的方式去加载,避免第三方资源的使用影响项目本身的性能。
 
3域名服务端的优化
    1.使用压缩资源;
    2.资源缓存,合理设置资源的过期时间;
    3.减少cookies,减少cookies头信息的大小,否则会影响传输速度;
    4.CDN加速,图片或者css,js均可以使用cdn来加速。
 
4服务器端优化
    1.接口合并,如果一个页面需要请求两部分以上的数据接口,则建议合并成一个,可以减少http请求;
    2.减少数据量,去掉接口返回的数据中不需要的数据;
    3.缓存数据,首次加载请求一次后,缓存下数据;非首次请求优先使用上次请求的数据,可以提高非首次请求的加载速度
 
移动端一般遵循1秒法则或者3秒法则
4G/wifi下,1s完成页面加载,包括首屏资源可看可用
3G下,1秒完成首包的返回
2G下,1秒完成建立连接
DNS优化:建立白名单域名
连接复用,开启spdy http2 域名控制,例如静态资源都放在一个域名下,图片优化,图片根据网络情况和设备的分辨率做适配。合并请求,保证组件都小于25K,组件打包到一个符合文档里 常见的前端性能优化此处也使用,比如雅虎的35条军规。
内容方面:减少http请求,例如合并文件 css sprites 行内图片;
减少DNS查询,避免重定向 ajax可缓存,延迟加载组件
css部分:避免使用CSS表达式,使用link 避免import 样式表放在顶部 压缩CSS
JS部分 去除重复脚本 减少DOM访问,脚本放在页面最下方 压缩JS
服务器 开启GZIP 避免图片SRC属性为空,配置Etags 使用CDN
 
网址输入url回车之后发生了什么
    当在浏览器中输入URL后,浏览器首先对拿到的URL进行识别,抽取出域名字段。
 
    在进行DNS解析时,会经历以下步骤:
 
        查询浏览器缓存(浏览器会缓存之前拿到的DNS 2-30分钟时间),如果没有找到,
 
        检查系统缓存,检查hosts文件,这个文件保存了一些以前访问过的网站的域名和IP的数据。它就像是一个本地的数据库。如果找到就可以直接获取目标主机的IP地址了。没有找到的话,需要
 
        检查路由器缓存,路由器有自己的DNS缓存,可能就包括了这在查询的内容;如果没有,要
 
        查询ISP DNS 缓存:ISP服务商DNS缓存(本地服务器缓存)那里可能有相关的内容,如果还不行的话,需要,
 
        递归查询:从根域名服务器到顶级域名服务器再到极限域名服务器依次搜索哦对应目标域名的IP。
 
        3. 浏览器与网站建立TCP连接(三次握手)
 
第一次握手:客户端向服务器端发送请求(SYN=1) 等待服务器确认;
 
第二次握手:服务器收到请求并确认,回复一个指令(SYN=1,ACK=1);
 
第三次握手:客户端收到服务器的回复指令并返回确认(ACK=1)。
 
4.请求和传输数据
 
比如要通过get请求访问“http://www.dydh.org/”,通过抓包可以看到:
 
请求网址(url):http://www.dydh.org/ cookie可以用来保存一些有用的信息:Cookies如果是首次访问,会提示服务器建立用户缓存信息,如果不是,可以利用Cookies对应键值,找到相应缓存,缓存里面存放着用户名,密码和一些用户设置项。
。远程服务器找到资源并使用 HTTP 响应返回该资源,值为 200 的 HTTP 响应状态表示一个正确的响应。
 
进入到一个大主机上,该主机上有一个apache web server,他的端口号为80
通过这个80端口号标识,由apache web server处理这个请求。
apache打开myblog/test.php文件,apache认识html语法,
但不认识php语法,apache就加载php模块,解析php这段代码,
并将得到的结果放在原php位置。然后apache将处理完的结果,
当成一个大字符串返回给客户端浏览器,浏览器将html语法解释执行,
 
 
5.浏览器渲染页面
 
客户端拿到服务器端传输来的文件,找到HTML和MIME文件,通过MIME文件,浏览器知道要用页面渲染引擎来处理HTML文件。
 
a.浏览器会解析html源码,然后创建一个 DOM树。
 
在DOM树中,每一个HTML标签都有一个对应的节点,并且每一个文本也都会有一个对应的文本节点。
 
b.浏览器解析CSS代码,计算出最终的样式数据,形成css对象模型CSSOM。
 
首先会忽略非法的CSS代码,之后按照浏览器默认设置——用户设置——外链样式——内联样式——HTML中的style样式顺序进行渲染。
 
c.利用DOM和CSSOM构建一个渲染树(rendering tree)。
渲染树和DOM树有点像,但是是有区别的。
 
DOM树完全和html标签一一对应,但是渲染树会忽略掉不需要渲染的元素,比如head、display:none的元素等。
 
而且一大段文本中的每一个行在渲染树中都是独立的一个节点。
渲染树中的每一个节点都存储有对应的css属性。
 
d.浏览器就根据渲染树直接把页面绘制到屏幕上。
 
 
 
如何发送请求 tcp 浏览器渲染
闭包,创建对象的方式,参数指向,
移动端问题
vue react Native
 

原文地址:https://www.cnblogs.com/limengyao/p/8604376.html