Facebook和Quora如何在Ajax响应上返回JavaScript？他们如何应对？

我已经注意到,一些新网站在其ajax响应中返回的javascript以及html和其他内容.例如,当要从Facebook发送消息时,将出现一个弹出窗口,当提交,悬停等时,输入和其他元素将与事件绑定.

这样有优势吗？

您可以与检查员一起观看(当然),但是我要举一个响应示例：

     HeadersContentCookiesTiming {
        "value": {
            "html": "<div class=\"dialog_tabs\"><a class=\"tab\" group=\"__w2_PHfxEJe_tabs\"
    href=\"#\" show=\"signup\" id=\"__w2_PHfxEJe_signup_select\"><span class=\"no_icon 
    signup\">Create an Account</span></a><a class=\"tab\" group=\"__w2_PHfxEJe_tabs\" 
    href=\"#\" show=\"login\" id=\"__w2_PHfxEJe_login_select\"><span class=\"no_icon 
    login\">Login</span></a></div><div group=\"__w2_PHfxEJe_contents\" 
    id=\"__w2_PHfxEJe_signup\"><div class=\"row live_login_signup_form\"><div class=\"row 
    p0_5\">Sorry, you must have an invitation to create an account on Quora.</div></div></div><div class=\"hidden\" group=\"__w2_PHfxEJe_contents\" id=\"__w2_PHfxEJe_login\"><div class=\"row form_row\" id=\"__w2_PHfxEJe_inline_login\"><div id=\"ld_LIJSXr_1\"><div id=\"__w2_b5Jr0f0_associated\"><div id=\"ld_LIJSXr_2\"></div></div><div class=\"w3_5 p1\"><form class=\"row w2_5 col inline_login_form\" method=\"POST\" id=\"__w2_b5Jr0f0_login_form\"><div class=\"form_inputs\"><div class=\"form_row\"><label for=\"__w2_b5Jr0f0_email\">Email Address</label><input class=\"text\" group=\"__w2_b5Jr0f0_interaction\" type=\"text\" name=\"email\" w2cid=\"b5Jr0f0\" id=\"__w2_b5Jr0f0_email\" /><p class=\"hidden input_validation_error_text\" id=\"__w2_b5Jr0f0_email_not_confirmed_error\">You need to confirm your email address\n                               before you can login. <br /><a hred=\"#\" id=\"__w2_b5Jr0f0_resend_confirmation\">Resend Confirmation Link</a></p><span class=\"hidden input_validation_error_text\" id=\"__w2_b5Jr0f0_email_not_found_error\">No account matching that email address was found.</span></div><div class=\"form_row\"><label for=\"__w2_b5Jr0f0_password\">Password</label><input class=\"text\" group=\"__w2_b5Jr0f0_interaction\" type=\"password\" name=\"password\" w2cid=\"b5Jr0f0\" id=\"__w2_b5Jr0f0_password\" /><span class=\"hidden input_validation_error_text\" id=\"__w2_b5Jr0f0_incorrect_password_error\">Incorrect password.  <a href=\"#\" id=\"__w2_b5Jr0f0_reset_password_link\">Reset Password</a></span></div></div><div class=\"form_buttons p1\"><input class=\"col p0_5\" group=\"__w2_b5Jr0f0_interaction\" type=\"checkbox\" checked=\"checked\" name=\"allow_passwordless\" value=\"allow_passwordless\" w2cid=\"b5Jr0f0\" id=\"__w2_b5Jr0f0_allow_passwordless\" /><label class=\"login_option\" for=\"__w2_b5Jr0f0_allow_passwordless\">Let me login without a password on this browser</label><input class=\"submit_button\" group=\"__w2_b5Jr0f0_interaction\" type=\"submit\" value=\"Login\" w2cid=\"b5Jr0f0\" id=\"__w2_b5Jr0f0_submit_button\" /></div></form><div class=\"hidden e_col inline_login_preview_box\" id=\"__w2_b5Jr0f0_preview\"><img id=\"__w2_b5Jr0f0_pic\" /><br /><span id=\"__w2_b5Jr0f0_name\"></span></div></div></div></div></div>",
            "css": "",
            "js": "W2.addComponentMetadata({parents: {\"b5Jr0f0\": \"PHfxEJe\", 
\"PHfxEJe\": \"*dialog*_1\", \"NqeVUG8\": \"b5Jr0f0\"}, children: {}, knowsAbout: 
{\"b5Jr0f0\": {\"inline_login\": \".\"}, \"PHfxEJe\": {\"signup_form\": \"signup_form\"}}, 
groups: {\"__w2_PHfxEJe_contents\": [\"__w2_PHfxEJe_signup\", \"__w2_PHfxEJe_login\"], 
\"__w2_b5Jr0f0_interaction\": [\"__w2_b5Jr0f0_email\", \"__w2_b5Jr0f0_password\", 
\"__w2_b5Jr0f0_allow_passwordless\", \"__w2_b5Jr0f0_submit_button\"], 
\"__w2_PHfxEJe_tabs\": [\"__w2_PHfxEJe_signup_select\", \"__w2_PHfxEJe_login_select\"]}, 
domids: {\"b5Jr0f0\": \"ld_LIJSXr_1\", \"NqeVUG8\": \"ld_LIJSXr_2\"}});var _components = 
[new(LiveLoginDialog)(\"PHfxEJe\",\"\",{\"default_tab\": \"signup\", \"autostart\": 
null},\"cls:a.app.view.login:LiveLoginDialog:OuWttII3ndCni7\",{}), new(InlineLogin)
(\"b5Jr0f0\",\"\",{},\"live:ld_LIJSXr_1:cls:a.app.view.login:InlineLogin:zLqmkvFx8WJgk2\",
{})];W2.registerComponents(_components);W2.onLoad(_components, false);"
        },
        "pmsg": null
    }

解决方法:

来自Facebook的Makinde在此视频中讨论了这种方法,并说明了其好处：

http://www./video/video.php?v=596368660334&oid=9445547199

综上所述：
在Facebook上,他们达到了拥有1M javascript的地步,这使得网站运行缓慢,是维护噩梦.他们发现大多数用例都是关于向服务器发送请求并呈现不同的HTML.因此,通过将业务逻辑推送到服务器并让其返回要呈现的html,他们设法删除了大量的javascript并提高了网站速度.事实证明,在响应中返回HTML不会比仅返回json并使用JavaScript呈现它增加太多的延迟.但是,视频中还有更多细节.我正在做一个可以完成其中一些工作的库,现在在我自己的项目中使用它.

来源：https://www./content-1-545201.html